diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index d3dd472..fa47486 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -1,32 +1,37 @@
 <template>
   <div class="container">
     <div>
-      <el-col :span="6">
-        <video-tree @click="handleCameraClicked"/>
-      </el-col>
+      <div ref="tree">
+        <el-col :span="6">
+          <video-tree @click="handleCameraClicked"/>
+        </el-col>
+      </div>
       <el-col :span="18">
         <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                @focus="dateClick"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-          <div class="body-right">
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-              <el-tab-pane label="海康" name="hk">
-                <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+          <div style="z-index: 9999;">
+            <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
+              <el-form-item class="selectForm-container-item" prop="startTime">
+                <el-date-picker
+                  v-model="timeRange"
+                  type="datetimerange"
+                  range-separator="至"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  start-placeholder="搜索起始时间"
+                  end-placeholder="搜索截止时间"
+                  @focus="dateClick"
+                  @change="dateSelected"/>
+              </el-form-item>
+              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+              <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
+            </el-form>
+          </div>
+          <div>
+            <el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">
+              <el-tab-pane label="海康" name="hk" >
+                <iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               </el-tab-pane>
               <el-tab-pane label="NVR" name="nvr">
-                <iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+                <iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>
               </el-tab-pane>
             </el-tabs>
           </div>
@@ -55,8 +60,9 @@
     return {
       activeName: 'hk',
       videoShow: true,
+      timeRange: [],
       listQuery: {
-        activeIp: '',
+        monitorPoint: '',
         startTime: '',
         endTime: ''
       },
@@ -77,27 +83,35 @@
     }
   },
   mounted() {
+    setTimeout(() => {
+      // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
+      window.frames['playHK'].initPlugin('back')
+    }, 1500)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin()
+        console.log('hk')
+        window.frames['playHK'].initPlugin('back')
       } else if (tab.name === 'nvr') {
-        window.frames['playHK'].close()
         this.activeName = 'nvr'
-        window.frames['playNVR'].stopPlayReal(null)
+        // window.frames['playNVR'].stopPlayReal(null)
       }
     },
     search() {
+      window.frames['playHK'].show()
+      if (this.listQuery.monitorPoint === '') {
+        this.$message.warning('请先选中一个监控点')
+        return
+      }
       this.videoShow = true
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
-            window.frames['playHK'].stop()
-            window.frames['playHK'].search(this.listQuery.activeIp, this.listQuery.startTime, this.listQuery.endTime)
+            window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
       })
@@ -108,19 +122,15 @@
         console.log('ip is null')
         return false
       } else {
-        this.listQuery.activeIp = camera.monitorPoint
+        this.listQuery.monitorPoint = camera.monitorPoint
       }
-      if (typeof camera.username === 'undefined' || camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof camera.password === 'undefined' || camera.password === '') {
-        console.log('password is null')
-        return false
-      }
-
-      // 开始预览
-      // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(camera)
+    },
+    dateClick() {
+      this.videoShow = false
+      window.frames['playHK'].hide()
+    },
+    dateSelected() {
+      window.frames['playHK'].show()
     }
   }
 }
@@ -134,5 +144,14 @@
   scrolling: no;
   border: 0;
   vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.playWnd {
+  margin: 10px 0 0 20px;
+  width: 1px;
+  height: 1px;
+  border: 1px solid white;
+  z-index: -1;
 }
 </style>

diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index d3dd472..fa47486 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -1,32 +1,37 @@
 <template>
   <div class="container">
     <div>
-      <el-col :span="6">
-        <video-tree @click="handleCameraClicked"/>
-      </el-col>
+      <div ref="tree">
+        <el-col :span="6">
+          <video-tree @click="handleCameraClicked"/>
+        </el-col>
+      </div>
       <el-col :span="18">
         <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                @focus="dateClick"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-          <div class="body-right">
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-              <el-tab-pane label="海康" name="hk">
-                <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+          <div style="z-index: 9999;">
+            <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
+              <el-form-item class="selectForm-container-item" prop="startTime">
+                <el-date-picker
+                  v-model="timeRange"
+                  type="datetimerange"
+                  range-separator="至"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  start-placeholder="搜索起始时间"
+                  end-placeholder="搜索截止时间"
+                  @focus="dateClick"
+                  @change="dateSelected"/>
+              </el-form-item>
+              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+              <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
+            </el-form>
+          </div>
+          <div>
+            <el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">
+              <el-tab-pane label="海康" name="hk" >
+                <iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               </el-tab-pane>
               <el-tab-pane label="NVR" name="nvr">
