diff --git a/src/assets/styles/archives-manage.scss b/src/assets/styles/archives-manage.scss
index 932d032..9721090 100644
--- a/src/assets/styles/archives-manage.scss
+++ b/src/assets/styles/archives-manage.scss
@@ -1001,3 +1001,32 @@
   font-weight: bold;
   font-size: 12px;
 }
+
+
+.spk-a {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color:#2FD490;
+  box-shadow: 0px 3px 4px 0px rgba(17,243,189,0.35);
+  vertical-align: middle;
+}
+.off-line {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #ED4A41;
+  box-shadow: 0px 3px 4px 0px rgba(252,122,122,0.35);
+  vertical-align: middle;
+}
+
+.device-child-btn{
+  width: auto !important;
+  padding: 0 14px !important;
+  line-height: 28px !important;
+  font-weight: bold !important;
+  color: #0348F3 !important;
+  border-color: #0348F3 !important;
+}
\ No newline at end of file
diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js
index ab6b39c..ab01bcd 100644
--- a/src/components/Crud/crud.js
+++ b/src/components/Crud/crud.js
@@ -186,6 +186,8 @@ function CRUD(options) {
         return
       }
       crud.status.edit = CRUD.STATUS.PREPARED
+      console.log(crud.getDataId(data))
+      console.log(crud.getDataStatus(crud.getDataId(data)))
       crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED
       callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form)
       callVmHook(crud, CRUD.HOOK.afterToCU, crud.form)
