diff --git a/src/components/BigData/TimeButtons.vue b/src/components/BigData/TimeButtons.vue
index 1b5e4bd..3b99c37 100644
--- a/src/components/BigData/TimeButtons.vue
+++ b/src/components/BigData/TimeButtons.vue
@@ -24,7 +24,7 @@
         return ['3month', 'month', 'week']
       }
     }, // 支持的按钮
-    checked: {
+    defaultChecked: {
       type: String,
       default: 'week'
     } // 默认选中
@@ -32,6 +32,7 @@
   data() {
     return {
       timeRange: [], // 时间范围
+      checked: '',
       buttonDict: [
         { label: '近1年', value: 'year' },
         { label: '近6月', value: 'halfyear' },
@@ -46,8 +47,16 @@
       return this.buttonDict.filter(item => this.buttons.indexOf(item.value) > -1)
     }
   },
+  created() {
+    this.checked = this.defaultChecked
+  },
+  mounted() {
+    this.initTime()
+  },
   methods: {
+    // 时间发生切换
     changeTime(type) {
+      this.checked = type
       let timeRange = []
       switch (type) {
         case 'year':
@@ -68,6 +77,10 @@
       }
       console.log(timeRange)
       this.$emit('change', timeRange)
+    },
+    // 强制触发
+    initTime() {
+      this.changeTime(this.defaultChecked)
     }
   }
 }

diff --git a/src/components/BigData/TimeButtons.vue b/src/components/BigData/TimeButtons.vue
index 1b5e4bd..3b99c37 100644
--- a/src/components/BigData/TimeButtons.vue
+++ b/src/components/BigData/TimeButtons.vue
@@ -24,7 +24,7 @@
         return ['3month', 'month', 'week']
       }
     }, // 支持的按钮