-                <iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+                <iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>
               </el-tab-pane>
             </el-tabs>
           </div>
@@ -55,8 +60,9 @@
     return {
       activeName: 'hk',
       videoShow: true,
+      timeRange: [],
       listQuery: {
-        activeIp: '',
+        monitorPoint: '',
         startTime: '',
         endTime: ''
       },
@@ -77,27 +83,35 @@
     }
   },
   mounted() {
+    setTimeout(() => {
+      // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
+      window.frames['playHK'].initPlugin('back')
+    }, 1500)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin()
+        console.log('hk')
+        window.frames['playHK'].initPlugin('back')
       } else if (tab.name === 'nvr') {
-        window.frames['playHK'].close()
         this.activeName = 'nvr'
-        window.frames['playNVR'].stopPlayReal(null)
+        // window.frames['playNVR'].stopPlayReal(null)
       }
     },
     search() {
+      window.frames['playHK'].show()
+      if (this.listQuery.monitorPoint === '') {
+        this.$message.warning('请先选中一个监控点')
+        return
+      }
       this.videoShow = true
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
-            window.frames['playHK'].stop()
-            window.frames['playHK'].search(this.listQuery.activeIp, this.listQuery.startTime, this.listQuery.endTime)
+            window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
       })
@@ -108,19 +122,15 @@
         console.log('ip is null')
         return false
       } else {
-        this.listQuery.activeIp = camera.monitorPoint
+        this.listQuery.monitorPoint = camera.monitorPoint
       }
-      if (typeof camera.username === 'undefined' || camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof camera.password === 'undefined' || camera.password === '') {
-        console.log('password is null')
-        return false
-      }
-
-      // 开始预览
-      // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(camera)
+    },
+    dateClick() {
+      this.videoShow = false
+      window.frames['playHK'].hide()
+    },
+    dateSelected() {
+      window.frames['playHK'].show()
     }
   }
 }
@@ -134,5 +144,14 @@
   scrolling: no;
   border: 0;
   vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.playWnd {
+  margin: 10px 0 0 20px;
+  width: 1px;
+  height: 1px;
+  border: 1px solid white;
+  z-index: -1;
 }
 </style>
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index df45267..b03165c 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div style="margin-top: 14px">
+        <div ref="tabDiv" style="margin-top: 14px">
           <el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">
             <el-tab-pane label="海康" name="hk">
               <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>
@@ -22,32 +22,28 @@
 
 <script>
 import VideoTree from './videoTree'
