diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
index 94f1772..6ca8607 100644
--- a/src/views/deviceManage/components/listTubeData.vue
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>管盯</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tubedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTubeData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tubedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
index 94f1772..6ca8607 100644
--- a/src/views/deviceManage/components/listTubeData.vue
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>管盯</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tubedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTubeData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tubedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
index 87639ed..3ef8436 100644
--- a/src/views/deviceManage/components/listWellData.vue
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -17,8 +17,8 @@
         size="small"
         :picker-options="pickerOptions"
         value-format="yyyy-MM-dd HH:mm:ss"
-        start-placeholder="报警开始时间"
-        end-placeholder="报警结束时间"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
         @change="fetchDeviceType"
       />
     </template>
@@ -93,7 +93,7 @@
   },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
     },
     fetchDeviceType(val) {
       this.listLoading = true

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
index 94f1772..6ca8607 100644
--- a/src/views/deviceManage/components/listTubeData.vue
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>管盯</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tubedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTubeData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tubedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
index 87639ed..3ef8436 100644
--- a/src/views/deviceManage/components/listWellData.vue
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -17,8 +17,8 @@
         size="small"
         :picker-options="pickerOptions"
         value-format="yyyy-MM-dd HH:mm:ss"
-        start-placeholder="报警开始时间"
-        end-placeholder="报警结束时间"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
         @change="fetchDeviceType"
       />
     </template>
@@ -93,7 +93,7 @@
   },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
     },
     fetchDeviceType(val) {
       this.listLoading = true
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
index f784671..30f24dc 100644
--- a/src/views/deviceManage/components/listWellLocaData.vue
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -1,18 +1,124 @@
 <template>
-  <div>井盖定位监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { welllocadataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListWellLocaData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '纬度',
+          value: 'lat',
+          align: 'center'
+        },
+        {
+          text: '经度',
+          value: 'lng',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      welllocadataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
index 94f1772..6ca8607 100644
--- a/src/views/deviceManage/components/listTubeData.vue
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>管盯</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tubedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTubeData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tubedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
index 87639ed..3ef8436 100644
--- a/src/views/deviceManage/components/listWellData.vue
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -17,8 +17,8 @@
         size="small"
         :picker-options="pickerOptions"
         value-format="yyyy-MM-dd HH:mm:ss"
-        start-placeholder="报警开始时间"
-        end-placeholder="报警结束时间"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
         @change="fetchDeviceType"
       />
     </template>
@@ -93,7 +93,7 @@
   },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
     },
     fetchDeviceType(val) {
       this.listLoading = true
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
index f784671..30f24dc 100644
--- a/src/views/deviceManage/components/listWellLocaData.vue
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -1,18 +1,124 @@
 <template>
-  <div>井盖定位监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { welllocadataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListWellLocaData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '纬度',
+          value: 'lat',
+          align: 'center'
+        },
+        {
+          text: '经度',
+          value: 'lng',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      welllocadataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index 8285ee7..f6c3f24 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog width="70%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">

diff --git a/mock/deviceManage/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
index 94f1772..6ca8607 100644
--- a/src/views/deviceManage/components/listTubeData.vue
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>管盯</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tubedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTubeData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tubedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
index 87639ed..3ef8436 100644
--- a/src/views/deviceManage/components/listWellData.vue
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -17,8 +17,8 @@
         size="small"
         :picker-options="pickerOptions"
         value-format="yyyy-MM-dd HH:mm:ss"
-        start-placeholder="报警开始时间"
-        end-placeholder="报警结束时间"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
         @change="fetchDeviceType"
       />
     </template>
@@ -93,7 +93,7 @@
   },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
     },
     fetchDeviceType(val) {
       this.listLoading = true
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
index f784671..30f24dc 100644
--- a/src/views/deviceManage/components/listWellLocaData.vue
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -1,18 +1,124 @@
 <template>
-  <div>井盖定位监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { welllocadataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListWellLocaData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '纬度',
+          value: 'lat',
+          align: 'center'
+        },
+        {
+          text: '经度',
+          value: 'lng',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      welllocadataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index 8285ee7..f6c3f24 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog width="70%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
diff --git a/src/views/deviceStatics/components/detailDeviceStatics.vue b/src/views/deviceStatics/components/detailDeviceStatics.vue
new file mode 100644
index 0000000..1017925
--- /dev/null
+++ b/src/views/deviceStatics/components/detailDeviceStatics.vue
@@ -0,0 +1,338 @@
+<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: 'DetailDeviceStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
index 94f1772..6ca8607 100644
--- a/src/views/deviceManage/components/listTubeData.vue
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>管盯</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tubedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTubeData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tubedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
index 87639ed..3ef8436 100644
--- a/src/views/deviceManage/components/listWellData.vue
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -17,8 +17,8 @@
         size="small"
         :picker-options="pickerOptions"
         value-format="yyyy-MM-dd HH:mm:ss"
-        start-placeholder="报警开始时间"
-        end-placeholder="报警结束时间"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
         @change="fetchDeviceType"
       />
     </template>
@@ -93,7 +93,7 @@
   },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
     },
     fetchDeviceType(val) {
       this.listLoading = true
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
index f784671..30f24dc 100644
--- a/src/views/deviceManage/components/listWellLocaData.vue
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -1,18 +1,124 @@
 <template>
-  <div>井盖定位监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { welllocadataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListWellLocaData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '纬度',
+          value: 'lat',
+          align: 'center'
+        },
+        {
+          text: '经度',
+          value: 'lng',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      welllocadataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index 8285ee7..f6c3f24 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog width="70%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
diff --git a/src/views/deviceStatics/components/detailDeviceStatics.vue b/src/views/deviceStatics/components/detailDeviceStatics.vue
new file mode 100644
index 0000000..1017925
--- /dev/null
+++ b/src/views/deviceStatics/components/detailDeviceStatics.vue
@@ -0,0 +1,338 @@
+<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: 'DetailDeviceStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/editDeviceStatics.vue b/src/views/deviceStatics/components/editDeviceStatics.vue
deleted file mode 100644
index 5ce4ebc..0000000
--- a/src/views/deviceStatics/components/editDeviceStatics.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceTypeDetail.js b/mock/deviceManage/deviceTypeDetail.js
index e763ece..82b5233 100644
--- a/mock/deviceManage/deviceTypeDetail.js
+++ b/mock/deviceManage/deviceTypeDetail.js
@@ -1,26 +1,474 @@
 const welldataList = [
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/10/12'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '关闭',
     'logtime': '2020/12/22'
   },
   {
-    'devcode': '井盖状态检测仪',
+    'devcode': '112018030012',
     'wellCode': 'testeq43',
     'descn': '',
     'status': '开启',
     'logtime': '2020/12/27'
   }
 ]
+const liquiddataList = [
+  {
+    'devcode': '112018030012',
+    'liquiddata': '80',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '60',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '50',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'liquiddata': '30',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'cell': '99'
+  }
+]
+const gasdataList = [
+  {
+    'devcode': '112018030012',
+    'strength': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  },
+  {
+    'devcode': '112018030012',
+    'strength': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15'
+  }
+]
+const digdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '24',
+    'frequency': '12',
+    'status': '开挖'
+  }
+]
+const harmfuldataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '12',
+    'CH4': '20',
+    'H2S': '34',
+    'O2': '16',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '19',
+    'H2S': '20',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '60',
+    'CH4': '70',
+    'H2S': '20',
+    'O2': '10',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '30',
+    'CH4': '20',
+    'H2S': '70',
+    'O2': '40',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '10',
+    'CH4': '80',
+    'H2S': '10',
+    'O2': '50',
+    'switch': '开'
+  },
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'CO': '50',
+    'CH4': '90',
+    'H2S': '80',
+    'O2': '60',
+    'switch': '开'
+  }
+]
+const noisedataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '60',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '30',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '70',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '40',
+    'frequency': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'ddata': '10',
+    'frequency': '12'
+  }
+]
+const tempdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '10',
+    'humidity': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '20',
+    'humidity': '10'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '30',
+    'humidity': '40'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '3',
+    'humidity': '35'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '6',
+    'humidity': '20'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'temperature': '15',
+    'humidity': '30'
+  }
+]
+const welllocadataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'lat': '113.131',
+    'lng': '12'
+  }
+]
+const liquidgasdataList = [
+  {
+    'devcode': '112018030012',
+    'wellCode': '30',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'liquiddata': '80',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'liquiddata': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'liquiddata': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'liquiddata': '20',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'liquiddata': '30',
+    'cell': '99'
+  }
+]
+const tubedataList = [
+  {
+    'devcode': '112018030012',
+    'uptime': '2018-06-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '70',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-07-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '10',
+    'uptime': '2018-08-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '30',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '80',
+    'uptime': '2018-09-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '50',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '40',
+    'uptime': '2018-10-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '60',
+    'cell': '99'
+  },
+  {
+    'devcode': '112018030012',
+    'wellCode': '50',
+    'uptime': '2018-11-27 15:21:15',
+    'logtime': '2018-12-27 15:21:15',
+    'strength': '10',
+    'cell': '99'
+  }
+]
 
 module.exports = [
   // mock get all routes form server
@@ -35,5 +483,113 @@
         success: true
       }
     }