diff --git a/src/views/archiveKeeping/deviceManage/module/autoChildDevice.vue b/src/views/archiveKeeping/deviceManage/module/autoChildDevice.vue
new file mode 100644
index 0000000..db5ee22
--- /dev/null
+++ b/src/views/archiveKeeping/deviceManage/module/autoChildDevice.vue
@@ -0,0 +1,107 @@
+<template>
+  <!--表单组件-->
+  <el-dialog class="childDeviceDialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="autoDeviceVisible" title="自动获取子设备-环境控制主机">
+    <div class="setting-dialog">
+      <div class="childDevice-header">
+        <div class="childDevice-info">
+          <p>当前设备：<span>计通 - 环境控制111 - HK001</span></p>
+          <p>IPv4地址：<span>192.168.1.111</span></p>
+          <p>端口：<span>5000</span></p>
+        </div>
+      </div>
+      <el-table
+        ref="table"
+        :data="childDeviceTable"
+        row-key="id"
+        highlight-current-row
+        style="min-width: 100%;"
+        @selection-change="selectionChangeHandler"
+        @row-click="clickRowHandler"
+      >
+        <el-table-column type="selection" align="center" width="55" />
+        <el-table-column label="序号" type="index" width="55" />
+        <el-table-column label="设备编号" prop="num" min-width="140" />
+        <el-table-column label="设备名称" prop="deviceName" min-width="140" />
+        <el-table-column label="分类名称" prop="deviceTypeId.name" min-width="100" />
+        <el-table-column label="区域名称" prop="deviceTypeId.name" min-width="100" />
+      </el-table>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <div class="selectionNum">已选中<span>{{ selections.length }}</span>个</div>
+      <el-button type="text" @click="handleCloseDialog">关闭</el-button>
+      <el-button type="primary" @click="autoDeviceVisible=false">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  components: { },
+  data() {
+    return {
+      childDeviceTable: [],
+      selections: [],
+      autoDeviceVisible: false
+    }
+  },
+  watch: {},
+  created() {
+    this.childDeviceTable = [{}, {}, {}]
+  },
+  methods: {
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    handleCloseDialog(done) {
+      this.autoDeviceVisible = false
+      // 关闭弹框
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.childDeviceDialog{
+  ::v-deep .el-dialog {
+    width: 860px;
+    .el-dialog__body{
+      padding: 6px 0 30px 0 !important;
+    }
+  }
+}
+.childDevice-info{
+  display: flex;
+  justify-content: flex-end;
+  padding: 9px 12px 11px 12px;
+  margin-bottom: 24px;
+  background: rgba(151,199,255,0.2);
+  border-radius: 3px;
+  border: 1px solid #97C7FF;
+  color: #0C0E1E;
+  p:first-child{
+    flex: 1;
+  }
+  span{
+    color: #545B65;
+  }
+  p:last-child{
+    margin-left: 26px;
+  }
+}
+.selectionNum{
+  padding: 0 15px;
+  height: 32px;
+  line-height: 32px;
+  background: rgba(117,197,255,0.2);
+  color: #0C0E1E;
+  margin-right: 16px;
+  span{
+    padding: 0 3px;
+    color: #FF6F31;
+  }
+}
+</style>
diff --git a/src/views/archiveKeeping/deviceManage/module/childDevice.vue b/src/views/archiveKeeping/deviceManage/module/childDevice.vue
index ddd6af6..a358eaf 100644
--- a/src/views/archiveKeeping/deviceManage/module/childDevice.vue
+++ b/src/views/archiveKeeping/deviceManage/module/childDevice.vue
@@ -1,50 +1,111 @@
 <template>
-  <!--表单组件-->
-  <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="childDeviceVisible" :title="childDeviceTitle">
-    <div class="setting-dialog">
-      <el-table
-        ref="table"
-        :data="childDeviceTable"
-        row-key="id"
-        highlight-current-row
-        style="min-width: 100%;"
-        @selection-change="selectionChangeHandler"
-        @row-click="clickRowHandler"
-      >
-        <el-table-column type="index" label="通道" align="center" width="55" />
-        <el-table-column label="摄像机名称" prop="child" min-width="80" />
-        <el-table-column label="所属设备" prop="deviceTypeId.name" min-width="140" />
-        <el-table-column label="状态" prop="categoryName" min-width="60" align="center">
-          <template slot-scope="scope">
-            <span :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="操作" min-width="180">
-          <template slot-scope="scope">
-            <div>{{ scope.row.createTime | parseTime }}</div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <!--分页组件-->
-      <pagination v-if="childDeviceTable.length!==0" />
-    </div></el-dialog>
+  <div>
+    <!--表单组件-->
+    <el-dialog class="childDeviceDialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="childDeviceVisible" :title="childDeviceTitle">
+      <div class="setting-dialog">
+        <div class="childDevice-header">
+          <div class="childDevice-info">
+            <p>当前设备：<span>计通 - 环境控制111 - HK001</span></p>
+            <p>IPv4地址：<span>192.168.1.111</span></p>
+            <p>端口：<span>5000</span></p>
+          </div>
+          <div class="childDevice-other">
+            <div class="child-num">子设备<span>15</span>个</div>
+            <div class="child-handle">
+              <el-button size="mini" @click="handleVideoForm(0)">
+                <i class="iconfont icon-xinzeng" />
+                新增
+              </el-button>
+              <el-button v-if="selectedDeviceType==='环境监控主机'" size="mini" @click="handleAutoDevice">
+                <i class="iconfont icon-huoqu" />
+                获取
+              </el-button>
+            </div>
+          </div>
+        </div>
+        <el-table
+          ref="table"
+          :data="childDeviceTable"
+          row-key="id"
+          highlight-current-row
+          style="min-width: 100%;"
+          @selection-change="selectionChangeHandler"
+          @row-click="clickRowHandler"
+        >
+          <el-table-column v-if="selectedDeviceType==='网络视频录像机（NVR）'" type="index" label="通道" align="center" width="55" />
+          <el-table-column v-if="selectedDeviceType==='网络视频录像机（NVR）'" label="摄像机名称" prop="child" min-width="80" />
+          <el-table-column v-if="selectedDeviceType==='环境监控主机'" label="设备编号" prop="num" align="center" width="90" />
+          <el-table-column v-if="selectedDeviceType==='环境监控主机'" label="设备名称" prop="deviceName" min-width="100" />
+          <el-table-column label="所属设备" prop="deviceTypeId.name" min-width="140" />
+          <el-table-column label="状态" prop="categoryName" min-width="60" align="center">
+            <template slot-scope="scope">
+              <span :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="操作" min-width="100" align="center">
+            <template slot-scope="scope">
+              <div class="device-sulan-btn" @click="handlePreview"><i class="iconfont icon-sulan" />速览</div>
+              <div class="device-edit-btn" @click="handleVideoForm(1)"><i class="iconfont icon-bianji" /></div>
+              <div class="device-delt-btn" @click="handleDeltCurrent(scope.row)"><i class="iconfont icon-shanchu" /></div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <el-pagination
+          v-if="childDeviceTable.length !== 0"
+          :current-page="page.page"
+          :total="page.total"
+          :page-size="page.size"
+          :pager-count="5"
+          layout="total, prev, pager, next, sizes"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentPage"
+        />
+      </div>
+    </el-dialog>
+
+    <!-- 自动获取子设备 -->
+    <AutoChildDevice ref="autoChildDevice" />
+    <!-- 监控预览 -->
+    <VideoPreview ref="videoModule" />
+    <!-- 环境监控子设备预览 -->
+    <DevicePreview ref="deviceModule" />
+    <!-- 新增/编辑 网路摄像机 -->
+    <ChildForm ref="childForm" />
+  </div>
 </template>
 
 <script>
+import ChildForm from './childForm'
+import VideoPreview from './videoPreview'
+import DevicePreview from './devicePreview'
+import AutoChildDevice from './autoChildDevice'
 export default {
+  components: { VideoPreview, ChildForm, DevicePreview, AutoChildDevice },
   props: {
+    selectedDeviceType: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
   },
   data() {
     return {
       childDeviceTable: [],
       selections: [],
       childDeviceVisible: false,
-      childDeviceTitle: '子设备管理'
+      childDeviceTitle: '子设备管理',
+      page: {
+        page: 1,
+        size: 10,
+        total: 0
+      }
     }
   },
-  watch: {
-  },
+  watch: {},
   created() {
+    this.childDeviceTable = [{}, {}, {}]
   },
   methods: {
     clickRowHandler(row) {
@@ -53,7 +114,68 @@ export default {
     selectionChangeHandler(val) {
       this.selections = val
     },
+    handleSizeChange(size) {
+      this.page.size = size
+      this.page.page = 1
+    },
+    handleCurrentPage(val) {
+      this.page.page = val
+    },
+    handleAutoDevice() {
+      this.$refs.autoChildDevice.autoDeviceVisible = true
+    },
+    handlePreview() {
+      if (this.selectedDeviceType === '环境监控主机') {
+        this.$refs.deviceModule.deviceVisible = true
+      } else {
+        this.$refs.videoModule.videoVisible = true
+      }
+    },
+    handleVideoForm(type) {
+      if (type === 1) {
+        if (this.selectedDeviceType === '环境监控主机') {
+          this.$refs.childForm.childFormTitle = '编辑子设备 - 环境控制子设备'
+          this.$refs.childForm.childType = false
+        } else {
+          this.$refs.childForm.childFormTitle = '编辑子设备 - 网络摄像机'
+          this.$refs.childForm.childType = true
+        }
+      } else {
+        if (this.selectedDeviceType === '环境监控主机') {
+          this.$refs.childForm.childFormTitle = '新增子设备 - 环境控制子设备'
+          this.$refs.childForm.childType = false
+        } else {
+          this.$refs.childForm.childFormTitle = '新增子设备 - 网络摄像机'
+          this.$refs.childForm.childType = true
+        }
+      }
+      this.$refs.childForm.childFormVisible = true
+    },
+    handleDeltCurrent() {
+      this.$confirm('此操作将删除当前所选设备' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        // this.crud.delAllLoading = true
+        // const ids = []
+        // datas.forEach(val => {
+        //   ids.push(val.id)
+        // })
+        // crudDevice.del(ids).then(() => {
+        //   this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+        //   this.crud.delAllLoading = false
+        //   this.crud.refresh()
+        // }).catch(err => {
+        //   this.crud.delAllLoading = false
+        //   console.log(err)
+        // })
+      }).catch(() => {
+      })
+    },
     handleCloseDialog(done) {
+      this.childDeviceVisible = false
       // 关闭弹框
       done()
     }
@@ -62,4 +184,78 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.childDeviceDialog{
+  ::v-deep .el-dialog {
+    width: 860px;
+    .el-dialog__body{
+      padding: 6px 0 30px 0 !important;
+    }
+  }
+}
+.childDevice-info{
+  display: flex;
+  justify-content: flex-end;
+  padding: 9px 12px 11px 12px;
+  margin-bottom: 24px;
+  background: rgba(151,199,255,0.2);
+  border-radius: 3px;
+  border: 1px solid #97C7FF;
+  color: #0C0E1E;
+  p:first-child{
+    flex: 1;
+  }
+  span{
+    color: #545B65;
+  }
+  p:last-child{
+    margin-left: 26px;
+  }
+}
+.childDevice-other{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  .child-num{
+    padding: 0 12px;
+    height: 32px;
+    line-height: 32px;
+    background: rgba(117,197,255,0.2);
+    color: #0C0E1E;
+    span{
+      padding: 0 4px;
+      color: #FF6F31;
+    }
+  }
+}
+.device-sulan-btn{
+  display: inline-block;
+  padding: 0 7px;
+  color: #FF8329;
+  background-color: #FFF3E5;
+  border: 1px solid #FEBD98;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.device-edit-btn{
+  display: inline-block;
+  padding: 0 6px 0 10px;
+  margin: 0 4px;
+  text-align: center;
+  color: #0348F3;
+  background-color: #DCEDFD;
+  border: 1px solid #9BD1FF;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.device-delt-btn{
+  display: inline-block;
+  padding: 0 6px 0 10px;
+  text-align: center;
+  color: #ED4A41;
+  background-color: #FCECE9;
+  border: 1px solid #FBC0B5;
+  border-radius: 3px;
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/archiveKeeping/deviceManage/module/childForm.vue b/src/views/archiveKeeping/deviceManage/module/childForm.vue
new file mode 100644
index 0000000..21ac7f7
--- /dev/null
+++ b/src/views/archiveKeeping/deviceManage/module/childForm.vue
@@ -0,0 +1,96 @@
+<template>
+  <!--表单组件-->
+  <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="childFormVisible" :title="childFormTitle">
+    <div class="setting-dialog">
+      <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px">
+        <el-row>
+          <el-form-item label="所属设备" prop="deviceParent">
+            <el-input v-model="form.deviceParent" style="width: 565px;" disabled />
+          </el-form-item>
+        </el-row>
+        <el-row v-if="childType">
+          <el-form-item label="通道名称" prop="channelName">
+            <el-input v-model="form.channelName" />
+          </el-form-item>
+          <el-form-item label="通道" prop="channelNum" style="margin-right: 0;">
+            <el-input v-model="form.channelNum" />
+          </el-form-item>
+        </el-row>
+        <el-row v-else>
+          <el-form-item label="设备编号" prop="deviceCode">
+            <el-input v-model="form.deviceCode" />
+          </el-form-item>
+          <el-form-item label="设备名称" prop="deviceName" style="margin-right: 0;">
+            <el-input v-model="form.deviceName" />
+          </el-form-item>
+        </el-row>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" :rows="4" style="width: 565px;" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer" style="margin-top: 0;">
+      <el-button type="text" @click="handleCloseDialog">取消</el-button>
+      <el-button type="primary" @click="handleComfireVideo">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  data() {
+    return {
+      childType: true,
+      childFormVisible: false,
+      childFormTitle: '新增',
+      form: {
+        deviceParent: null,
+        channelName: null,
+        channelNum: null,
+        remark: null
+      },
+      rules: {
+        deviceParent: [
+          { required: true, message: '所属设备不可为空', trigger: 'blur' }
+        ],
+        channelName: [
+          { required: true, message: '通道名称不可为空', trigger: 'blur' }
+        ],
+        channelNum: [
+          { required: true, message: '通道不可为空', trigger: 'blur' }
+        ],
+        deviceCode: [
+          { required: true, message: '设备编号不可为空', trigger: 'blur' }
+        ],
+        deviceName: [
+          { required: true, message: '设备名称不可为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+  },
+  created() {
+  },
+  methods: {
+    handleComfireVideo() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.childFormVisible = false
+          console.log('success')
+        } else {
+          console.log('error')
+        }
+      })
+    },
+    handleCloseDialog() {
+      this.childFormVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/archiveKeeping/deviceManage/module/detail.vue b/src/views/archiveKeeping/deviceManage/module/detail.vue
new file mode 100644
index 0000000..bfb3d7f
--- /dev/null
+++ b/src/views/archiveKeeping/deviceManage/module/detail.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-dialog class="detail-dialog" :title="detailTitle" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="detailVisible" :before-close="handleClose">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="detail-tab tab-content">
+        <!-- tab -->
+        <ul class="tab-nav" style="padding: 0;">
+          <li :class="{'active-tab-nav': activeIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
+          <li v-if="(selectedDeviceType==='网络视频录像机（NVR）' || selectedDeviceType==='环境监控主机')" :class="{'active-tab-nav': activeIndex == 1}" @click="changeActiveTab(1)">子设备列表</li>
+        </ul>
+        <!-- 基本信息 -->
+        <div v-if="activeIndex==0" class="base-info item-content">
+          <el-row>
+            <el-col v-for="(item,index) in DetailsInfoData" :key="index" class="base-info-item">
+              <span>{{ item.fieldCnName }}：</span>
+              <p>{{ item.context }}</p>
+            </el-col>
+          </el-row>
+        </div>
+        <!-- 子设备列表 -->
+        <div v-if="activeIndex==1 && (selectedDeviceType==='网络视频录像机（NVR）' || selectedDeviceType==='环境监控主机')" class="item-content" />
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-if=" selectedDeviceType === '网络视频录像机（NVR）' || selectedDeviceType ==='环境监控主机'" class="device-child-btn" @click="ChildDevice"><i class="iconfont icon-zishebeiguanli" />子设备管理</el-button>
+      <el-button type="primary" @click="detailVisible=false">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  components: { },
+  mixins: [],
+  props: {
+    selectedDeviceType: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      detailTitle: '',
+      activeIndex: 0,
+      detailVisible: false,
+      DetailsInfoData: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeActiveTab(index) {
+      this.activeIndex = index
+    },
+    ChildDevice() {
+      this.$emit('childDevice')
+    },
+    // 删除 - 关闭
+    handleClose(done) {
+      this.detailVisible = false
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-info{
+  background: #F6F8FC;
+}
+</style>
diff --git a/src/views/archiveKeeping/deviceManage/module/devicePreview.vue b/src/views/archiveKeeping/deviceManage/module/devicePreview.vue
new file mode 100644
index 0000000..7da5b61
--- /dev/null
+++ b/src/views/archiveKeeping/deviceManage/module/devicePreview.vue
@@ -0,0 +1,128 @@
+<template>
+  <!--表单组件-->
+  <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="deviceVisible" title="实时数速览-子设备">
+    <div class="setting-dialog">
+      <div class="preview-info">
+        <p>当前设备：<span>空气质量检测设备01 - jt01#S3101</span></p>
+        <p>数据获取时间：<span>2016-09-21 08:50:08 <i class="iconfont icon-shuaxin" /></span></p>
+      </div>
+      <el-table
+        ref="table"
+        :data="tableData"
+        row-key="id"
+        highlight-current-row
+        style="min-width: 100%;"
+        @selection-change="selectionChangeHandler"
+        @row-click="clickRowHandler"
+      >
+        <el-table-column type="index" label="序号" align="center" width="55" />
+        <el-table-column label="参数编号" prop="code" min-width="80" />
+        <el-table-column label="参数名称" prop="name" width="90" />
+        <el-table-column label="当前值" prop="value" min-width="100" align="center">
+          <template slot-scope="scope">
+            <span :class="['row-state', scope.row.value > 60 ? 'cancel-state': 'end-state']">{{ scope.row.value }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="值单位" prop="unit" min-width="60" />
+        <el-table-column label="描述" prop="remark" min-width="140">
+          <template slot-scope="scope">
+            {{ scope.row.remark ? scope.row.remark : '-' }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div slot="footer" class="dialog-footer" style="margin-top: 0;">
+      <el-button type="primary" @click="deviceVisible=false">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  data() {
+    return {
+      deviceVisible: false,
+      tableData: [],
+      selections: []
+    }
+  },
+  watch: {
+  },
+  created() {
+    this.tableData = [
+      {
+        'code': 'D_HA4_001',
+        'name': '温度',
+        'value': 24,
+        'unit': '°C',
+        'remark': null
+      },
+      {
+        'code': 'D_HA4_002',
+        'name': '湿度',
+        'value': 62,
+        'unit': '%',
+        'remark': null
+      },
+      {
+        'code': 'D_HA4_003',
+        'name': '二氧化碳',
+        'value': 33.3,
+        'unit': 'ppm',
+        'remark': null
+      },
+      {
+        'code': 'D_HA4_004',
+        'name': 'PM2.5',
+        'value': 15.6,
+        'unit': 'ug/m3',
+        'remark': null
+      },
+      {
+        'code': 'D_HA4_005',
+        'name': 'PM10',
+        'value': 16.2,
+        'unit': 'ug/m3',
+        'remark': null
+      }
+    ]
+  },
+  methods: {
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    selectionChangeHandler(val) {
+      this.selections = val
+    },
+    handleCloseDialog() {
+      this.deviceVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  width: 860px;
+  .el-dialog__body{
+    padding: 14px 0 30px 0 !important;
+  }
+}
+.preview-info{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #0C0E1E;
+  margin-bottom: 18px;
+  span{
+    color: #545B65;
+    i{
+      font-size: 12px;
+      padding-left: 3px;
+      color: #A6ADB6;
+    }
+  }
+}
+</style>
diff --git a/src/views/archiveKeeping/deviceManage/module/videoPreview.vue b/src/views/archiveKeeping/deviceManage/module/videoPreview.vue
new file mode 100644
index 0000000..ec1d29c
--- /dev/null
+++ b/src/views/archiveKeeping/deviceManage/module/videoPreview.vue
@@ -0,0 +1,68 @@
+<template>
+  <!--表单组件-->
+  <el-dialog append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseDialog" :visible="videoVisible" title="实时监控">
+    <div class="setting-dialog">
+      <div class="preview-info">当前设备：<span>视频监控110-SP001 [ 1#摄像机 ]</span></div>
+      <div class="default-img">
+        <img :src="'data:image/jpeg;base64,'+ srcImg" alt="" :onerror="defaultImg">
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer" style="margin-top: 0;">
+      <el-button type="primary" @click="videoVisible=false">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  data() {
+    return {
+      videoVisible: false,
+      defaultImg: 'this.src="' + require('@/assets/images/system/default-img2.png') + '"',
+      srcImg: ''
+    }
+  },
+  watch: {
+  },
+  created() {
+  },
+  methods: {
+    handleCloseDialog() {
+      this.videoVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  width: 860px;
+  .el-dialog__body{
+    padding: 14px 0 30px 0 !important;
+    .default-img{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 820px;
+      height: 442px;
+      background-color: #F9F9F9;
+      border: 1px solid #E6E8ED;
+      border-radius: 3px;
+      overflow: hidden;
+      img{
+        display: block;
+      }
+    }
+
+  }
+}
+.preview-info{
+  color: #0C0E1E;
+  margin-bottom: 18px;
+  span{
+    color: #545B65;
+  }
+}
+</style>
diff --git a/src/views/archiveKeeping/deviceManage/tableList.vue b/src/views/archiveKeeping/deviceManage/tableList.vue
index 4f8e738..3488f57 100644
--- a/src/views/archiveKeeping/deviceManage/tableList.vue
+++ b/src/views/archiveKeeping/deviceManage/tableList.vue
@@ -16,10 +16,8 @@
             <i class="iconfont icon-xinzeng" />
             新增
           </el-button>
-          <el-button v-permission="permission.edit" size="mini" :disabled="crud.selections.length !== 1" @click="crud.toEdit(crud.selections[0])">
-            <i class="iconfont icon-bianji" />
-            编辑
-          </el-button>
+        </template>
+        <template v-slot:right>
           <el-button slot="reference" v-permission="permission.del" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
             <i class="iconfont icon-shanchu" />
             删除
@@ -159,12 +157,13 @@
         row-key="id"
         highlight-current-row
         style="min-width: 100%;"
-        @selection-change="selectionChangeHandler"
+        @selection-change="crud.selectionChangeHandler"
         @row-click="clickRowHandler"
+        @cell-dblclick="tableDoubleClick"
       >
         <el-table-column type="selection" align="center" width="55" />
         <el-table-column label="子设备" prop="child" min-width="80" />
-        <el-table-column label="设备类型" prop="deviceTypeId.name" min-width="140" />
+        <el-table-column label="设备类型" prop="deviceTypeId.name" min-width="200" />
         <el-table-column label="设备名称" prop="deviceName" min-width="140" />
         <el-table-column label="设备编号" prop="deviceCode" min-width="85" />
         <el-table-column label="接口IP" prop="deviceIp" min-width="120" show-overflow-tooltip>
@@ -202,7 +201,9 @@
       <pagination v-if="crud.data.length!==0" />
     </div>
     <!-- 子设备管理 -->
-    <ChildDevice ref="childDevice" />
+    <ChildDevice ref="childDevice" :selected-device-type="selectedDeviceType" />
+    <!-- 详情 -->
+    <DetailModule ref="detailModule" :selected-device-type="selectedDeviceType" @childDevice="handleChildDevice" />
   </div>
 </template>
 
@@ -214,6 +215,7 @@ import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 import ChildDevice from './module/childDevice'
+import DetailModule from './module/detail'
 import { mapGetters } from 'vuex'
 
 const defaultForm = {
@@ -235,11 +237,11 @@ const defaultForm = {
 
 export default {
   name: 'DeviceTableList',
-  components: { rrOperation, crudOperation, pagination, ChildDevice },
+  components: { rrOperation, crudOperation, pagination, ChildDevice, DetailModule },
   cruds() {
     return CRUD({ title: '设备', url: 'api/device/list', crudMethod: { ...crudDevice }, optShow: {
       add: false,
-      edit: false,
+      edit: true,
       del: false,
       reset: true,
       download: false,
@@ -382,21 +384,35 @@ export default {
   },
   created() {
     this.deviceTypeOptions = typeJson.data
-    this.crud.data = [{}, {}, {}]
+    this.crud.data = [
+      { id: '7305DE3D273B0CAC079538', deviceTypeId: { name: '网络视频录像机（NVR）' }},
+      { id: 'C09A1946216E496BB3FA88', deviceTypeId: { name: '环境监控主机' }},
+      { id: 'DD656054BE3D1DF1E2F1FC', deviceTypeId: { name: '密集架' }},
+      { id: '65D1886B0F864291766421', deviceTypeId: { name: '通道门' }},
+      { id: 'E2767FEACA9CE0E3B16B89', deviceTypeId: { name: '桌面式RFID读写器' }},
+      { id: '3B85FA21FDAFBB618B5D40', deviceTypeId: { name: '手持式RFID读写器' }}
+    ]
   },
   methods: {
     // 获取数据前设置默认参数
     [CRUD.HOOK.beforeRefresh]() {
     },
     [CRUD.HOOK.afterRefresh](crud) {
-      this.crud.data = [{}, {}, {}]
+      // this.crud.data = [
+      //   { id: 1, deviceTypeId: { name: '网络视频录像机（NVR）' }},
+      //   { id: 2, deviceTypeId: { name: '环境监控主机' }},
+      //   { id: 3, deviceTypeId: { name: '密集架' }},
+      //   { id: 4, deviceTypeId: { name: '通道门' }},
+      //   { id: 5, deviceTypeId: { name: '桌面式RFID读写器' }},
+      //   { id: 6, deviceTypeId: { name: '手持式RFID读写器' }}
+      // ]
     },
     [CRUD.HOOK.beforeToEdit](crud, form, btn) {
+      console.log(crud.selections[0])
       console.log(form)
-      console.log(this.crud.status)
-      console.log(this.crud.status.edit)
-      console.log(this.crud.status.edit === 1)
-      this.addDeviceTitle = '编辑设备 - ' + form.name
+      this.selectedDeviceType = form.deviceTypeId.name
+
+      this.addDeviceTitle = '编辑设备 - ' + form.deviceTypeId.name
     },
     // 提交前做的操作
     async [CRUD.HOOK.afterValidateCU](crud) {
@@ -429,12 +445,11 @@ export default {
         })
       }
       form.supplier = form.supplierId.id
-      this.selectedDeviceType = form.deviceTypeId.name
       crud.status.edit = CRUD.STATUS.PREPARED
       crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED
 
-      this.deviceForm.deviceType = null
-      this.$refs.deviceForm.resetFields()
+      // this.deviceForm.deviceType = null
+      // this.$refs.deviceForm.resetFields()
       return false
     },
     // 防止编辑时，isLinkage是null,isLinkage.lend报错
@@ -444,6 +459,14 @@ export default {
         element.isCallback = { stateType: 2, lend: null, borrow: null, inBound: null, outBound: null }
       })
     },
+    // table - 双击查看详情
+    tableDoubleClick(row) {
+      this.selectedDeviceType = row.deviceTypeId.name
+      this.$refs.detailModule.detailTitle = '设备详情-' + row.deviceTypeId.name
+      this.$refs.detailModule.detailVisible = true
+      this.$refs.detailModule.activeIndex = 0
+      // this.$refs.archivesInfo.getDetial(row.id)
+    },
     handleComfirmDevice() {
       this.$refs.deviceForm.validate((valid) => {
         if (valid) {
@@ -522,14 +545,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.device-child-btn{
-  width: auto;
-  padding: 0 14px;
-  line-height: 28px;
-  font-weight: bold;
-  color: #0348F3;
-  border-color: #0348F3;
-}
+
 ::v-deep .el-dialog .el-dialog__body{
   .checkbox-style.el-form-item{
     .el-form-item__content{
@@ -538,22 +554,4 @@ export default {
   }
 }
 
-.spk-a {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  background-color:#2FD490;
-  box-shadow: 0px 3px 4px 0px rgba(17,243,189,0.35);
-  vertical-align: middle;
-}
-.off-line {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  background-color: #ED4A41;
-  box-shadow: 0px 3px 4px 0px rgba(252,122,122,0.35);
-  vertical-align: middle;
-}
 </style>