-import WebPlay from './webPlay'
 
 export default {
   name: 'VideoMonitor',
-  components: { WebPlay, VideoTree },
+  components: { VideoTree },
   data() {
     return {
       activeName: 'hk',
-      winHeight: '',
-      winWidth: ''
+      tabHeight: '',
+      tabWidth: ''
     }
   },
   mounted() {
-    window.frames['playHK'].initPlugin()
-    // window.frames['playHK'].initBtnClicked()
-  },
-  activated() {
-
+    setTimeout(() => {
+      window.frames['playHK'].initPlugin('real')
+    }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin()
+        window.frames['playHK'].initPlugin('real')
       } else if (tab.name === 'nvr') {
-        // window.frames['playHK'].close()
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
       }
@@ -59,8 +55,6 @@
         return false
       } else {
         if (this.activeName === 'hk') {
-          // window.frames['playHK'].preview('2a617f752fbe4c68989e8d3975cf58f9')
-          // this.$message.info('监控点编号：' + camera.monitorPoint)
           window.frames['playHK'].play(camera.monitorPoint)
         } else if (this.activeName === 'nvr') {
           window.frames['playNVR'].startPlayReal()

diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index d3dd472..fa47486 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -1,32 +1,37 @@
 <template>
   <div class="container">
     <div>
-      <el-col :span="6">
-        <video-tree @click="handleCameraClicked"/>
-      </el-col>
+      <div ref="tree">
+        <el-col :span="6">
+          <video-tree @click="handleCameraClicked"/>
+        </el-col>
+      </div>
       <el-col :span="18">
         <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                @focus="dateClick"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-          <div class="body-right">
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-              <el-tab-pane label="海康" name="hk">
-                <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+          <div style="z-index: 9999;">
+            <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
+              <el-form-item class="selectForm-container-item" prop="startTime">
+                <el-date-picker
+                  v-model="timeRange"
+                  type="datetimerange"
+                  range-separator="至"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  start-placeholder="搜索起始时间"
+                  end-placeholder="搜索截止时间"
+                  @focus="dateClick"
+                  @change="dateSelected"/>
+              </el-form-item>
+              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+              <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
+            </el-form>
+          </div>
+          <div>
+            <el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">
+              <el-tab-pane label="海康" name="hk" >
+                <iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               </el-tab-pane>
               <el-tab-pane label="NVR" name="nvr">
-                <iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+                <iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>
               </el-tab-pane>
             </el-tabs>
           </div>
@@ -55,8 +60,9 @@
     return {
       activeName: 'hk',
       videoShow: true,
+      timeRange: [],
       listQuery: {
-        activeIp: '',
+        monitorPoint: '',
         startTime: '',
         endTime: ''
       },
@@ -77,27 +83,35 @@
     }
   },
   mounted() {
+    setTimeout(() => {
+      // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
+      window.frames['playHK'].initPlugin('back')
+    }, 1500)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin()
+        console.log('hk')
+        window.frames['playHK'].initPlugin('back')
       } else if (tab.name === 'nvr') {
-        window.frames['playHK'].close()
         this.activeName = 'nvr'
-        window.frames['playNVR'].stopPlayReal(null)
+        // window.frames['playNVR'].stopPlayReal(null)
       }
     },
     search() {
+      window.frames['playHK'].show()
+      if (this.listQuery.monitorPoint === '') {
+        this.$message.warning('请先选中一个监控点')
+        return
+      }
       this.videoShow = true
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
-            window.frames['playHK'].stop()
-            window.frames['playHK'].search(this.listQuery.activeIp, this.listQuery.startTime, this.listQuery.endTime)
+            window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
       })
@@ -108,19 +122,15 @@
         console.log('ip is null')
         return false
       } else {
-        this.listQuery.activeIp = camera.monitorPoint
+        this.listQuery.monitorPoint = camera.monitorPoint
       }
-      if (typeof camera.username === 'undefined' || camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof camera.password === 'undefined' || camera.password === '') {
-        console.log('password is null')
-        return false
-      }
-
-      // 开始预览
-      // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(camera)
+    },
+    dateClick() {
+      this.videoShow = false
+      window.frames['playHK'].hide()
+    },
+    dateSelected() {
+      window.frames['playHK'].show()
     }
   }
 }
@@ -134,5 +144,14 @@
   scrolling: no;
   border: 0;
   vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.playWnd {
+  margin: 10px 0 0 20px;
+  width: 1px;
+  height: 1px;
+  border: 1px solid white;
+  z-index: -1;
 }
 </style>
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index df45267..b03165c 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div style="margin-top: 14px">
+        <div ref="tabDiv" style="margin-top: 14px">
           <el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">
             <el-tab-pane label="海康" name="hk">
               <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>
@@ -22,32 +22,28 @@
 
 <script>
 import VideoTree from './videoTree'