-    checked: {
+    defaultChecked: {
       type: String,
       default: 'week'
     } // 默认选中
@@ -32,6 +32,7 @@
   data() {
     return {
       timeRange: [], // 时间范围
+      checked: '',
       buttonDict: [
         { label: '近1年', value: 'year' },
         { label: '近6月', value: 'halfyear' },
@@ -46,8 +47,16 @@
       return this.buttonDict.filter(item => this.buttons.indexOf(item.value) > -1)
     }
   },
+  created() {
+    this.checked = this.defaultChecked
+  },
+  mounted() {
+    this.initTime()
+  },
   methods: {
+    // 时间发生切换
     changeTime(type) {
+      this.checked = type
       let timeRange = []
       switch (type) {
         case 'year':
@@ -68,6 +77,10 @@
       }
       console.log(timeRange)
       this.$emit('change', timeRange)
+    },
+    // 强制触发
+    initTime() {
+      this.changeTime(this.defaultChecked)
     }
   }
 }
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index 6e2afc3..fc9a60e 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,102 +1,94 @@
 <template>
-  <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"
-        :data="list"
-        :query="listQuery"
-        :columns="columns"
-        :list-loading="listLoading"
-        :options="options"
-        size="small"
-      />
-    </el-col>
-  </el-row>
+  <div class="dialog-data-container">
+    <!--标题及查询条件-->
+    <div class="title-header">
+      <div class="title-left">
+        <i class="el-icon-menu" />设备数据情况
+      </div>
+      <div class="title-right">
+        <time-buttons @change="changeTime" />
+        <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="fetchData"
+        />
+      </div>
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="14">
+        <ve-line v-loading="listLoading" :data="chartData" :settings="chartSettings" />
+      </el-col>
+      <el-col :span="10">
+        <normal-table
+          ref="normalTable"
+          :head="headConfig"
+          :data="list"
+          :height="350"
+          :query="listQuery"
+          :columns="columns"
+          :pagination="false"
+          :list-loading="listLoading"
+          :options="options"
+          size="small"
+        />
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-import { gasdataList } from '@/api/device/deviceTypeDetail'
+import { getGasDataSingle } from '@/api/data/data'
+import TimeButtons from '@/components/BigData/TimeButtons'
 export default {
   name: 'ListGasData',
+  components: { TimeButtons },
+  props: {
+    devcode: {
+      type: String,
+      require: true
+    } // 设备编号
+  },
   data() {
     return {
-      timeRange: '',
+      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'
-        }
+        { text: '上报时间', value: 'uptime', align: 'center' },
+        { text: '燃气浓度(%LEL)', value: 'strength', align: 'center' }
       ], // 显示列
-      list: [],
+      list: [], // 里诶博爱数据
       listLoading: false,
+      pickerOptions: {
+        disabledDate(time) { // 限制只能选100天内的时间
+          const curDate = (new Date()).getTime()
+          const three = 100 * 24 * 3600 * 1000
+          const threeMonths = curDate - three
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+        }
+      },
+      headConfig: {
+        show: false
+      }, // 表格头配置
       chartSettings: {
         labelMap: {
           'strength': '燃气浓度'
         },
         metrics: ['strength'],
         dimension: ['uptime']
-      },
+      }, // 折线图配置
       chartData: {
         columns: ['uptime', 'strength'],
         rows: []
@@ -104,34 +96,57 @@
     }
   },
   created() {
-    this.fetchDeviceType()
   },
   mounted() {
-    this.$refs.normalTable.initColumnsState(false)
   },
   methods: {
-    initData: function(row = null) {
-      this.listQuery.devcode = row.devcode
+    // 切换时间的时候
+    changeTime(timeRange) {
+      console.log('changeTime')
+      this.timeRange = timeRange
+      this.fetchData()
     },
-    fetchDeviceType(val) {
+    // 获取设备数据
+    fetchData() {
       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.listQuery.devcode = this.devcode
+      this.handleDateTime()
+      getGasDataSingle(this.listQuery).then(response => {
+        const data = response.data.sort((a, b) => a.uptime < b.uptime ? -1 : 1)
+        this.list = data
+        this.chartData.rows = data
         this.listLoading = false
-      })
+      }).catch(_ => this.listLoading = false)
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
+.dialog-data-container{
+  padding: 15px 0px;
+  .title-header {
+    display: flex;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-top: solid 2px #F3F3F3;
+    color: #606266;
+    .title-left{
+      //padding: 10px;
+      line-height: 30px;
+    }
+  }
 }
 </style>

diff --git a/src/components/BigData/TimeButtons.vue b/src/components/BigData/TimeButtons.vue
index 1b5e4bd..3b99c37 100644
--- a/src/components/BigData/TimeButtons.vue
+++ b/src/components/BigData/TimeButtons.vue
@@ -24,7 +24,7 @@
         return ['3month', 'month', 'week']
       }
     }, // 支持的按钮