+  },
+  {
+    url: '/liquiddata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquiddataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/gasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: gasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/digdata/listSimplee',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: digdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/noisedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: noisedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/harmfuldata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: harmfuldataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tempdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tempdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/welllocadata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: welllocadataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/liquidgasdata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: liquidgasdataList,
+        message: '请求成功',
+        success: true
+      }
+    }
+  },
+  {
+    url: '/tubedata/listSimple',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: tubedataList,
+        message: '请求成功',
+        success: true
+      }
+    }
   }
 ]
diff --git a/src/api/device/deviceTypeDetail.js b/src/api/device/deviceTypeDetail.js
index b9e6d8d..54a233f 100644
--- a/src/api/device/deviceTypeDetail.js
+++ b/src/api/device/deviceTypeDetail.js
@@ -11,4 +11,76 @@
     params
   })
 }
+// 液位监测仪查询
+export function liquiddataList(params) {
+  return request({
+    url: 'liquiddata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能监测终端查询
+export function gasdataList(params) {
+  return request({
+    url: 'gasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 开挖监测仪查询
+export function digdataList(params) {
+  return request({
+    url: 'digdata/listSimplee',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function noisedataList(params) {
+  return request({
+    url: 'noisedata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 噪声记录仪查询
+export function harmfuldataList(params) {
+  return request({
+    url: 'harmfuldata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 温湿度监测仪查询
+export function tempdataList(params) {
+  return request({
+    url: 'tempdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 井盖定位监测仪查询
+export function welllocadataList(params) {
+  return request({
+    url: 'welllocadata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 燃气智能终端（一体化）查询
+export function liquidgasdataList(params) {
+  return request({
+    url: 'liquidgasdata/listSimple',
+    method: 'get',
+    params
+  })
+}
+// 管盯查询
+export function tubedataList(params) {
+  return request({
+    url: 'tubedata/listSimple',
+    method: 'get',
+    params
+  })
+}
 
diff --git a/src/views/alarmStatics/components/alarmHistoryByType.vue b/src/views/alarmStatics/components/alarmHistoryByType.vue
index dfc4f0b..7e137ea 100644
--- a/src/views/alarmStatics/components/alarmHistoryByType.vue
+++ b/src/views/alarmStatics/components/alarmHistoryByType.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -68,16 +68,16 @@
         </el-col>
       </el-col>
     </el-col>
-    <edit-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
+    <detail-alarm-statics ref="editDeviceAlarm" @watchChild="fetchDeviceTypeBar" />
   </el-row>
 </template>
 
 <script>
 import { getDeviceAlarmList } from '@/api/alarm/deviceStatics'
-import editAlarmStatics from './editAlarmStatics'
+import detailAlarmStatics from './detailAlarmStatics'
 export default {
   name: 'AlarmHistoryByType',
-  components: { editAlarmStatics },
+  components: { detailAlarmStatics },
   data() {
     return {
       height: 220,
diff --git a/src/views/alarmStatics/components/alarmStaticsByDept.vue b/src/views/alarmStatics/components/alarmStaticsByDept.vue
index d0ffb42..8279df6 100644
--- a/src/views/alarmStatics/components/alarmStaticsByDept.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByDept.vue
@@ -16,8 +16,8 @@
             size="small"
             :picker-options="pickerOptions"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/alarmStaticsByType.vue b/src/views/alarmStatics/components/alarmStaticsByType.vue
index c7f70e2..7e17365 100644
--- a/src/views/alarmStatics/components/alarmStaticsByType.vue
+++ b/src/views/alarmStatics/components/alarmStaticsByType.vue
@@ -42,8 +42,8 @@
             size="small"
             :picker-options="pickerOptions1"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeBar"
           />
         </el-col>
@@ -71,8 +71,8 @@
             size="small"
             :picker-options="pickerOptions2"
             value-format="yyyy-MM-dd HH:mm:ss"
-            start-placeholder="报警开始时间"
-            end-placeholder="报警结束时间"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
             @change="fetchDeviceTypeLine"
           />
         </el-col>
diff --git a/src/views/alarmStatics/components/detailAlarmStatics.vue b/src/views/alarmStatics/components/detailAlarmStatics.vue
new file mode 100644
index 0000000..9d3bb0d
--- /dev/null
+++ b/src/views/alarmStatics/components/detailAlarmStatics.vue
@@ -0,0 +1,339 @@
+<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: 'EetailAlarmStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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') {
+        console.log(row)
+        this.deviceForm = {
+          deptid: row.deptid,
+          wellType: row.wellType,
+          deviceType: row.deviceType,
+          lng: row.lng,
+          lat: row.lat,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/alarmStatics/components/editAlarmStatics.vue b/src/views/alarmStatics/components/editAlarmStatics.vue
deleted file mode 100644
index 0e828ca..0000000
--- a/src/views/alarmStatics/components/editAlarmStatics.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<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: 'EditAlarmStatics',
-  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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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') {
-        console.log(row)
-        this.deviceForm = {
-          deptid: row.deptid,
-          wellType: row.wellType,
-          deviceType: row.deviceType,
-          lng: row.lng,
-          lat: row.lat,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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/deviceManage/components/listDigData.vue b/src/views/deviceManage/components/listDigData.vue
index 5a2b795..a847696 100644
--- a/src/views/deviceManage/components/listDigData.vue
+++ b/src/views/deviceManage/components/listDigData.vue
@@ -1,19 +1,124 @@
 <template>
-  <div>开挖监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { digdataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListDigData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        },
+        {
+          text: '开挖状态',
+          value: 'status',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      digdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index ccbaa8b..997b047 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>燃气智能监测终端</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { gasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      gasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listHarmfulData.vue b/src/views/deviceManage/components/listHarmfulData.vue
index 687f9bc..73828ef 100644
--- a/src/views/deviceManage/components/listHarmfulData.vue
+++ b/src/views/deviceManage/components/listHarmfulData.vue
@@ -1,18 +1,156 @@
 <template>
-  <div>有害气体监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { harmfuldataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListHarmfulData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: 'CO浓度',
+          value: 'CO',
+          align: 'center'
+        },
+        {
+          text: 'CH4浓度',
+          value: 'CH4',
+          align: 'center'
+        },
+        {
+          text: 'H2S浓度',
+          value: 'H2S',
+          align: 'center'
+        },
+        {
+          text: 'O2浓度',
+          value: 'O2',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'CO': '一氧化碳浓度',
+          'CH4': '甲烷浓度',
+          'H2S': '硫化氢浓度',
+          'O2': '氧气浓度'
+        },
+        metrics: ['CO', 'CH4', 'H2S', 'O2'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'CO', 'CH4', 'H2S', 'O2'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      harmfuldataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidData.vue b/src/views/deviceManage/components/listLiquidData.vue
index f279ee9..308f1db 100644
--- a/src/views/deviceManage/components/listLiquidData.vue
+++ b/src/views/deviceManage/components/listLiquidData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>液位监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquiddataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '液位值',
+          value: 'liquiddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'liquiddata': '液位值'
+        },
+        metrics: ['liquiddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'liquiddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquiddataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listLiquidGasData.vue b/src/views/deviceManage/components/listLiquidGasData.vue
index 6f5535e..c7d5adb 100644
--- a/src/views/deviceManage/components/listLiquidGasData.vue
+++ b/src/views/deviceManage/components/listLiquidGasData.vue
@@ -1,18 +1,215 @@
 <template>
-  <div>燃气智能终端（一体化）</div>
+  <el-row :gutter="10">
+    <el-col>
+      <search-area
+        type=""
+        size="small"
+      >
+        <!--一般查询条件-->
+        <search-item>
+          <el-date-picker
+            v-model="timeRange"
+            type="datetimerange"
+            range-separator="至"
+            size="small"
+            :picker-options="pickerOptions"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="fetchDeviceType"
+          />
+        </search-item>
+        <search-item>
+          <el-select
+            v-model="listQuery.watchContent"
+            placeholder="监控指标"
+            size="small"
+            @change="watchContentChange"
+          >
+            <el-option
+              v-for="item in watchContentList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </search-item>
+      </search-area>
+    </el-col>
+    <el-col>
+      <el-col :span="12">
+        <ve-line
+          :data="chartData"
+          :settings="chartSettings"
+        />
+      </el-col>
+      <el-col :span="12">
+        <el-table
+          v-loading="listLoading"
+          class="tableStyle"
+          :data="list"
+          border
+        >
+          <el-table-column
+            v-for="column in columns"
+            :key="column.value"
+            :label="column.text"
+            :width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              <span>{{ scope.row[column.value] }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { liquidgasdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListLiquidGasData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: '',
+        watchContent: '0'
+      },
+      watchContentList: [
+        {
+          label: '液位',
+          value: '0'
+        },
+        {
+          label: '燃气',
+          value: '1'
+        }
+      ],
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [],
+      list: [],
+      listLoading: false,
+      chartSettings: {},
+      chartData: {}
     }
   },
+  created() {
+    this.watchContentChange()
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      liquidgasdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
+    },
+    watchContentChange(val) {
+      console.log(val, '=====')
+      if (val === '0' || val === undefined) {
+        this.chartSettings = {
+          labelMap: {
+            'liquiddata': '液位值'
+          },
+          metrics: ['liquiddata'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'liquiddata'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'liquiddata',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      } else if (val === '1') {
+        this.chartSettings = {
+          labelMap: {
+            'strength': '燃气浓度'
+          },
+          metrics: ['strength'],
+          dimension: ['uptime']
+        }
+        this.chartData = {
+          columns: ['uptime', 'strength'],
+          rows: []
+        }
+        this.columns = [
+          {
+            text: '液位值',
+            value: 'strength',
+            align: 'center'
+          },
+          {
+            text: '上报时间',
+            value: 'uptime',
+            align: 'center'
+          }
+        ]
+      }
+      this.fetchDeviceType()
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+.tableStyle {
+  margin-top: 60px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listNoiseData.vue b/src/views/deviceManage/components/listNoiseData.vue
index 7dad007..053cfcc 100644
--- a/src/views/deviceManage/components/listNoiseData.vue
+++ b/src/views/deviceManage/components/listNoiseData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>噪声记录仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { noisedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListNoiseData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '噪声值',
+          value: 'ddata',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'ddata': '噪声值'
+        },
+        metrics: ['ddata'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'ddata'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      noisedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTempData.vue b/src/views/deviceManage/components/listTempData.vue
index f7548b5..0c26fd2 100644
--- a/src/views/deviceManage/components/listTempData.vue
+++ b/src/views/deviceManage/components/listTempData.vue
@@ -1,18 +1,144 @@
 <template>
-  <div>温湿度监测仪</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tempdataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTempData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '温度',
+          value: 'temperature',
+          align: 'center'
+        },
+        {
+          text: '湿度',
+          value: 'humidity',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'temperature': '温度',
+          'humidity': '湿度'
+        },
+        metrics: ['temperature', 'humidity'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'temperature', 'humidity'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tempdataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listTubeData.vue b/src/views/deviceManage/components/listTubeData.vue
index 94f1772..6ca8607 100644
--- a/src/views/deviceManage/components/listTubeData.vue
+++ b/src/views/deviceManage/components/listTubeData.vue
@@ -1,18 +1,138 @@
 <template>
-  <div>管盯</div>
+  <el-row :gutter="10">
+    <el-col>
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </el-col>
+    <el-col :span="12">
+      <ve-line
+        :data="chartData"
+        :settings="chartSettings"
+      />
+    </el-col>
+    <el-col :span="12">
+      <normal-table
+        ref="normalTable"
+        :height="null"
+        :data="list"
+        :query="listQuery"
+        :columns="columns"
+        :list-loading="listLoading"
+        :options="options"
+        size="small"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { tubedataList } from '@/api/device/deviceTypeDetail'
 export default {
+  name: 'ListTubeData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '燃气浓度',
+          value: 'strength',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false,
+      chartSettings: {
+        labelMap: {
+          'strength': '燃气浓度'
+        },
+        metrics: ['strength'],
+        dimension: ['uptime']
+      },
+      chartData: {
+        columns: ['uptime', 'strength'],
+        rows: []
+      }
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      tubedataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.chartData.rows = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
diff --git a/src/views/deviceManage/components/listWellData.vue b/src/views/deviceManage/components/listWellData.vue
index 87639ed..3ef8436 100644
--- a/src/views/deviceManage/components/listWellData.vue
+++ b/src/views/deviceManage/components/listWellData.vue
@@ -17,8 +17,8 @@
         size="small"
         :picker-options="pickerOptions"
         value-format="yyyy-MM-dd HH:mm:ss"
-        start-placeholder="报警开始时间"
-        end-placeholder="报警结束时间"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
         @change="fetchDeviceType"
       />
     </template>
@@ -93,7 +93,7 @@
   },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
     },
     fetchDeviceType(val) {
       this.listLoading = true
diff --git a/src/views/deviceManage/components/listWellLocaData.vue b/src/views/deviceManage/components/listWellLocaData.vue
index f784671..30f24dc 100644
--- a/src/views/deviceManage/components/listWellLocaData.vue
+++ b/src/views/deviceManage/components/listWellLocaData.vue
@@ -1,18 +1,124 @@
 <template>
-  <div>井盖定位监测仪</div>
+  <normal-table
+    ref="normalTable"
+    :height="null"
+    :data="list"
+    :query="listQuery"
+    :columns="columns"
+    :list-loading="listLoading"
+    :options="options"
+    size="small"
+  >
+    <template slot="btns">
+      <el-date-picker
+        v-model="timeRange"
+        type="datetimerange"
+        range-separator="至"
+        size="small"
+        :picker-options="pickerOptions"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="fetchDeviceType"
+      />
+    </template>
+  </normal-table>
 </template>
 
 <script>
+import { welllocadataList } from '@/api/device/deviceTypeDetail'
+
 export default {
+  name: 'ListWellLocaData',
   data() {
     return {
-
+      timeRange: '',
+      listQuery: {
+        devcode: '',
+        beginTime: '',
+        endTime: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      // 是否需要序号列
+      options: {
+        needIndex: false
+      },
+      columns: [
+        {
+          text: '纬度',
+          value: 'lat',
+          align: 'center'
+        },
+        {
+          text: '经度',
+          value: 'lng',
+          align: 'center'
+        },
+        {
+          text: '上报时间',
+          value: 'uptime',
+          align: 'center'
+        }
+      ], // 显示列
+      list: [],
+      listLoading: false
     }
   },
+  created() {
+    this.fetchDeviceType()
+  },
+  mounted() {
+    this.$refs.normalTable.initColumnsState(false)
+  },
   methods: {
     initData: function(row = null) {
-      console.log(row, '===')
+      this.listQuery.devcode = row.devcode
+    },
+    fetchDeviceType(val) {
+      this.listLoading = true
+      if (val !== undefined) {
+        this.listQuery.startTime = val[0]
+        this.listQuery.endTime = val[1]
+      }
+      welllocadataList(this.listQuery).then(response => {
+        this.list = response.data
+        this.listLoading = false
+      })
     }
   }
 }
 </script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.el-date-editor--datetimerange.el-input,
+.el-date-editor--datetimerange.el-input__inner{
+  width: 340px;
+}
+</style>
+
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index 8285ee7..f6c3f24 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+  <el-dialog width="70%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="deviceForm" label-well-code="right" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="12">
diff --git a/src/views/deviceStatics/components/detailDeviceStatics.vue b/src/views/deviceStatics/components/detailDeviceStatics.vue
new file mode 100644
index 0000000..1017925
--- /dev/null
+++ b/src/views/deviceStatics/components/detailDeviceStatics.vue
@@ -0,0 +1,338 @@
+<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: 'DetailDeviceStatics',
+  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: '',
+        coordinateX: '',
+        coordinateY: '',
+        latBaidu: '',
+        lngBaidu: '',
+        latGaode: '',
+        lngGaode: '',
+        lastTime: '',
+        offlineDays: ''
+      }
+    },
+    // 父子组件通信
+    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,
+          coordinateX: row.coordinateX,
+          coordinateY: row.coordinateY,
+          latBaidu: row.latBaidu,
+          lngBaidu: row.lngBaidu,
+          latGaode: row.latGaode,
+          lngGaode: row.lngGaode,
+          lastTime: row.lastTime,
+          offlineDays: row.offlineDays
+        }
+      }
+    },
+    // 保存数据
+    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/editDeviceStatics.vue b/src/views/deviceStatics/components/editDeviceStatics.vue
deleted file mode 100644
index 5ce4ebc..0000000
--- a/src/views/deviceStatics/components/editDeviceStatics.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<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: '',
-        coordinateX: '',
-        coordinateY: '',
-        latBaidu: '',
-        lngBaidu: '',
-        latGaode: '',
-        lngGaode: '',
-        lastTime: '',
-        offlineDays: ''
-      }
-    },
-    // 父子组件通信
-    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,
-          coordinateX: row.coordinateX,
-          coordinateY: row.coordinateY,
-          latBaidu: row.latBaidu,
-          lngBaidu: row.lngBaidu,
-          latGaode: row.latGaode,
-          lngGaode: row.lngGaode,
-          lastTime: row.lastTime,
-          offlineDays: row.offlineDays
-        }
-      }
-    },
-    // 保存数据
-    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
index dd748fc..e305b9a 100644
--- a/src/views/deviceStatics/components/listdeviceOffline.vue
+++ b/src/views/deviceStatics/components/listdeviceOffline.vue
@@ -72,7 +72,7 @@
         </el-col>
       </el-card>
     </el-col>
-    <edit-device-statics ref="editDevice" @watchChild="fetchData" />
+    <detail-device-statics ref="editDevice" @watchChild="fetchData" />
   </el-row>
 </template>
 
@@ -80,10 +80,10 @@
 import { getDeviceType } from '@/api/device/device'
 import { offlineList } from '@/api/data/dataStatics'
 import { batchExportNoiseData } from '@/api/data/data'
-import editDeviceStatics from './editDeviceStatics'
+import detailDeviceStatics from './detailDeviceStatics'
 export default {
   name: 'ListdeviceOffline',
-  components: { editDeviceStatics },
+  components: { detailDeviceStatics },
   data() {
     return {
       height: 300,