-import WebPlay from './webPlay'
 
 export default {
   name: 'VideoMonitor',
-  components: { WebPlay, VideoTree },
+  components: { VideoTree },
   data() {
     return {
       activeName: 'hk',
-      winHeight: '',
-      winWidth: ''
+      tabHeight: '',
+      tabWidth: ''
     }
   },
   mounted() {
-    window.frames['playHK'].initPlugin()
-    // window.frames['playHK'].initBtnClicked()
-  },
-  activated() {
-
+    setTimeout(() => {
+      window.frames['playHK'].initPlugin('real')
+    }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin()
+        window.frames['playHK'].initPlugin('real')
       } else if (tab.name === 'nvr') {
-        // window.frames['playHK'].close()
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
       }
@@ -59,8 +55,6 @@
         return false
       } else {
         if (this.activeName === 'hk') {
-          // window.frames['playHK'].preview('2a617f752fbe4c68989e8d3975cf58f9')
-          // this.$message.info('监控点编号：' + camera.monitorPoint)
           window.frames['playHK'].play(camera.monitorPoint)
         } else if (this.activeName === 'nvr') {
           window.frames['playNVR'].startPlayReal()
diff --git a/src/views/video/videoTree.vue b/src/views/video/videoTree.vue
index 4a17577..cccc236 100644
--- a/src/views/video/videoTree.vue
+++ b/src/views/video/videoTree.vue
@@ -43,6 +43,7 @@
   },
   mounted() {
     this.initAreaType()
+    this.fetchData()
   },
   activated() {
     this.fetchData()
@@ -69,6 +70,7 @@
         if (this.treeClickCount === 1) {
           // 把次数归零
           this.treeClickCount = 0
+          // this.$emit('click', data)
           // 单击事件处理
           console.log('单击事件,可在此处理对应逻辑')
         } else if (this.treeClickCount > 1) {

diff --git a/src/views/video/history.vue b/src/views/video/history.vue
index d3dd472..fa47486 100644
--- a/src/views/video/history.vue
+++ b/src/views/video/history.vue
@@ -1,32 +1,37 @@
 <template>
   <div class="container">
     <div>
-      <el-col :span="6">
-        <video-tree @click="handleCameraClicked"/>
-      </el-col>
+      <div ref="tree">
+        <el-col :span="6">
+          <video-tree @click="handleCameraClicked"/>
+        </el-col>
+      </div>
       <el-col :span="18">
         <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
-          <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
-            <el-form-item class="selectForm-container-item" prop="startTime">
-              <el-date-picker
-                v-model="timeRange"
-                type="datetimerange"
-                range-separator="至"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                start-placeholder="搜索起始时间"
-                end-placeholder="搜索截止时间"
-                @focus="dateClick"/>
-            </el-form-item>
-            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
-            <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
-          </el-form>
-          <div class="body-right">
-            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-              <el-tab-pane label="海康" name="hk">
-                <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+          <div style="z-index: 9999;">
+            <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
+              <el-form-item class="selectForm-container-item" prop="startTime">
+                <el-date-picker
+                  v-model="timeRange"
+                  type="datetimerange"
+                  range-separator="至"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  start-placeholder="搜索起始时间"
+                  end-placeholder="搜索截止时间"
+                  @focus="dateClick"
+                  @change="dateSelected"/>
+              </el-form-item>
+              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+              <!--<el-button class="filter-item" type="primary" @click="live">实时预览</el-button>-->
+            </el-form>
+          </div>
+          <div>
+            <el-tabs v-model="activeName" type="card" @tab-click.once="handleClick">
+              <el-tab-pane label="海康" name="hk" >
+                <iframe v-if="activeName==='hk'" zIndex="-1" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html?wmode=opaque"/>
               </el-tab-pane>
               <el-tab-pane label="NVR" name="nvr">
-                <iframe v-if="activeName==='nvr'" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+                <iframe v-if="activeName==='nvr'" zIndex="-1" name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html?wmode=opaque"/>
               </el-tab-pane>
             </el-tabs>
           </div>
@@ -55,8 +60,9 @@
     return {
       activeName: 'hk',
       videoShow: true,
+      timeRange: [],
       listQuery: {
-        activeIp: '',
+        monitorPoint: '',
         startTime: '',
         endTime: ''
       },
@@ -77,27 +83,35 @@
     }
   },
   mounted() {
+    setTimeout(() => {
+      // console.log('treewidth: ' + this.$refs.tree.$el.offsetWidth.toString())
+      window.frames['playHK'].initPlugin('back')
+    }, 1500)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin()
+        console.log('hk')
+        window.frames['playHK'].initPlugin('back')
       } else if (tab.name === 'nvr') {
-        window.frames['playHK'].close()
         this.activeName = 'nvr'
-        window.frames['playNVR'].stopPlayReal(null)
+        // window.frames['playNVR'].stopPlayReal(null)
       }
     },
     search() {
+      window.frames['playHK'].show()
+      if (this.listQuery.monitorPoint === '') {
+        this.$message.warning('请先选中一个监控点')
+        return
+      }
       this.videoShow = true
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
           if (this.activeName === 'nvr') {
             window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
           } else if (this.activeName === 'hk') {
-            window.frames['playHK'].stop()
-            window.frames['playHK'].search(this.listQuery.activeIp, this.listQuery.startTime, this.listQuery.endTime)
+            window.frames['playHK'].search(this.listQuery.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
           }
         }
       })
@@ -108,19 +122,15 @@
         console.log('ip is null')
         return false
       } else {
-        this.listQuery.activeIp = camera.monitorPoint
+        this.listQuery.monitorPoint = camera.monitorPoint
       }