-    checked: {
+    defaultChecked: {
       type: String,
       default: 'week'
     } // 默认选中
@@ -32,6 +32,7 @@
   data() {
     return {
       timeRange: [], // 时间范围
+      checked: '',
       buttonDict: [
         { label: '近1年', value: 'year' },
         { label: '近6月', value: 'halfyear' },
@@ -46,8 +47,16 @@
       return this.buttonDict.filter(item => this.buttons.indexOf(item.value) > -1)
     }
   },
+  created() {
+    this.checked = this.defaultChecked
+  },
+  mounted() {
+    this.initTime()
+  },
   methods: {
+    // 时间发生切换
     changeTime(type) {
+      this.checked = type
       let timeRange = []
       switch (type) {
         case 'year':
@@ -68,6 +77,10 @@
       }
       console.log(timeRange)
       this.$emit('change', timeRange)
+    },
+    // 强制触发
+    initTime() {
+      this.changeTime(this.defaultChecked)
     }
   }
 }
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index 6e2afc3..fc9a60e 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,102 +1,94 @@
 <template>
-  <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"
-        :data="list"
-        :query="listQuery"
-        :columns="columns"
-        :list-loading="listLoading"
-        :options="options"
-        size="small"
-      />
-    </el-col>
-  </el-row>
+  <div class="dialog-data-container">
+    <!--标题及查询条件-->
+    <div class="title-header">
+      <div class="title-left">
+        <i class="el-icon-menu" />设备数据情况
+      </div>
+      <div class="title-right">
+        <time-buttons @change="changeTime" />
+        <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="fetchData"
+        />
+      </div>
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="14">
+        <ve-line v-loading="listLoading" :data="chartData" :settings="chartSettings" />
+      </el-col>
+      <el-col :span="10">
+        <normal-table
+          ref="normalTable"
+          :head="headConfig"
+          :data="list"
+          :height="350"
+          :query="listQuery"
+          :columns="columns"
+          :pagination="false"
+          :list-loading="listLoading"
+          :options="options"
+          size="small"
+        />
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-import { gasdataList } from '@/api/device/deviceTypeDetail'
+import { getGasDataSingle } from '@/api/data/data'
+import TimeButtons from '@/components/BigData/TimeButtons'
 export default {
   name: 'ListGasData',
+  components: { TimeButtons },
+  props: {
+    devcode: {
+      type: String,
+      require: true
+    } // 设备编号
+  },
   data() {
     return {
-      timeRange: '',
+      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'
-        }
+        { text: '上报时间', value: 'uptime', align: 'center' },
+        { text: '燃气浓度(%LEL)', value: 'strength', align: 'center' }
       ], // 显示列
-      list: [],
+      list: [], // 里诶博爱数据
       listLoading: false,
+      pickerOptions: {
+        disabledDate(time) { // 限制只能选100天内的时间
+          const curDate = (new Date()).getTime()
+          const three = 100 * 24 * 3600 * 1000
+          const threeMonths = curDate - three
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+        }
+      },
+      headConfig: {
+        show: false
+      }, // 表格头配置
       chartSettings: {
         labelMap: {
           'strength': '燃气浓度'
         },
         metrics: ['strength'],
         dimension: ['uptime']
-      },
+      }, // 折线图配置
       chartData: {
         columns: ['uptime', 'strength'],
         rows: []
@@ -104,34 +96,57 @@
     }
   },
   created() {
-    this.fetchDeviceType()
   },
   mounted() {
-    this.$refs.normalTable.initColumnsState(false)
   },
   methods: {
-    initData: function(row = null) {
-      this.listQuery.devcode = row.devcode
+    // 切换时间的时候
+    changeTime(timeRange) {
+      console.log('changeTime')
+      this.timeRange = timeRange
+      this.fetchData()
     },
-    fetchDeviceType(val) {
+    // 获取设备数据
+    fetchData() {
       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.listQuery.devcode = this.devcode
+      this.handleDateTime()
+      getGasDataSingle(this.listQuery).then(response => {
+        const data = response.data.sort((a, b) => a.uptime < b.uptime ? -1 : 1)
+        this.list = data
+        this.chartData.rows = data
         this.listLoading = false
-      })
+      }).catch(_ => this.listLoading = false)
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
+.dialog-data-container{
+  padding: 15px 0px;
+  .title-header {
+    display: flex;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-top: solid 2px #F3F3F3;
+    color: #606266;
+    .title-left{
+      //padding: 10px;
+      line-height: 30px;
+    }
+  }
 }
 </style>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index 2caa551..ee21894 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -1,75 +1,45 @@
 <template>
-  <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">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="点位编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <component :is="cmpName" v-if="showData" ref="deviceTypeDialog" />
+  <el-dialog width="70%" title="设备详情" :visible.sync="dialogFormVisible" top="10vh" append-to-body>
+    <el-descriptions class="margin-top" title="" :column="2" border>
+      <el-descriptions-item label="设备名称">
+        {{ deviceForm.deviceName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备编号">
+        {{ deviceForm.devcode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备类型">
+        {{ deviceForm.deviceTypeName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备型号">
+        {{ deviceForm.modelName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="安装日期">
+        {{ deviceForm.installDate }}
+      </el-descriptions-item>
+      <el-descriptions-item label="在线状态">
+        <span :style="{color:deviceForm.onlineState=='0'?'#909399':'#67C23A'}">{{ deviceForm.onlineStateName }}
+        </span>
+      </el-descriptions-item>
+      <el-descriptions-item label="安装高度">
+        {{ deviceForm.installHeight?deviceForm.installHeight+' m':'--' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="点位编号">
+        {{ deviceForm.wellCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="权属单位">
+        {{ deviceForm.deptName }}
+      </el-descriptions-item>
+      <!--      <el-descriptions-item label="布防状态">-->
+      <!--        {{ deviceForm.bfztName }}-->
+      <!--      </el-descriptions-item>-->
+      <el-descriptions-item label="关联集中器编号">
+        {{ deviceForm.concenCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="位置" :span="2">
+        {{ deviceForm.position }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <component :is="cmpName" v-if="showData" ref="deviceTypeDialog" :devcode="deviceForm.devcode" />
   </el-dialog>
 </template>
 
@@ -103,7 +73,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
-      showData: false, // 是否显示近期数据
+      showData: true, // 是否显示近期数据
       cmpName: '', // 组件名称
       deviceForm: {
         id: '',
@@ -116,11 +86,6 @@
         concenCode: '',
         installHeight: ''
       }, // 表单
-      textMap: {
-        update: '编辑',
-        create: '新增',
-        detail: '详情'
-      }, // 表头显示标题
       compDict: {
         '1': 'list-wellcover-data',
         '2': 'list-liquid-data',

diff --git a/src/components/BigData/TimeButtons.vue b/src/components/BigData/TimeButtons.vue
index 1b5e4bd..3b99c37 100644
--- a/src/components/BigData/TimeButtons.vue
+++ b/src/components/BigData/TimeButtons.vue
@@ -24,7 +24,7 @@
         return ['3month', 'month', 'week']
       }
     }, // 支持的按钮
-    checked: {
+    defaultChecked: {
       type: String,
       default: 'week'
     } // 默认选中
@@ -32,6 +32,7 @@
   data() {
     return {
       timeRange: [], // 时间范围
+      checked: '',
       buttonDict: [
         { label: '近1年', value: 'year' },
         { label: '近6月', value: 'halfyear' },
@@ -46,8 +47,16 @@
       return this.buttonDict.filter(item => this.buttons.indexOf(item.value) > -1)
     }
   },
+  created() {
+    this.checked = this.defaultChecked
+  },
+  mounted() {
+    this.initTime()
+  },
   methods: {
+    // 时间发生切换
     changeTime(type) {
+      this.checked = type
       let timeRange = []
       switch (type) {
         case 'year':
@@ -68,6 +77,10 @@
       }
       console.log(timeRange)
       this.$emit('change', timeRange)
+    },
+    // 强制触发
+    initTime() {
+      this.changeTime(this.defaultChecked)
     }
   }
 }
diff --git a/src/views/deviceManage/components/listGasData.vue b/src/views/deviceManage/components/listGasData.vue
index 6e2afc3..fc9a60e 100644
--- a/src/views/deviceManage/components/listGasData.vue
+++ b/src/views/deviceManage/components/listGasData.vue
@@ -1,102 +1,94 @@
 <template>
-  <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"
-        :data="list"
-        :query="listQuery"
-        :columns="columns"
-        :list-loading="listLoading"
-        :options="options"
-        size="small"
-      />
-    </el-col>
-  </el-row>
+  <div class="dialog-data-container">
+    <!--标题及查询条件-->
+    <div class="title-header">
+      <div class="title-left">
+        <i class="el-icon-menu" />设备数据情况
+      </div>
+      <div class="title-right">
+        <time-buttons @change="changeTime" />
+        <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="fetchData"
+        />
+      </div>
+    </div>
+    <el-row :gutter="10">
+      <el-col :span="14">
+        <ve-line v-loading="listLoading" :data="chartData" :settings="chartSettings" />
+      </el-col>
+      <el-col :span="10">
+        <normal-table
+          ref="normalTable"
+          :head="headConfig"
+          :data="list"
+          :height="350"
+          :query="listQuery"
+          :columns="columns"
+          :pagination="false"
+          :list-loading="listLoading"
+          :options="options"
+          size="small"
+        />
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-import { gasdataList } from '@/api/device/deviceTypeDetail'
+import { getGasDataSingle } from '@/api/data/data'
+import TimeButtons from '@/components/BigData/TimeButtons'
 export default {
   name: 'ListGasData',
+  components: { TimeButtons },
+  props: {
+    devcode: {
+      type: String,
+      require: true
+    } // 设备编号
+  },
   data() {
     return {
-      timeRange: '',
+      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'
-        }
+        { text: '上报时间', value: 'uptime', align: 'center' },
+        { text: '燃气浓度(%LEL)', value: 'strength', align: 'center' }
       ], // 显示列
-      list: [],
+      list: [], // 里诶博爱数据
       listLoading: false,
+      pickerOptions: {
+        disabledDate(time) { // 限制只能选100天内的时间
+          const curDate = (new Date()).getTime()
+          const three = 100 * 24 * 3600 * 1000
+          const threeMonths = curDate - three
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+        }
+      },
+      headConfig: {
+        show: false
+      }, // 表格头配置
       chartSettings: {
         labelMap: {
           'strength': '燃气浓度'
         },
         metrics: ['strength'],
         dimension: ['uptime']
-      },
+      }, // 折线图配置
       chartData: {
         columns: ['uptime', 'strength'],
         rows: []
@@ -104,34 +96,57 @@
     }
   },
   created() {
-    this.fetchDeviceType()
   },
   mounted() {
-    this.$refs.normalTable.initColumnsState(false)
   },
   methods: {
-    initData: function(row = null) {
-      this.listQuery.devcode = row.devcode
+    // 切换时间的时候
+    changeTime(timeRange) {
+      console.log('changeTime')
+      this.timeRange = timeRange
+      this.fetchData()
     },
-    fetchDeviceType(val) {
+    // 获取设备数据
+    fetchData() {
       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.listQuery.devcode = this.devcode
+      this.handleDateTime()
+      getGasDataSingle(this.listQuery).then(response => {
+        const data = response.data.sort((a, b) => a.uptime < b.uptime ? -1 : 1)
+        this.list = data
+        this.chartData.rows = data
         this.listLoading = false
-      })
+      }).catch(_ => this.listLoading = false)
+    },
+    // 处理时间
+    handleDateTime() {
+      if (this.timeRange && this.timeRange.length > 0) {
+        this.listQuery.beginTime = this.timeRange[0]
+        this.listQuery.endTime = this.timeRange[1]
+      } else {
+        this.listQuery.beginTime = ''
+        this.listQuery.endTime = ''
+      }
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.el-date-editor--datetimerange.el-input,
-.el-date-editor--datetimerange.el-input__inner{
-  width: 340px;
+.dialog-data-container{
+  padding: 15px 0px;
+  .title-header {
+    display: flex;
+    justify-content: space-between;
+    height: 50px;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-top: solid 2px #F3F3F3;
+    color: #606266;
+    .title-left{
+      //padding: 10px;
+      line-height: 30px;
+    }
+  }
 }
 </style>
diff --git a/src/views/deviceManage/detailDevice.vue b/src/views/deviceManage/detailDevice.vue
index 2caa551..ee21894 100644
--- a/src/views/deviceManage/detailDevice.vue
+++ b/src/views/deviceManage/detailDevice.vue
@@ -1,75 +1,45 @@
 <template>
-  <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">
-          <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="deviceForm.deviceName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="设备编号" prop="devcode">
-            <el-input v-model="deviceForm.devcode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备类型" prop="deviceType">
-            <el-input v-model="deviceForm.deviceTypeName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="设备型号" prop="modelId">
-            <el-input v-model="deviceForm.modelName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态" prop="wellCode">
-            <el-input v-model="deviceForm.onlineStateName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="权属单位" prop="concenCode">
-            <el-input v-model="deviceForm.deptName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="点位编号" prop="wellCode">
-            <el-input v-model="deviceForm.wellCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="布防状态" prop="bfztName">
-            <el-input v-model="deviceForm.bfztName" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="24">
-          <el-form-item label="位置" prop="position">
-            <el-input v-model="deviceForm.position" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="安装日期" prop="installDate">
-            <el-input v-model="deviceForm.installDate" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="集中器编号" prop="concenCode">
-            <el-input v-model="deviceForm.concenCode" type="text" placeholder="未知" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <component :is="cmpName" v-if="showData" ref="deviceTypeDialog" />
+  <el-dialog width="70%" title="设备详情" :visible.sync="dialogFormVisible" top="10vh" append-to-body>
+    <el-descriptions class="margin-top" title="" :column="2" border>
+      <el-descriptions-item label="设备名称">
+        {{ deviceForm.deviceName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备编号">
+        {{ deviceForm.devcode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备类型">
+        {{ deviceForm.deviceTypeName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="设备型号">
+        {{ deviceForm.modelName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="安装日期">
+        {{ deviceForm.installDate }}
+      </el-descriptions-item>
+      <el-descriptions-item label="在线状态">
+        <span :style="{color:deviceForm.onlineState=='0'?'#909399':'#67C23A'}">{{ deviceForm.onlineStateName }}
+        </span>
+      </el-descriptions-item>
+      <el-descriptions-item label="安装高度">
+        {{ deviceForm.installHeight?deviceForm.installHeight+' m':'--' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="点位编号">
+        {{ deviceForm.wellCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="权属单位">
+        {{ deviceForm.deptName }}
+      </el-descriptions-item>
+      <!--      <el-descriptions-item label="布防状态">-->
+      <!--        {{ deviceForm.bfztName }}-->
+      <!--      </el-descriptions-item>-->
+      <el-descriptions-item label="关联集中器编号">
+        {{ deviceForm.concenCode }}
+      </el-descriptions-item>
+      <el-descriptions-item label="位置" :span="2">
+        {{ deviceForm.position }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <component :is="cmpName" v-if="showData" ref="deviceTypeDialog" :devcode="deviceForm.devcode" />
   </el-dialog>
 </template>
 
@@ -103,7 +73,7 @@
     return {
       dialogFormVisible: false, // 对话框是否显示
       dialogStatus: '', // 对话框类型：create,update,detail
-      showData: false, // 是否显示近期数据
+      showData: true, // 是否显示近期数据
       cmpName: '', // 组件名称
       deviceForm: {
         id: '',
@@ -116,11 +86,6 @@
         concenCode: '',
         installHeight: ''
       }, // 表单
-      textMap: {
-        update: '编辑',
-        create: '新增',
-        detail: '详情'
-      }, // 表头显示标题
       compDict: {
         '1': 'list-wellcover-data',
         '2': 'list-liquid-data',
diff --git a/src/views/wellManage/detailWell.vue b/src/views/wellManage/detailWell.vue
index 6db57b1..82c3334 100644
--- a/src/views/wellManage/detailWell.vue
+++ b/src/views/wellManage/detailWell.vue
@@ -126,7 +126,6 @@
   },
   computed: {
     areaName() {
-      debugger
       if (this.wellForm.quName) {
         return this.wellForm.quName + this.wellForm.areaName
       } else {