-      if (typeof camera.username === 'undefined' || camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof camera.password === 'undefined' || camera.password === '') {
-        console.log('password is null')
-        return false
-      }
-
-      // 开始预览
-      // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(camera)
+    },
+    dateClick() {
+      this.videoShow = false
+      window.frames['playHK'].hide()
+    },
+    dateSelected() {
+      window.frames['playHK'].show()
     }
   }
 }
@@ -134,5 +144,14 @@
   scrolling: no;
   border: 0;
   vspale: 0;
+  z-index: -1;
+  padding:0 !important;
+}
+.playWnd {
+  margin: 10px 0 0 20px;
+  width: 1px;
+  height: 1px;
+  border: 1px solid white;
+  z-index: -1;
 }
 </style>
diff --git a/src/views/video/monitor.vue b/src/views/video/monitor.vue
index df45267..b03165c 100644
--- a/src/views/video/monitor.vue
+++ b/src/views/video/monitor.vue
@@ -5,7 +5,7 @@
         <video-tree @click="handleCameraClicked"/>
       </el-col>
       <el-col :span="18">
-        <div style="margin-top: 14px">
+        <div ref="tabDiv" style="margin-top: 14px">
           <el-tabs v-model="activeName" type="border-card" @tab-click.once ="handleClick">
             <el-tab-pane label="海康" name="hk">
               <iframe v-if="activeName === 'hk'" name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_embedded_for_iframe.html"/>
@@ -22,32 +22,28 @@
 
 <script>
 import VideoTree from './videoTree'
-import WebPlay from './webPlay'
 
 export default {
   name: 'VideoMonitor',
-  components: { WebPlay, VideoTree },
+  components: { VideoTree },
   data() {
     return {
       activeName: 'hk',
-      winHeight: '',
-      winWidth: ''
+      tabHeight: '',
+      tabWidth: ''
     }
   },
   mounted() {
-    window.frames['playHK'].initPlugin()
-    // window.frames['playHK'].initBtnClicked()
-  },
-  activated() {
-
+    setTimeout(() => {
+      window.frames['playHK'].initPlugin('real')
+    }, 1000)
   },
   methods: {
     handleClick(tab, event) {
       if (tab.name === 'hk') {
         this.activeName = 'hk'
-        window.frames['playHK'].initPlugin()
+        window.frames['playHK'].initPlugin('real')
       } else if (tab.name === 'nvr') {
-        // window.frames['playHK'].close()
         this.activeName = 'nvr'
         window.frames['playNVR'].stopPlayReal(null)
       }
@@ -59,8 +55,6 @@
         return false
       } else {
         if (this.activeName === 'hk') {
-          // window.frames['playHK'].preview('2a617f752fbe4c68989e8d3975cf58f9')
-          // this.$message.info('监控点编号：' + camera.monitorPoint)
           window.frames['playHK'].play(camera.monitorPoint)
         } else if (this.activeName === 'nvr') {
           window.frames['playNVR'].startPlayReal()
diff --git a/src/views/video/videoTree.vue b/src/views/video/videoTree.vue
index 4a17577..cccc236 100644
--- a/src/views/video/videoTree.vue
+++ b/src/views/video/videoTree.vue
@@ -43,6 +43,7 @@
   },
   mounted() {
     this.initAreaType()
+    this.fetchData()
   },
   activated() {
     this.fetchData()
@@ -69,6 +70,7 @@
         if (this.treeClickCount === 1) {
           // 把次数归零
           this.treeClickCount = 0
+          // this.$emit('click', data)
           // 单击事件处理
           console.log('单击事件,可在此处理对应逻辑')
         } else if (this.treeClickCount > 1) {
diff --git a/static/webCtrl/hk/demo_embedded_for_iframe.html b/static/webCtrl/hk/demo_embedded_for_iframe.html
index 1946042..112068e 100644
--- a/static/webCtrl/hk/demo_embedded_for_iframe.html
+++ b/static/webCtrl/hk/demo_embedded_for_iframe.html
@@ -17,6 +17,7 @@
     width: 1px;
     height: 1px;
     border: 1px solid white;
+    z-index: -1;
 }
 .cbInfoDiv {
     float: left;
@@ -152,6 +153,9 @@
     var iframeClientPos = null;       // iframe相对视窗的位置
     var iframeParentShowSize = null;  // 视窗大小 width height
 
+    const winHeight = document.documentElement.clientHeight;
+    const winWidth = document.documentElement.clientWidth - 50;
+
     // 标签关闭
     $(window).unload(function () {
         if (oWebControl != null){
@@ -160,6 +164,12 @@
         }
     });
 
+    function hide(){
+      oWebControl.JS_HideWnd();
+    };
+    function show(){
+      oWebControl.JS_ShowWnd();
+    };
      // 步骤1：监听父页面的消息
     window.addEventListener('message', function(e){
       if(e && e.data){
@@ -174,7 +184,7 @@
               top: iframePos.top + scrollValue.top
             });  // 更新插件窗口位置
 
-            oWebControl.JS_Resize(800, 400);
+            oWebControl.JS_Resize(parseInt(winWidth), parseInt(winHeight));
             setWndCover();
             break;
           case 'updateInitParam':
@@ -198,7 +208,7 @@
               left: iframePos.left + scrollValue.left,
               top: iframePos.top + scrollValue.top
             });    // 更新插件窗口位置
-              oWebControl.JS_Resize(800, 400);
+              oWebControl.JS_Resize(parseInt(winWidth), parseInt(winHeight));
               setWndCover();
             }
             break;
@@ -228,12 +238,12 @@
         var divWidth = $("#playWnd").width();
         var divHeight = $("#playWnd").height();
 
-        oWebControl.JS_RepairPartWindow(0, 0, 801, 401);  // 多1个像素点防止还原后边界缺失一个像素条
+        oWebControl.JS_RepairPartWindow(0, 0, parseInt(winWidth) + 1, parseInt(winHeight) + 1);  // 多1个像素点防止还原后边界缺失一个像素条
 
         // 判断剪切矩形的上边距
         if (iframeClientPos.top < 0 && Math.abs(iframeClientPos.top) > divTop){
           var deltaTop = Math.abs(iframeClientPos.top) - divTop;
-          oWebControl.JS_CuttingPartWindow(0, 0, 801, deltaTop + 1);
+          oWebControl.JS_CuttingPartWindow(0, 0, parseInt(winWidth) + 1, deltaTop + 1);
           //console.log({deltaTop: deltaTop});
         }
 
@@ -241,7 +251,7 @@
         if (iframeClientPos.left < 0 && Math.abs(iframeClientPos.left) > divLeft){
           var deltaLeft = Math.abs(iframeClientPos.left) - divLeft;
           //console.log({deltaLeft: deltaLeft});
-          oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, 401);  // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
+          oWebControl.JS_CuttingPartWindow(0, 0, deltaLeft, parseInt(winHeight) + 1);  // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
         }
 
         // 判断剪切矩形的右边距
@@ -250,7 +260,7 @@
         if (W2 < divWidth){
           var deltaRight = iframeWndWidth - W2 - W1;
           if (deltaRight > 0) {
-            oWebControl.JS_CuttingPartWindow(800 - deltaRight, 0, deltaRight + 1, 401);
+            oWebControl.JS_CuttingPartWindow(parseInt(winWidth) - deltaRight, 0, deltaRight + 1, parseInt(winHeight) + 1);
           }
         }
 
@@ -260,13 +270,13 @@
         var deltaBottom = H1 - H2;
         //console.log({deltaBottom: deltaBottom});
         if (deltaBottom > 0) {
-          oWebControl.JS_CuttingPartWindow(0, 400 - deltaBottom, 801, deltaBottom + 1);
+          oWebControl.JS_CuttingPartWindow(0, parseInt(winHeight) - deltaBottom, parseInt(winWidth) + 1, deltaBottom + 1);
         }
       }
       }
 
     // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
-    function initPlugin () {
+    function initPlugin (type) {
       oWebControl = new WebControl({
         szPluginContainer: "playWnd",
         iServicePortStart: 15900,
@@ -279,7 +289,7 @@
             dllPath: "./VideoPluginConnect.dll"
           }).then(function () {
             // 步骤2：JS_CreateWnd时指定cbSetDocTitle回调，并在回调中向父页面发送更新标题消息，标题为回调出来的uuid
-            oWebControl.JS_CreateWnd("playWnd", 800, 400, {
+            oWebControl.JS_CreateWnd("playWnd", parseInt(winWidth), parseInt(winHeight), {
               cbSetDocTitle: function (uuid) {
                 oWebControl._pendBg = false;
                 window.parent.postMessage({
@@ -303,7 +313,7 @@
                   msg:'更新Pos'
                 }, '\*');
 
-              initBtnClicked();
+              initBtnClicked(type);
             });
           }, function () {
             console.log("JS_CreateWnd fail");
@@ -317,7 +327,7 @@
           initCount ++;
           if (initCount < 3) {
             setTimeout(function () {
-              initPlugin();
+              initPlugin(type);
             }, 3000)
           } else {
             $("#playWnd").html("插件启动失败，请检查插件是否安装！");
@@ -337,12 +347,95 @@
       });
       if(oWebControl!=null) {
         oWebControl.JS_SetDocOffset({
-          left: 520,
-          top: 200
+          left: 540,
+          top: type === "real"?200:280
         });
         setWndCover();
       }
     }
+
+    // 回访
+    function search(cameraIndexCode, startTimeStamp, endTimeStamp){
+      var startTimeStamp = Date.parse(new Date(startTimeStamp));
+      var endTimeStamp = Date.parse(new Date(endTimeStamp));
+      console.log("startTimeStamp：" + startTimeStamp);
+      console.log("endTimeStamp：" + endTimeStamp);
+      var param = '{"argument": ' +
+        '{"cameraIndexCode": "'+cameraIndexCode+'","recordLocation": 0,"transMode": 1,"gpuMode": 0,"wndId": -1,"startTimeStamp": "'+startTimeStamp+'","endTimeStamp": "'+endTimeStamp+'"},"funcName": "startPlayback"}';
+      console.log("非控件读取：" + param);
+      //删除字符串中的回车换行
+      param = param.replace(/(\s*)/g, "");
+      // 执行
+      requestInterface(param);
+      // var recordLocation = 0;                                     //录像存储位置：0-中心存储，1-设备存储
+      // var transMode = 1;                                          //传输协议：0-UDP，1-TCP
+      // var gpuMode = 0;                                            //是否启用GPU硬解，0-不启用，1-启用
+      // var wndId = -1;                                             //播放窗口序号（在2x2以上布局下可指定播放窗口）
+      //
+      // oWebControl.JS_RequestInterface({
+      //   funcName: "startPlayback",
+      //   argument: JSON.stringify({
+      //     cameraIndexCode: cameraIndexCode,                   //监控点编号
+      //     startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),  //录像查询开始时间戳，单位：秒
+      //     endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),      //录像结束开始时间戳，单位：秒
+      //     recordLocation: recordLocation,                     //录像存储类型：0-中心存储，1-设备存储
+      //     transMode: transMode,                               //传输协议：0-UDP，1-TCP
+      //     gpuMode: gpuMode,                                   //是否启用GPU硬解，0-不启用，1-启用
+      //     wndId:wndId                                         //可指定播放窗口
+      //   })
+      // })
+    }
+
+    function requestInterface(value) {
+      oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
+        console.log(oData)
+        showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
+      });
+    }
+
+    $("#initBtn").click(function() {
+      initBtnClicked();
+    })
+    function initBtnClicked(type){
+      // var param = $("#initParam").val();
+      var mode = type === "real"?0:1
+      var param = '{\n' +
+        '    "argument": {\n' +
+        '        "appkey": "25766251",\n' +
+        '        "ip": "192.168.1.22",\n' +
+        '        "port": 443,\n' +
+        '        "secret": "h2o6zXtzCmt8eaOaMkXb",\n' +
+        '        "enableHTTPS": 1,\n' +
+        '        "layout": "1x1",\n' +
+        '        "playMode": ' + mode + '},\n' +
+        '    "funcName": "init"\n' +
+        '}'
+      //删除字符串中的回车换行
+      param = param.replace(/(\s*)/g, "");
+
+      // 执行初始化
+      requestInterface(param);
+    }
+
+
+    $("#playBtn").click(function() {
+      play()
+    })
+    function play(cameraIndexCode) {
+      // var param = $("#playParam").val();
+      // console.log("控件读取：" + param);
+      var param = '{"argument": ' +
+        '{"cameraIndexCode": "'+cameraIndexCode+'","ezvizDirect": 0,"gpuMode": 0,"streamMode": 0,"transMode": 1,"wndId": -1},"funcName": "startPreview"}';
+      console.log("非控件读取：" + param);
+      //删除字符串中的回车换行
+      param = param.replace(/(\s*)/g, "");
+      // 执行预览
+      requestInterface(param);
+
+    };
+
+
+
     // 获取公钥
     function getPubKey (callback) {
         oWebControl.JS_RequestInterface({
@@ -378,12 +471,7 @@
         return encrypt.encrypt(value);
     }
 
-    function requestInterface(value) {
-        oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
-            console.log(oData)
-            showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
-        });
-    }
+
 
     // 显示接口返回的消息及插件回调信息
     function showCBInfo(szInfo, type) {
@@ -395,34 +483,6 @@
         // $("#cbInfo").html(szInfo + $("#cbInfo").html());
     }
 
-    $("#initBtn").click(function() {
-        initBtnClicked();
-    })
-    function initBtnClicked(){
-      var param = $("#initParam").val();
-      //删除字符串中的回车换行
-      param = param.replace(/(\s*)/g, "");
-
-      // 执行初始化
-      requestInterface(param);
-    }
-
-
-    $("#playBtn").click(function() {
-        play()
-    })
-    function play(cameraIndexCode) {
-        // var param = $("#playParam").val();
-        // console.log("控件读取：" + param);
-        var param = '{"argument": ' +
-          '{"cameraIndexCode": "'+cameraIndexCode+'","ezvizDirect": 0,"gpuMode": 0,"streamMode": 0,"transMode": 1,"wndId": -1},"funcName": "startPreview"}';
-        console.log("非控件读取：" + param);
-        //删除字符串中的回车换行
-        param = param.replace(/(\s*)/g, "");
-        // 执行预览
-        requestInterface(param);
-
-    };
 
     // 清空
     $("#clear").click(function() {