diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index b06847f..f452ea5 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -102,10 +102,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
@@ -151,11 +171,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+      <!--<el-col :span="24">设备名称-->
+      <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+      <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -192,452 +212,495 @@
 </template>
 
 <script>
-import { getProject } from '@/utils/baseConfig'
-import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
-import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+  import { getProject } from '@/utils/baseConfig'
+  import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
+  import { alarmListOverview } from '@/api/alarm'
+  import DeviceDetail from '@/views/deviceManage/deviceDetail'
+  import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+  import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+  import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+  import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
-const cameraTypes = [4, 5, 8, 9, 10, 11]
-const fenceTypes = [6, 7]
-const smokingTypes = [2]
-const temperatureTypes = [1]
-const soundTypes = [12]
-export default {
-  name: 'CtrlOverview',
-  components: { DeviceDetail },
-  data() {
-    return {
-      title: getProject().title,
-      bgImageSrc: tg_main,
-      devListParams: {
-        picture: '1',
-        deviceTypes: []
-      },
-      dev: {
-        alarm: 0,
-        onLine: 0,
-        closed: 0,
-        offLine: 0
-      },
-      imgSizeOriginal: {
-        width: 2245,
-        height: 1586
-      }, // 图片原尺寸
-      imgSize: {
-        width: 2245,
-        height: 1586
-      }, // 图片显示尺寸
-      winSize: {
-        width: 1440,
-        height: 789
-      }, // 屏幕窗口尺寸
-      halfLeft: 0,
-      footLeft: 0, // footer部分设备类型按钮偏移量
-      showFence: true, // 是否显示电子围栏按钮
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
-      showSubTabGuider: false, // 是否显示二级菜单指引
-      showFloorThree: false, // 是否显示三层
-      showFloorFour: false, // 是否显示四层
-      showDevDetail: false, // 是否显示设备详情
-      alarmList: [], // 报警列表
-      alarmColumns: [
-        {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center'
+  const cameraTypes = [4, 5, 8, 9, 10, 11]
+  const fenceTypes = [6, 7]
+  const smokingTypes = [2]
+  const temperatureTypes = [1]
+  const soundTypes = [12]
+  export default {
+    name: 'CtrlOverview',
+    components: { DeviceDetail },
+    data() {
+      return {
+        title: getProject().title,
+        bgImageSrc: tg_main,
+        devListParams: {
+          picture: '1',
+          deviceTypes: []
         },
-        {
-          text: '报警内容',
-          value: 'alarmContent',
-          align: 'center'
+        dev: {
+          alarm: 0,
+          onLine: 0,
+          closed: 0,
+          offLine: 0
         },
-        {
-          text: '报警时间',
-          value: 'alarmTime',
-          align: 'center',
-          width: 165
-        }
-      ], // 报警列表显示列
-      tableShow: true, // 是否显示告警列表
-      devList: [], // 设备列表（在地图上显示）
-      dataForm: {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
-      }, // 设备详情表单
-      isFence: false, // 是否电子围栏设备
-      checkDevType: [true, false, false, false, false, false] // 选中设备类型
-    }
-  },
-  mounted() {
-    this.initWindowSize()
-
-    this.fetchData()
-    this.fetchAlarmNowData()
-
-    const that = this
-    window.onresize = function() {
-      that.initWindowSize()
-      that.getBgImageSize()
-      // that.reDrawDevs()
-    }
-  },
-  methods: {
-    // 获取窗口大小
-    initWindowSize() {
-      // 获取窗体尺寸
-      this.winSize = {
-        width: document.documentElement.clientWidth,
-        height: document.documentElement.clientHeight
-      }
-
-      // 设置footer部分居中显示
-      if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 3 * 210) / 2
-      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 3 * 155) / 2
-      }
-    },
-    // 获取图像大小
-    getBgImageSize() {
-      // 获取图片尺寸
-      this.imgSize = {
-        width: this.$refs['bgImg'].width,
-        height: this.$refs['bgImg'].height
-      }
-      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
-    },
-    // 重新绘制设备点位
-    reDrawDevs() {
-      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
-
-      // 调整球机的设备位置
-      const that = this
-      this.devList.forEach(function(item) {
-        const point = document.getElementById(item.id)
-
-        if (point !== null) {
-          if (item.x !== '' && item.y !== '') {
-            point.style.position = 'absolute'
-            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
-            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
-          } else {
-            point.style.display = 'none'
+        imgSizeOriginal: {
+          width: 2245,
+          height: 1586
+        }, // 图片原尺寸
+        imgSize: {
+          width: 2245,
+          height: 1586
+        }, // 图片显示尺寸
+        winSize: {
+          width: 1440,
+          height: 789
+        }, // 屏幕窗口尺寸
+        halfLeft: 0,
+        footLeft: 0, // footer部分设备类型按钮偏移量
+        showFence: true, // 是否显示电子围栏按钮
+        showTemp: false, // 是否显示温湿度按钮
+        showSmoking: false, // 是否显示烟感按钮
+        showSound: false, // 是否显示声光报警按钮
+        showSubTabGuider: false, // 是否显示二级菜单指引
+        showFloorThree: false, // 是否显示三层
+        showFloorFour: false, // 是否显示四层
+        showDevDetail: false, // 是否显示设备详情
+        alarmList: [], // 报警列表
+        alarmColumns: [
+          {
+            text: '设备编号',
+            value: 'devcode',
+            align: 'center'
+          },
+          {
+            text: '报警内容',
+            value: 'alarmContent',
+            align: 'center'
+          },
+          {
+            text: '报警时间',
+            value: 'alarmTime',
+            align: 'center',
+            width: 165
           }
-        }
-      })
-    },
-    // 获取设备列表
-    fetchDeviceData() {
-      overviewDeviceList(this.devListParams).then(response => {
-        if (response.code === 200) {
-          const that = this
-          this.devList = []
-          response.data.forEach(dev => {
-            if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
-            }
-          })
-        }
-      })
-    },
-    // 平面图就绪时执行函数
-    backgroundImageReady() {
-      this.getBgImageSize()
-      this.fetchDeviceData()
-    },
-    // 获取设备状态统计值
-    fetchData() {
-      overviewDeviceStatus().then(response => {
-        if (response.code === 200) {
-          this.dev.alarm = response.data.alarm.length
-          this.dev.onLine = response.data.onLine.length
-          this.dev.closed = response.data.closed.length
-          this.dev.offLine = response.data.offLine.length
-        }
-      })
-    },
-    // 获取报警列表
-    fetchAlarmNowData() {
-      alarmListOverview().then(response => {
-        if (response.code === 200) {
-          this.alarmList = response.data
-        } else {
-          this.$message.error(response.message)
-        }
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    backToIndex() {
-      this.$router.push('/ctrl')
-    },
-    // 选择设备类型
-    selectDevByType(type, event) {
-      // 遍历所有的设备类型
-      const devTypes = document.querySelectorAll('.dev-icon')
-      for (let i = 0; i < devTypes.length; i++) {
-        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
-          devTypes[i].className = 'dev-icon el-col el-col-24'
-        }
-      }
-      this.checkDevType = [false, false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
-      }
-
-      if (type === 'all') {
-        this.devListParams.deviceTypes = []
-        this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
-        this.checkDevType[1] = true
-      } else if (type === 'fence') {
-        this.devListParams.deviceTypes = fenceTypes.toString()
-        this.checkDevType[2] = true
-      } else if (type === 'temperature') {
-        this.devListParams.deviceTypes = temperatureTypes.toString()
-        this.checkDevType[3] = true
-      } else if (type === 'smoking') {
-        this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
-      } else if (type === 'sound') {
-        this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
-      }
-      this.fetchDeviceData()
-    },
-    // 点击平面图一级按钮
-    selectMapTab(tab, event) {
-      // 遍历所有的地图
-      const mapTabs = document.querySelectorAll('.map-index-button')
-      for (let i = 0; i < mapTabs.length; i++) {
-        if (mapTabs[i].className.indexOf('index-selected') > -1) {
-          mapTabs[i].className = 'map-index-button'
-        }
-      }
-
-      // 添加选中的样式
-      event.currentTarget.className += ' index-selected'
-
-      // 选中三层
-      if (tab === 'three') {
-        this.showSubTabGuider = true
-        this.showFloorThree = true
-        this.showFloorFour = false
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-3'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '135px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '185px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '340px'
-          this.$refs['sub-tab-floor-3'].style.top = '220px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '102px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '140px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '245px'
-          this.$refs['sub-tab-floor-3'].style.top = '170px'
-        }
-      } else if (tab === 'four') {
-        this.showSubTabGuider = true
-        this.showFloorThree = false
-        this.showFloorFour = true
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '210px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '260px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '300px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '350px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '158px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '196px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '226px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '266px'
-        }
-      } else {
-        this.changeMap('tg_main')
+        ], // 报警列表显示列
+        tableShow: true, // 是否显示告警列表
+        devList: [], // 设备列表（在地图上显示）
+        dataForm: {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }, // 设备详情表单
+        isFence: false, // 是否电子围栏设备
+        itemColor: '#f58a88',
+        checkDevType: [true, false, false, false, false, false] // 选中设备类型
       }
     },
-    // 切换地图
-    changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
+    mounted() {
+      this.initWindowSize()
 
-      this.showSubTabGuider = false
-      this.showFloorThree = false
-      this.showFloorFour = false
+      this.fetchData()
+      this.fetchAlarmNowData()
 
-      if (index === 'tg_main') {
-        this.bgImageSrc = tg_main
-        this.devListParams.picture = '1'
+      const that = this
+      window.onresize = function() {
+        that.initWindowSize()
+        that.getBgImageSize()
+        // that.reDrawDevs()
+      }
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.selectDevByType(key,undefined)
+      },
+      // 获取窗口大小
+      initWindowSize() {
+        // 获取窗体尺寸
+        this.winSize = {
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        }
 
-        this.showFence = true // 显示电子围栏
-        this.showTemp = false // 隐藏温湿度设备
-        this.showSound = false // 隐藏声光报警设备
-        this.showSmoking = false // 隐藏烟感设备
+        // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
+      },
+      // 获取图像大小
+      getBgImageSize() {
+        // 获取图片尺寸
+        this.imgSize = {
+          width: this.$refs['bgImg'].width,
+          height: this.$refs['bgImg'].height
+        }
+        this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+      },
+      // 重新绘制设备点位
+      reDrawDevs() {
+        const halfLeft = (this.winSize.width - this.imgSize.width) / 2
 
-        // 将二级菜单的指引区隐藏
+        // 调整球机的设备位置
+        const that = this
+        this.devList.forEach(function(item) {
+          const point = document.getElementById(item.id)
+
+          if (point !== null) {
+            if (item.x !== '' && item.y !== '') {
+              point.style.position = 'absolute'
+              point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+              point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+            } else {
+              point.style.display = 'none'
+            }
+          }
+        })
+      },
+      // 获取设备列表
+      fetchDeviceData() {
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                that.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      // 平面图就绪时执行函数
+      backgroundImageReady() {
+        this.getBgImageSize()
+        this.fetchDeviceData()
+      },
+      // 获取设备状态统计值
+      fetchData() {
+        overviewDeviceStatus().then(response => {
+          if (response.code === 200) {
+            this.dev.alarm = response.data.alarm.length
+            this.dev.onLine = response.data.onLine.length
+            this.dev.closed = response.data.closed.length
+            this.dev.offLine = response.data.offLine.length
+          }
+        })
+      },
+      // 获取报警列表
+      fetchAlarmNowData() {
+        alarmListOverview().then(response => {
+          if (response.code === 200) {
+            this.alarmList = response.data
+          } else {
+            this.$message.error(response.message)
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      backToIndex() {
+        this.$router.push('/ctrl')
+      },
+      // 选择设备类型
+      selectDevByType(type, event) {
+        // 遍历所有的设备类型
+        const devTypes = document.querySelectorAll('.dev-icon')
+        for (let i = 0; i < devTypes.length; i++) {
+          if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+            devTypes[i].className = 'dev-icon el-col el-col-24'
+          }
+        }
+        this.checkDevType = [false, false, false, false, false, false]
+        if(type.length>2){
+          // 添加选中的样式
+          if (typeof event === 'undefined') {
+            devTypes[0].className += ' dev-type-selected'
+          } else {
+            event.currentTarget.className += ' dev-type-selected'
+          }
+        }
+
+        if (type === 'all') {
+          this.devListParams.deviceTypes = []
+          this.checkDevType[0] = true
+        } else if (type === 'camera') {
+          this.devListParams.deviceTypes = cameraTypes.toString()
+          this.checkDevType[1] = true
+        } else if (type === 'fence') {
+          this.devListParams.deviceTypes = fenceTypes.toString()
+          this.checkDevType[2] = true
+        } else if (type === 'temperature') {
+          this.devListParams.deviceTypes = temperatureTypes.toString()
+          this.checkDevType[3] = true
+        } else if (type === 'smoking') {
+          this.devListParams.deviceTypes = smokingTypes.toString()
+          this.checkDevType[4] = true
+        } else if (type === 'sound') {
+          this.devListParams.deviceTypes = soundTypes.toString()
+          this.checkDevType[5] = true
+        }else if(type === '4'){
+          this.devListParams.deviceTypes = '4'
+          this.checkDevType[1] = true
+        }else if(type === '5'){
+          this.devListParams.deviceTypes = '5'
+          this.checkDevType[1] = true
+        }else if(type === '8'){
+          this.devListParams.deviceTypes = '8'
+          this.checkDevType[1] = true
+        }else if(type === '9'){
+          this.devListParams.deviceTypes = '9'
+          this.checkDevType[1] = true
+        }else if(type === '10'){
+          this.devListParams.deviceTypes = '10'
+          this.checkDevType[1] = true
+        }else if(type === '11'){
+          this.devListParams.deviceTypes = '11'
+          this.checkDevType[1] = true
+        }
+        this.fetchDeviceData()
+        if(this.checkDevType[1]){
+          this.itemColor = '#f58a88'
+        }else{
+          this.itemColor = '#00D2FF'
+        }
+      },
+      // 点击平面图一级按钮
+      selectMapTab(tab, event) {
+        // 遍历所有的地图
+        const mapTabs = document.querySelectorAll('.map-index-button')
+        for (let i = 0; i < mapTabs.length; i++) {
+          if (mapTabs[i].className.indexOf('index-selected') > -1) {
+            mapTabs[i].className = 'map-index-button'
+          }
+        }
+
+        // 添加选中的样式
+        event.currentTarget.className += ' index-selected'
+
+        // 选中三层
+        if (tab === 'three') {
+          this.showSubTabGuider = true
+          this.showFloorThree = true
+          this.showFloorFour = false
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '135px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '185px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '340px'
+            this.$refs['sub-tab-floor-3'].style.top = '220px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '102px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '140px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '245px'
+            this.$refs['sub-tab-floor-3'].style.top = '170px'
+          }
+        } else if (tab === 'four') {
+          this.showSubTabGuider = true
+          this.showFloorThree = false
+          this.showFloorFour = true
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '210px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '260px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '158px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '196px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+          }
+        } else {
+          this.changeMap('tg_main')
+        }
+      },
+      // 切换地图
+      changeMap(index) {
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-      } else if (index === 'tg_3_1') {
-        this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      } else if (index === 'tg_4_1') {
-        this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
-        this.imgSizeOriginal = { width: 2218, height: 2169 }
+        if (index === 'tg_main') {
+          this.bgImageSrc = tg_main
+          this.devListParams.picture = '1'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = true // 显示温湿度
-        this.showSmoking = true // 显示烟感
-        this.showSound = true // 显示声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 5 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 5 * 155) / 2
-        }
-      } else if (index === 'tg_4_5') {
-        this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      }
-
-      this.selectDevByType('all')
-    },
-    // 查询并显示设备详情
-    detailDev(dev, event) {
-      this.resetDevDetail()
-      getDetailDevice(dev.id).then(response => {
-        if (response.code === 200) {
-          this.dataForm = {
-            id: dev.id,
-            name: dev.name,
-            devcode: dev.devcode,
-            typeName: response.data.typeName,
-            model: dev.model,
-            onlineStatusName: response.data.onlineStatusName,
-            position: dev.position,
-            installDate: dev.installDate,
-            inOutName: response.data.inOutName,
-            deviceStatusName: response.data.deviceStatusName
+          this.showFence = true // 显示电子围栏
+          this.showTemp = false // 隐藏温湿度设备
+          this.showSound = false // 隐藏声光报警设备
+          this.showSmoking = false // 隐藏烟感设备
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 3 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 3 * 155) / 2
           }
 
-          // 电子围栏设备有开启字段
-          if (dev.typeName.indexOf('电子围栏') >= 0) {
-            this.isFence = true
+          // 将二级菜单的指引区隐藏
+          this.showSubTabGuider = false
+          this.showFloorThree = false
+          this.showFloorFour = false
+        } else if (index === 'tg_3_1') {
+          this.bgImageSrc = tg_3_1
+          this.devListParams.picture = '2'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
           }
-        } else {
-          this.$message.error(response.message)
+        } else if (index === 'tg_4_1') {
+          this.bgImageSrc = tg_4_1
+          this.devListParams.picture = '3'
+          this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = true // 显示温湿度
+          this.showSmoking = true // 显示烟感
+          this.showSound = true // 显示声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 5 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 5 * 155) / 2
+          }
+        } else if (index === 'tg_4_5') {
+          this.bgImageSrc = tg_4_5
+          this.devListParams.picture = '4'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
+          }
         }
-      })
 
-      // 弹窗显示设备详情
-      const targetDev = event.currentTarget // 取到点击到的设备图标div
+        this.selectDevByType('all')
+      },
+      // 查询并显示设备详情
+      detailDev(dev, event) {
+        this.resetDevDetail()
+        getDetailDevice(dev.id).then(response => {
+          if (response.code === 200) {
+            this.dataForm = {
+              id: dev.id,
+              name: dev.name,
+              devcode: dev.devcode,
+              typeName: response.data.typeName,
+              model: dev.model,
+              onlineStatusName: response.data.onlineStatusName,
+              position: dev.position,
+              installDate: dev.installDate,
+              inOutName: response.data.inOutName,
+              deviceStatusName: response.data.deviceStatusName
+            }
 
-      this.showDevDetail = true
-      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
-      top = top + 100
-      this.$refs['dev-detail-block'].style.position = 'absolute'
-      this.$refs['dev-detail-block'].style.top = top + 'px'
-      this.$refs['dev-detail-block'].style.left = targetDev.style.left
-    },
-    // 点击报警列表
-    alarmRowClick(dev, column, event) {
+            // 电子围栏设备有开启字段
+            if (dev.typeName.indexOf('电子围栏') >= 0) {
+              this.isFence = true
+            }
+          } else {
+            this.$message.error(response.message)
+          }
+        })
 
-    },
-    // 清除设备详情
-    resetDevDetail() {
-      this.dataForm = {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+        this.showDevDetail = true
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['dev-detail-block'].style.position = 'absolute'
+        this.$refs['dev-detail-block'].style.top = top + 'px'
+        this.$refs['dev-detail-block'].style.left = targetDev.style.left
+      },
+      // 点击报警列表
+      alarmRowClick(dev, column, event) {
+
+      },
+      // 清除设备详情
+      resetDevDetail() {
+        this.dataForm = {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }
       }
     }
   }
-}
 </script>
 
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+   .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 
   .main-page {
@@ -714,7 +777,30 @@
     background-size: contain;
     @extend .point;
   }
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .statis-block {
     text-align: center;
     margin-top: 20px;

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index b06847f..f452ea5 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -102,10 +102,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
@@ -151,11 +171,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+      <!--<el-col :span="24">设备名称-->
+      <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+      <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -192,452 +212,495 @@
 </template>
 
 <script>
-import { getProject } from '@/utils/baseConfig'
-import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
-import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+  import { getProject } from '@/utils/baseConfig'
+  import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
+  import { alarmListOverview } from '@/api/alarm'
+  import DeviceDetail from '@/views/deviceManage/deviceDetail'
+  import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+  import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+  import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+  import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
-const cameraTypes = [4, 5, 8, 9, 10, 11]
-const fenceTypes = [6, 7]
-const smokingTypes = [2]
-const temperatureTypes = [1]
-const soundTypes = [12]
-export default {
-  name: 'CtrlOverview',
-  components: { DeviceDetail },
-  data() {
-    return {
-      title: getProject().title,
-      bgImageSrc: tg_main,
-      devListParams: {
-        picture: '1',
-        deviceTypes: []
-      },
-      dev: {
-        alarm: 0,
-        onLine: 0,
-        closed: 0,
-        offLine: 0
-      },
-      imgSizeOriginal: {
-        width: 2245,
-        height: 1586
-      }, // 图片原尺寸
-      imgSize: {
-        width: 2245,
-        height: 1586
-      }, // 图片显示尺寸
-      winSize: {
-        width: 1440,
-        height: 789
-      }, // 屏幕窗口尺寸
-      halfLeft: 0,
-      footLeft: 0, // footer部分设备类型按钮偏移量
-      showFence: true, // 是否显示电子围栏按钮
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
-      showSubTabGuider: false, // 是否显示二级菜单指引
-      showFloorThree: false, // 是否显示三层
-      showFloorFour: false, // 是否显示四层
-      showDevDetail: false, // 是否显示设备详情
-      alarmList: [], // 报警列表
-      alarmColumns: [
-        {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center'
+  const cameraTypes = [4, 5, 8, 9, 10, 11]
+  const fenceTypes = [6, 7]
+  const smokingTypes = [2]
+  const temperatureTypes = [1]
+  const soundTypes = [12]
+  export default {
+    name: 'CtrlOverview',
+    components: { DeviceDetail },
+    data() {
+      return {
+        title: getProject().title,
+        bgImageSrc: tg_main,
+        devListParams: {
+          picture: '1',
+          deviceTypes: []
         },
-        {
-          text: '报警内容',
-          value: 'alarmContent',
-          align: 'center'
+        dev: {
+          alarm: 0,
+          onLine: 0,
+          closed: 0,
+          offLine: 0
         },
-        {
-          text: '报警时间',
-          value: 'alarmTime',
-          align: 'center',
-          width: 165
-        }
-      ], // 报警列表显示列
-      tableShow: true, // 是否显示告警列表
-      devList: [], // 设备列表（在地图上显示）
-      dataForm: {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
-      }, // 设备详情表单
-      isFence: false, // 是否电子围栏设备
-      checkDevType: [true, false, false, false, false, false] // 选中设备类型
-    }
-  },
-  mounted() {
-    this.initWindowSize()
-
-    this.fetchData()
-    this.fetchAlarmNowData()
-
-    const that = this
-    window.onresize = function() {
-      that.initWindowSize()
-      that.getBgImageSize()
-      // that.reDrawDevs()
-    }
-  },
-  methods: {
-    // 获取窗口大小
-    initWindowSize() {
-      // 获取窗体尺寸
-      this.winSize = {
-        width: document.documentElement.clientWidth,
-        height: document.documentElement.clientHeight
-      }
-
-      // 设置footer部分居中显示
-      if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 3 * 210) / 2
-      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 3 * 155) / 2
-      }
-    },
-    // 获取图像大小
-    getBgImageSize() {
-      // 获取图片尺寸
-      this.imgSize = {
-        width: this.$refs['bgImg'].width,
-        height: this.$refs['bgImg'].height
-      }
-      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
-    },
-    // 重新绘制设备点位
-    reDrawDevs() {
-      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
-
-      // 调整球机的设备位置
-      const that = this
-      this.devList.forEach(function(item) {
-        const point = document.getElementById(item.id)
-
-        if (point !== null) {
-          if (item.x !== '' && item.y !== '') {
-            point.style.position = 'absolute'
-            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
-            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
-          } else {
-            point.style.display = 'none'
+        imgSizeOriginal: {
+          width: 2245,
+          height: 1586
+        }, // 图片原尺寸
+        imgSize: {
+          width: 2245,
+          height: 1586
+        }, // 图片显示尺寸
+        winSize: {
+          width: 1440,
+          height: 789
+        }, // 屏幕窗口尺寸
+        halfLeft: 0,
+        footLeft: 0, // footer部分设备类型按钮偏移量
+        showFence: true, // 是否显示电子围栏按钮
+        showTemp: false, // 是否显示温湿度按钮
+        showSmoking: false, // 是否显示烟感按钮
+        showSound: false, // 是否显示声光报警按钮
+        showSubTabGuider: false, // 是否显示二级菜单指引
+        showFloorThree: false, // 是否显示三层
+        showFloorFour: false, // 是否显示四层
+        showDevDetail: false, // 是否显示设备详情
+        alarmList: [], // 报警列表
+        alarmColumns: [
+          {
+            text: '设备编号',
+            value: 'devcode',
+            align: 'center'
+          },
+          {
+            text: '报警内容',
+            value: 'alarmContent',
+            align: 'center'
+          },
+          {
+            text: '报警时间',
+            value: 'alarmTime',
+            align: 'center',
+            width: 165
           }
-        }
-      })
-    },
-    // 获取设备列表
-    fetchDeviceData() {
-      overviewDeviceList(this.devListParams).then(response => {
-        if (response.code === 200) {
-          const that = this
-          this.devList = []
-          response.data.forEach(dev => {
-            if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
-            }
-          })
-        }
-      })
-    },
-    // 平面图就绪时执行函数
-    backgroundImageReady() {
-      this.getBgImageSize()
-      this.fetchDeviceData()
-    },
-    // 获取设备状态统计值
-    fetchData() {
-      overviewDeviceStatus().then(response => {
-        if (response.code === 200) {
-          this.dev.alarm = response.data.alarm.length
-          this.dev.onLine = response.data.onLine.length
-          this.dev.closed = response.data.closed.length
-          this.dev.offLine = response.data.offLine.length
-        }
-      })
-    },
-    // 获取报警列表
-    fetchAlarmNowData() {
-      alarmListOverview().then(response => {
-        if (response.code === 200) {
-          this.alarmList = response.data
-        } else {
-          this.$message.error(response.message)
-        }
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    backToIndex() {
-      this.$router.push('/ctrl')
-    },
-    // 选择设备类型
-    selectDevByType(type, event) {
-      // 遍历所有的设备类型
-      const devTypes = document.querySelectorAll('.dev-icon')
-      for (let i = 0; i < devTypes.length; i++) {
-        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
-          devTypes[i].className = 'dev-icon el-col el-col-24'
-        }
-      }
-      this.checkDevType = [false, false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
-      }
-
-      if (type === 'all') {
-        this.devListParams.deviceTypes = []
-        this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
-        this.checkDevType[1] = true
-      } else if (type === 'fence') {
-        this.devListParams.deviceTypes = fenceTypes.toString()
-        this.checkDevType[2] = true
-      } else if (type === 'temperature') {
-        this.devListParams.deviceTypes = temperatureTypes.toString()
-        this.checkDevType[3] = true
-      } else if (type === 'smoking') {
-        this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
-      } else if (type === 'sound') {
-        this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
-      }
-      this.fetchDeviceData()
-    },
-    // 点击平面图一级按钮
-    selectMapTab(tab, event) {
-      // 遍历所有的地图
-      const mapTabs = document.querySelectorAll('.map-index-button')
-      for (let i = 0; i < mapTabs.length; i++) {
-        if (mapTabs[i].className.indexOf('index-selected') > -1) {
-          mapTabs[i].className = 'map-index-button'
-        }
-      }
-
-      // 添加选中的样式
-      event.currentTarget.className += ' index-selected'
-
-      // 选中三层
-      if (tab === 'three') {
-        this.showSubTabGuider = true
-        this.showFloorThree = true
-        this.showFloorFour = false
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-3'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '135px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '185px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '340px'
-          this.$refs['sub-tab-floor-3'].style.top = '220px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '102px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '140px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '245px'
-          this.$refs['sub-tab-floor-3'].style.top = '170px'
-        }
-      } else if (tab === 'four') {
-        this.showSubTabGuider = true
-        this.showFloorThree = false
-        this.showFloorFour = true
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '210px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '260px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '300px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '350px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '158px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '196px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '226px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '266px'
-        }
-      } else {
-        this.changeMap('tg_main')
+        ], // 报警列表显示列
+        tableShow: true, // 是否显示告警列表
+        devList: [], // 设备列表（在地图上显示）
+        dataForm: {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }, // 设备详情表单
+        isFence: false, // 是否电子围栏设备
+        itemColor: '#f58a88',
+        checkDevType: [true, false, false, false, false, false] // 选中设备类型
       }
     },
-    // 切换地图
-    changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
+    mounted() {
+      this.initWindowSize()
 
-      this.showSubTabGuider = false
-      this.showFloorThree = false
-      this.showFloorFour = false
+      this.fetchData()
+      this.fetchAlarmNowData()
 
-      if (index === 'tg_main') {
-        this.bgImageSrc = tg_main
-        this.devListParams.picture = '1'
+      const that = this
+      window.onresize = function() {
+        that.initWindowSize()
+        that.getBgImageSize()
+        // that.reDrawDevs()
+      }
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.selectDevByType(key,undefined)
+      },
+      // 获取窗口大小
+      initWindowSize() {
+        // 获取窗体尺寸
+        this.winSize = {
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        }
 
-        this.showFence = true // 显示电子围栏
-        this.showTemp = false // 隐藏温湿度设备
-        this.showSound = false // 隐藏声光报警设备
-        this.showSmoking = false // 隐藏烟感设备
+        // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
+      },
+      // 获取图像大小
+      getBgImageSize() {
+        // 获取图片尺寸
+        this.imgSize = {
+          width: this.$refs['bgImg'].width,
+          height: this.$refs['bgImg'].height
+        }
+        this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+      },
+      // 重新绘制设备点位
+      reDrawDevs() {
+        const halfLeft = (this.winSize.width - this.imgSize.width) / 2
 
-        // 将二级菜单的指引区隐藏
+        // 调整球机的设备位置
+        const that = this
+        this.devList.forEach(function(item) {
+          const point = document.getElementById(item.id)
+
+          if (point !== null) {
+            if (item.x !== '' && item.y !== '') {
+              point.style.position = 'absolute'
+              point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+              point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+            } else {
+              point.style.display = 'none'
+            }
+          }
+        })
+      },
+      // 获取设备列表
+      fetchDeviceData() {
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                that.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      // 平面图就绪时执行函数
+      backgroundImageReady() {
+        this.getBgImageSize()
+        this.fetchDeviceData()
+      },
+      // 获取设备状态统计值
+      fetchData() {
+        overviewDeviceStatus().then(response => {
+          if (response.code === 200) {
+            this.dev.alarm = response.data.alarm.length
+            this.dev.onLine = response.data.onLine.length
+            this.dev.closed = response.data.closed.length
+            this.dev.offLine = response.data.offLine.length
+          }
+        })
+      },
+      // 获取报警列表
+      fetchAlarmNowData() {
+        alarmListOverview().then(response => {
+          if (response.code === 200) {
+            this.alarmList = response.data
+          } else {
+            this.$message.error(response.message)
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      backToIndex() {
+        this.$router.push('/ctrl')
+      },
+      // 选择设备类型
+      selectDevByType(type, event) {
+        // 遍历所有的设备类型
+        const devTypes = document.querySelectorAll('.dev-icon')
+        for (let i = 0; i < devTypes.length; i++) {
+          if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+            devTypes[i].className = 'dev-icon el-col el-col-24'
+          }
+        }
+        this.checkDevType = [false, false, false, false, false, false]
+        if(type.length>2){
+          // 添加选中的样式
+          if (typeof event === 'undefined') {
+            devTypes[0].className += ' dev-type-selected'
+          } else {
+            event.currentTarget.className += ' dev-type-selected'
+          }
+        }
+
+        if (type === 'all') {
+          this.devListParams.deviceTypes = []
+          this.checkDevType[0] = true
+        } else if (type === 'camera') {
+          this.devListParams.deviceTypes = cameraTypes.toString()
+          this.checkDevType[1] = true
+        } else if (type === 'fence') {
+          this.devListParams.deviceTypes = fenceTypes.toString()
+          this.checkDevType[2] = true
+        } else if (type === 'temperature') {
+          this.devListParams.deviceTypes = temperatureTypes.toString()
+          this.checkDevType[3] = true
+        } else if (type === 'smoking') {
+          this.devListParams.deviceTypes = smokingTypes.toString()
+          this.checkDevType[4] = true
+        } else if (type === 'sound') {
+          this.devListParams.deviceTypes = soundTypes.toString()
+          this.checkDevType[5] = true
+        }else if(type === '4'){
+          this.devListParams.deviceTypes = '4'
+          this.checkDevType[1] = true
+        }else if(type === '5'){
+          this.devListParams.deviceTypes = '5'
+          this.checkDevType[1] = true
+        }else if(type === '8'){
+          this.devListParams.deviceTypes = '8'
+          this.checkDevType[1] = true
+        }else if(type === '9'){
+          this.devListParams.deviceTypes = '9'
+          this.checkDevType[1] = true
+        }else if(type === '10'){
+          this.devListParams.deviceTypes = '10'
+          this.checkDevType[1] = true
+        }else if(type === '11'){
+          this.devListParams.deviceTypes = '11'
+          this.checkDevType[1] = true
+        }
+        this.fetchDeviceData()
+        if(this.checkDevType[1]){
+          this.itemColor = '#f58a88'
+        }else{
+          this.itemColor = '#00D2FF'
+        }
+      },
+      // 点击平面图一级按钮
+      selectMapTab(tab, event) {
+        // 遍历所有的地图
+        const mapTabs = document.querySelectorAll('.map-index-button')
+        for (let i = 0; i < mapTabs.length; i++) {
+          if (mapTabs[i].className.indexOf('index-selected') > -1) {
+            mapTabs[i].className = 'map-index-button'
+          }
+        }
+
+        // 添加选中的样式
+        event.currentTarget.className += ' index-selected'
+
+        // 选中三层
+        if (tab === 'three') {
+          this.showSubTabGuider = true
+          this.showFloorThree = true
+          this.showFloorFour = false
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '135px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '185px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '340px'
+            this.$refs['sub-tab-floor-3'].style.top = '220px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '102px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '140px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '245px'
+            this.$refs['sub-tab-floor-3'].style.top = '170px'
+          }
+        } else if (tab === 'four') {
+          this.showSubTabGuider = true
+          this.showFloorThree = false
+          this.showFloorFour = true
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '210px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '260px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '158px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '196px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+          }
+        } else {
+          this.changeMap('tg_main')
+        }
+      },
+      // 切换地图
+      changeMap(index) {
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-      } else if (index === 'tg_3_1') {
-        this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      } else if (index === 'tg_4_1') {
-        this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
-        this.imgSizeOriginal = { width: 2218, height: 2169 }
+        if (index === 'tg_main') {
+          this.bgImageSrc = tg_main
+          this.devListParams.picture = '1'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = true // 显示温湿度
-        this.showSmoking = true // 显示烟感
-        this.showSound = true // 显示声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 5 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 5 * 155) / 2
-        }
-      } else if (index === 'tg_4_5') {
-        this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      }
-
-      this.selectDevByType('all')
-    },
-    // 查询并显示设备详情
-    detailDev(dev, event) {
-      this.resetDevDetail()
-      getDetailDevice(dev.id).then(response => {
-        if (response.code === 200) {
-          this.dataForm = {
-            id: dev.id,
-            name: dev.name,
-            devcode: dev.devcode,
-            typeName: response.data.typeName,
-            model: dev.model,
-            onlineStatusName: response.data.onlineStatusName,
-            position: dev.position,
-            installDate: dev.installDate,
-            inOutName: response.data.inOutName,
-            deviceStatusName: response.data.deviceStatusName
+          this.showFence = true // 显示电子围栏
+          this.showTemp = false // 隐藏温湿度设备
+          this.showSound = false // 隐藏声光报警设备
+          this.showSmoking = false // 隐藏烟感设备
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 3 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 3 * 155) / 2
           }
 
-          // 电子围栏设备有开启字段
-          if (dev.typeName.indexOf('电子围栏') >= 0) {
-            this.isFence = true
+          // 将二级菜单的指引区隐藏
+          this.showSubTabGuider = false
+          this.showFloorThree = false
+          this.showFloorFour = false
+        } else if (index === 'tg_3_1') {
+          this.bgImageSrc = tg_3_1
+          this.devListParams.picture = '2'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
           }
-        } else {
-          this.$message.error(response.message)
+        } else if (index === 'tg_4_1') {
+          this.bgImageSrc = tg_4_1
+          this.devListParams.picture = '3'
+          this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = true // 显示温湿度
+          this.showSmoking = true // 显示烟感
+          this.showSound = true // 显示声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 5 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 5 * 155) / 2
+          }
+        } else if (index === 'tg_4_5') {
+          this.bgImageSrc = tg_4_5
+          this.devListParams.picture = '4'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
+          }
         }
-      })
 
-      // 弹窗显示设备详情
-      const targetDev = event.currentTarget // 取到点击到的设备图标div
+        this.selectDevByType('all')
+      },
+      // 查询并显示设备详情
+      detailDev(dev, event) {
+        this.resetDevDetail()
+        getDetailDevice(dev.id).then(response => {
+          if (response.code === 200) {
+            this.dataForm = {
+              id: dev.id,
+              name: dev.name,
+              devcode: dev.devcode,
+              typeName: response.data.typeName,
+              model: dev.model,
+              onlineStatusName: response.data.onlineStatusName,
+              position: dev.position,
+              installDate: dev.installDate,
+              inOutName: response.data.inOutName,
+              deviceStatusName: response.data.deviceStatusName
+            }
 
-      this.showDevDetail = true
-      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
-      top = top + 100
-      this.$refs['dev-detail-block'].style.position = 'absolute'
-      this.$refs['dev-detail-block'].style.top = top + 'px'
-      this.$refs['dev-detail-block'].style.left = targetDev.style.left
-    },
-    // 点击报警列表
-    alarmRowClick(dev, column, event) {
+            // 电子围栏设备有开启字段
+            if (dev.typeName.indexOf('电子围栏') >= 0) {
+              this.isFence = true
+            }
+          } else {
+            this.$message.error(response.message)
+          }
+        })
 
-    },
-    // 清除设备详情
-    resetDevDetail() {
-      this.dataForm = {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+        this.showDevDetail = true
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['dev-detail-block'].style.position = 'absolute'
+        this.$refs['dev-detail-block'].style.top = top + 'px'
+        this.$refs['dev-detail-block'].style.left = targetDev.style.left
+      },
+      // 点击报警列表
+      alarmRowClick(dev, column, event) {
+
+      },
+      // 清除设备详情
+      resetDevDetail() {
+        this.dataForm = {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }
       }
     }
   }
-}
 </script>
 
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+   .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 
   .main-page {
@@ -714,7 +777,30 @@
     background-size: contain;
     @extend .point;
   }
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .statis-block {
     text-align: center;
     margin-top: 20px;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 6bb09ac..56c1970 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -2,18 +2,29 @@
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
-            <!--<span>{{ dataForm.name }}</span>-->
-          </el-form-item>
-        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.name" disabled type="text"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
             <el-input v-model.trim="dataForm.name" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="在线状态">
+            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
+          </el-form-item>
+        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row :gutter="20">
@@ -31,20 +42,20 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态">
-            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item v-show="isFence" label="是否开启">
-            <el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="在线状态">-->
+            <!--<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.onlineStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item v-show="isFence" label="是否开启">-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row :gutter="20">
         <el-col :span="12">
@@ -61,14 +72,14 @@
         </el-col>
       </el-row>
 
-      <el-row v-show="isDoor" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="进出营">
-            <el-input v-model.trim="dataForm.inOutName" disabled type="text"/>
-            <!--<span>{{ dataForm.inOutName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row v-show="isDoor" :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row v-show="isIrisDev" :gutter="20">
         <el-col :span="24">

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index b06847f..f452ea5 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -102,10 +102,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
@@ -151,11 +171,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+      <!--<el-col :span="24">设备名称-->
+      <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+      <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -192,452 +212,495 @@
 </template>
 
 <script>
-import { getProject } from '@/utils/baseConfig'
-import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
-import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+  import { getProject } from '@/utils/baseConfig'
+  import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
+  import { alarmListOverview } from '@/api/alarm'
+  import DeviceDetail from '@/views/deviceManage/deviceDetail'
+  import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+  import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+  import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+  import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
-const cameraTypes = [4, 5, 8, 9, 10, 11]
-const fenceTypes = [6, 7]
-const smokingTypes = [2]
-const temperatureTypes = [1]
-const soundTypes = [12]
-export default {
-  name: 'CtrlOverview',
-  components: { DeviceDetail },
-  data() {
-    return {
-      title: getProject().title,
-      bgImageSrc: tg_main,
-      devListParams: {
-        picture: '1',
-        deviceTypes: []
-      },
-      dev: {
-        alarm: 0,
-        onLine: 0,
-        closed: 0,
-        offLine: 0
-      },
-      imgSizeOriginal: {
-        width: 2245,
-        height: 1586
-      }, // 图片原尺寸
-      imgSize: {
-        width: 2245,
-        height: 1586
-      }, // 图片显示尺寸
-      winSize: {
-        width: 1440,
-        height: 789
-      }, // 屏幕窗口尺寸
-      halfLeft: 0,
-      footLeft: 0, // footer部分设备类型按钮偏移量
-      showFence: true, // 是否显示电子围栏按钮
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
-      showSubTabGuider: false, // 是否显示二级菜单指引
-      showFloorThree: false, // 是否显示三层
-      showFloorFour: false, // 是否显示四层
-      showDevDetail: false, // 是否显示设备详情
-      alarmList: [], // 报警列表
-      alarmColumns: [
-        {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center'
+  const cameraTypes = [4, 5, 8, 9, 10, 11]
+  const fenceTypes = [6, 7]
+  const smokingTypes = [2]
+  const temperatureTypes = [1]
+  const soundTypes = [12]
+  export default {
+    name: 'CtrlOverview',
+    components: { DeviceDetail },
+    data() {
+      return {
+        title: getProject().title,
+        bgImageSrc: tg_main,
+        devListParams: {
+          picture: '1',
+          deviceTypes: []
         },
-        {
-          text: '报警内容',
-          value: 'alarmContent',
-          align: 'center'
+        dev: {
+          alarm: 0,
+          onLine: 0,
+          closed: 0,
+          offLine: 0
         },
-        {
-          text: '报警时间',
-          value: 'alarmTime',
-          align: 'center',
-          width: 165
-        }
-      ], // 报警列表显示列
-      tableShow: true, // 是否显示告警列表
-      devList: [], // 设备列表（在地图上显示）
-      dataForm: {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
-      }, // 设备详情表单
-      isFence: false, // 是否电子围栏设备
-      checkDevType: [true, false, false, false, false, false] // 选中设备类型
-    }
-  },
-  mounted() {
-    this.initWindowSize()
-
-    this.fetchData()
-    this.fetchAlarmNowData()
-
-    const that = this
-    window.onresize = function() {
-      that.initWindowSize()
-      that.getBgImageSize()
-      // that.reDrawDevs()
-    }
-  },
-  methods: {
-    // 获取窗口大小
-    initWindowSize() {
-      // 获取窗体尺寸
-      this.winSize = {
-        width: document.documentElement.clientWidth,
-        height: document.documentElement.clientHeight
-      }
-
-      // 设置footer部分居中显示
-      if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 3 * 210) / 2
-      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 3 * 155) / 2
-      }
-    },
-    // 获取图像大小
-    getBgImageSize() {
-      // 获取图片尺寸
-      this.imgSize = {
-        width: this.$refs['bgImg'].width,
-        height: this.$refs['bgImg'].height
-      }
-      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
-    },
-    // 重新绘制设备点位
-    reDrawDevs() {
-      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
-
-      // 调整球机的设备位置
-      const that = this
-      this.devList.forEach(function(item) {
-        const point = document.getElementById(item.id)
-
-        if (point !== null) {
-          if (item.x !== '' && item.y !== '') {
-            point.style.position = 'absolute'
-            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
-            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
-          } else {
-            point.style.display = 'none'
+        imgSizeOriginal: {
+          width: 2245,
+          height: 1586
+        }, // 图片原尺寸
+        imgSize: {
+          width: 2245,
+          height: 1586
+        }, // 图片显示尺寸
+        winSize: {
+          width: 1440,
+          height: 789
+        }, // 屏幕窗口尺寸
+        halfLeft: 0,
+        footLeft: 0, // footer部分设备类型按钮偏移量
+        showFence: true, // 是否显示电子围栏按钮
+        showTemp: false, // 是否显示温湿度按钮
+        showSmoking: false, // 是否显示烟感按钮
+        showSound: false, // 是否显示声光报警按钮
+        showSubTabGuider: false, // 是否显示二级菜单指引
+        showFloorThree: false, // 是否显示三层
+        showFloorFour: false, // 是否显示四层
+        showDevDetail: false, // 是否显示设备详情
+        alarmList: [], // 报警列表
+        alarmColumns: [
+          {
+            text: '设备编号',
+            value: 'devcode',
+            align: 'center'
+          },
+          {
+            text: '报警内容',
+            value: 'alarmContent',
+            align: 'center'
+          },
+          {
+            text: '报警时间',
+            value: 'alarmTime',
+            align: 'center',
+            width: 165
           }
-        }
-      })
-    },
-    // 获取设备列表
-    fetchDeviceData() {
-      overviewDeviceList(this.devListParams).then(response => {
-        if (response.code === 200) {
-          const that = this
-          this.devList = []
-          response.data.forEach(dev => {
-            if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
-            }
-          })
-        }
-      })
-    },
-    // 平面图就绪时执行函数
-    backgroundImageReady() {
-      this.getBgImageSize()
-      this.fetchDeviceData()
-    },
-    // 获取设备状态统计值
-    fetchData() {
-      overviewDeviceStatus().then(response => {
-        if (response.code === 200) {
-          this.dev.alarm = response.data.alarm.length
-          this.dev.onLine = response.data.onLine.length
-          this.dev.closed = response.data.closed.length
-          this.dev.offLine = response.data.offLine.length
-        }
-      })
-    },
-    // 获取报警列表
-    fetchAlarmNowData() {
-      alarmListOverview().then(response => {
-        if (response.code === 200) {
-          this.alarmList = response.data
-        } else {
-          this.$message.error(response.message)
-        }
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    backToIndex() {
-      this.$router.push('/ctrl')
-    },
-    // 选择设备类型
-    selectDevByType(type, event) {
-      // 遍历所有的设备类型
-      const devTypes = document.querySelectorAll('.dev-icon')
-      for (let i = 0; i < devTypes.length; i++) {
-        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
-          devTypes[i].className = 'dev-icon el-col el-col-24'
-        }
-      }
-      this.checkDevType = [false, false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
-      }
-
-      if (type === 'all') {
-        this.devListParams.deviceTypes = []
-        this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
-        this.checkDevType[1] = true
-      } else if (type === 'fence') {
-        this.devListParams.deviceTypes = fenceTypes.toString()
-        this.checkDevType[2] = true
-      } else if (type === 'temperature') {
-        this.devListParams.deviceTypes = temperatureTypes.toString()
-        this.checkDevType[3] = true
-      } else if (type === 'smoking') {
-        this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
-      } else if (type === 'sound') {
-        this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
-      }
-      this.fetchDeviceData()
-    },
-    // 点击平面图一级按钮
-    selectMapTab(tab, event) {
-      // 遍历所有的地图
-      const mapTabs = document.querySelectorAll('.map-index-button')
-      for (let i = 0; i < mapTabs.length; i++) {
-        if (mapTabs[i].className.indexOf('index-selected') > -1) {
-          mapTabs[i].className = 'map-index-button'
-        }
-      }
-
-      // 添加选中的样式
-      event.currentTarget.className += ' index-selected'
-
-      // 选中三层
-      if (tab === 'three') {
-        this.showSubTabGuider = true
-        this.showFloorThree = true
-        this.showFloorFour = false
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-3'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '135px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '185px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '340px'
-          this.$refs['sub-tab-floor-3'].style.top = '220px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '102px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '140px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '245px'
-          this.$refs['sub-tab-floor-3'].style.top = '170px'
-        }
-      } else if (tab === 'four') {
-        this.showSubTabGuider = true
-        this.showFloorThree = false
-        this.showFloorFour = true
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '210px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '260px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '300px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '350px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '158px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '196px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '226px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '266px'
-        }
-      } else {
-        this.changeMap('tg_main')
+        ], // 报警列表显示列
+        tableShow: true, // 是否显示告警列表
+        devList: [], // 设备列表（在地图上显示）
+        dataForm: {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }, // 设备详情表单
+        isFence: false, // 是否电子围栏设备
+        itemColor: '#f58a88',
+        checkDevType: [true, false, false, false, false, false] // 选中设备类型
       }
     },
-    // 切换地图
-    changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
+    mounted() {
+      this.initWindowSize()
 
-      this.showSubTabGuider = false
-      this.showFloorThree = false
-      this.showFloorFour = false
+      this.fetchData()
+      this.fetchAlarmNowData()
 
-      if (index === 'tg_main') {
-        this.bgImageSrc = tg_main
-        this.devListParams.picture = '1'
+      const that = this
+      window.onresize = function() {
+        that.initWindowSize()
+        that.getBgImageSize()
+        // that.reDrawDevs()
+      }
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.selectDevByType(key,undefined)
+      },
+      // 获取窗口大小
+      initWindowSize() {
+        // 获取窗体尺寸
+        this.winSize = {
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        }
 
-        this.showFence = true // 显示电子围栏
-        this.showTemp = false // 隐藏温湿度设备
-        this.showSound = false // 隐藏声光报警设备
-        this.showSmoking = false // 隐藏烟感设备
+        // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
+      },
+      // 获取图像大小
+      getBgImageSize() {
+        // 获取图片尺寸
+        this.imgSize = {
+          width: this.$refs['bgImg'].width,
+          height: this.$refs['bgImg'].height
+        }
+        this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+      },
+      // 重新绘制设备点位
+      reDrawDevs() {
+        const halfLeft = (this.winSize.width - this.imgSize.width) / 2
 
-        // 将二级菜单的指引区隐藏
+        // 调整球机的设备位置
+        const that = this
+        this.devList.forEach(function(item) {
+          const point = document.getElementById(item.id)
+
+          if (point !== null) {
+            if (item.x !== '' && item.y !== '') {
+              point.style.position = 'absolute'
+              point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+              point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+            } else {
+              point.style.display = 'none'
+            }
+          }
+        })
+      },
+      // 获取设备列表
+      fetchDeviceData() {
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                that.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      // 平面图就绪时执行函数
+      backgroundImageReady() {
+        this.getBgImageSize()
+        this.fetchDeviceData()
+      },
+      // 获取设备状态统计值
+      fetchData() {
+        overviewDeviceStatus().then(response => {
+          if (response.code === 200) {
+            this.dev.alarm = response.data.alarm.length
+            this.dev.onLine = response.data.onLine.length
+            this.dev.closed = response.data.closed.length
+            this.dev.offLine = response.data.offLine.length
+          }
+        })
+      },
+      // 获取报警列表
+      fetchAlarmNowData() {
+        alarmListOverview().then(response => {
+          if (response.code === 200) {
+            this.alarmList = response.data
+          } else {
+            this.$message.error(response.message)
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      backToIndex() {
+        this.$router.push('/ctrl')
+      },
+      // 选择设备类型
+      selectDevByType(type, event) {
+        // 遍历所有的设备类型
+        const devTypes = document.querySelectorAll('.dev-icon')
+        for (let i = 0; i < devTypes.length; i++) {
+          if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+            devTypes[i].className = 'dev-icon el-col el-col-24'
+          }
+        }
+        this.checkDevType = [false, false, false, false, false, false]
+        if(type.length>2){
+          // 添加选中的样式
+          if (typeof event === 'undefined') {
+            devTypes[0].className += ' dev-type-selected'
+          } else {
+            event.currentTarget.className += ' dev-type-selected'
+          }
+        }
+
+        if (type === 'all') {
+          this.devListParams.deviceTypes = []
+          this.checkDevType[0] = true
+        } else if (type === 'camera') {
+          this.devListParams.deviceTypes = cameraTypes.toString()
+          this.checkDevType[1] = true
+        } else if (type === 'fence') {
+          this.devListParams.deviceTypes = fenceTypes.toString()
+          this.checkDevType[2] = true
+        } else if (type === 'temperature') {
+          this.devListParams.deviceTypes = temperatureTypes.toString()
+          this.checkDevType[3] = true
+        } else if (type === 'smoking') {
+          this.devListParams.deviceTypes = smokingTypes.toString()
+          this.checkDevType[4] = true
+        } else if (type === 'sound') {
+          this.devListParams.deviceTypes = soundTypes.toString()
+          this.checkDevType[5] = true
+        }else if(type === '4'){
+          this.devListParams.deviceTypes = '4'
+          this.checkDevType[1] = true
+        }else if(type === '5'){
+          this.devListParams.deviceTypes = '5'
+          this.checkDevType[1] = true
+        }else if(type === '8'){
+          this.devListParams.deviceTypes = '8'
+          this.checkDevType[1] = true
+        }else if(type === '9'){
+          this.devListParams.deviceTypes = '9'
+          this.checkDevType[1] = true
+        }else if(type === '10'){
+          this.devListParams.deviceTypes = '10'
+          this.checkDevType[1] = true
+        }else if(type === '11'){
+          this.devListParams.deviceTypes = '11'
+          this.checkDevType[1] = true
+        }
+        this.fetchDeviceData()
+        if(this.checkDevType[1]){
+          this.itemColor = '#f58a88'
+        }else{
+          this.itemColor = '#00D2FF'
+        }
+      },
+      // 点击平面图一级按钮
+      selectMapTab(tab, event) {
+        // 遍历所有的地图
+        const mapTabs = document.querySelectorAll('.map-index-button')
+        for (let i = 0; i < mapTabs.length; i++) {
+          if (mapTabs[i].className.indexOf('index-selected') > -1) {
+            mapTabs[i].className = 'map-index-button'
+          }
+        }
+
+        // 添加选中的样式
+        event.currentTarget.className += ' index-selected'
+
+        // 选中三层
+        if (tab === 'three') {
+          this.showSubTabGuider = true
+          this.showFloorThree = true
+          this.showFloorFour = false
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '135px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '185px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '340px'
+            this.$refs['sub-tab-floor-3'].style.top = '220px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '102px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '140px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '245px'
+            this.$refs['sub-tab-floor-3'].style.top = '170px'
+          }
+        } else if (tab === 'four') {
+          this.showSubTabGuider = true
+          this.showFloorThree = false
+          this.showFloorFour = true
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '210px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '260px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '158px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '196px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+          }
+        } else {
+          this.changeMap('tg_main')
+        }
+      },
+      // 切换地图
+      changeMap(index) {
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-      } else if (index === 'tg_3_1') {
-        this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      } else if (index === 'tg_4_1') {
-        this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
-        this.imgSizeOriginal = { width: 2218, height: 2169 }
+        if (index === 'tg_main') {
+          this.bgImageSrc = tg_main
+          this.devListParams.picture = '1'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = true // 显示温湿度
-        this.showSmoking = true // 显示烟感
-        this.showSound = true // 显示声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 5 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 5 * 155) / 2
-        }
-      } else if (index === 'tg_4_5') {
-        this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      }
-
-      this.selectDevByType('all')
-    },
-    // 查询并显示设备详情
-    detailDev(dev, event) {
-      this.resetDevDetail()
-      getDetailDevice(dev.id).then(response => {
-        if (response.code === 200) {
-          this.dataForm = {
-            id: dev.id,
-            name: dev.name,
-            devcode: dev.devcode,
-            typeName: response.data.typeName,
-            model: dev.model,
-            onlineStatusName: response.data.onlineStatusName,
-            position: dev.position,
-            installDate: dev.installDate,
-            inOutName: response.data.inOutName,
-            deviceStatusName: response.data.deviceStatusName
+          this.showFence = true // 显示电子围栏
+          this.showTemp = false // 隐藏温湿度设备
+          this.showSound = false // 隐藏声光报警设备
+          this.showSmoking = false // 隐藏烟感设备
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 3 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 3 * 155) / 2
           }
 
-          // 电子围栏设备有开启字段
-          if (dev.typeName.indexOf('电子围栏') >= 0) {
-            this.isFence = true
+          // 将二级菜单的指引区隐藏
+          this.showSubTabGuider = false
+          this.showFloorThree = false
+          this.showFloorFour = false
+        } else if (index === 'tg_3_1') {
+          this.bgImageSrc = tg_3_1
+          this.devListParams.picture = '2'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
           }
-        } else {
-          this.$message.error(response.message)
+        } else if (index === 'tg_4_1') {
+          this.bgImageSrc = tg_4_1
+          this.devListParams.picture = '3'
+          this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = true // 显示温湿度
+          this.showSmoking = true // 显示烟感
+          this.showSound = true // 显示声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 5 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 5 * 155) / 2
+          }
+        } else if (index === 'tg_4_5') {
+          this.bgImageSrc = tg_4_5
+          this.devListParams.picture = '4'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
+          }
         }
-      })
 
-      // 弹窗显示设备详情
-      const targetDev = event.currentTarget // 取到点击到的设备图标div
+        this.selectDevByType('all')
+      },
+      // 查询并显示设备详情
+      detailDev(dev, event) {
+        this.resetDevDetail()
+        getDetailDevice(dev.id).then(response => {
+          if (response.code === 200) {
+            this.dataForm = {
+              id: dev.id,
+              name: dev.name,
+              devcode: dev.devcode,
+              typeName: response.data.typeName,
+              model: dev.model,
+              onlineStatusName: response.data.onlineStatusName,
+              position: dev.position,
+              installDate: dev.installDate,
+              inOutName: response.data.inOutName,
+              deviceStatusName: response.data.deviceStatusName
+            }
 
-      this.showDevDetail = true
-      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
-      top = top + 100
-      this.$refs['dev-detail-block'].style.position = 'absolute'
-      this.$refs['dev-detail-block'].style.top = top + 'px'
-      this.$refs['dev-detail-block'].style.left = targetDev.style.left
-    },
-    // 点击报警列表
-    alarmRowClick(dev, column, event) {
+            // 电子围栏设备有开启字段
+            if (dev.typeName.indexOf('电子围栏') >= 0) {
+              this.isFence = true
+            }
+          } else {
+            this.$message.error(response.message)
+          }
+        })
 
-    },
-    // 清除设备详情
-    resetDevDetail() {
-      this.dataForm = {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+        this.showDevDetail = true
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['dev-detail-block'].style.position = 'absolute'
+        this.$refs['dev-detail-block'].style.top = top + 'px'
+        this.$refs['dev-detail-block'].style.left = targetDev.style.left
+      },
+      // 点击报警列表
+      alarmRowClick(dev, column, event) {
+
+      },
+      // 清除设备详情
+      resetDevDetail() {
+        this.dataForm = {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }
       }
     }
   }
-}
 </script>
 
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+   .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 
   .main-page {
@@ -714,7 +777,30 @@
     background-size: contain;
     @extend .point;
   }
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .statis-block {
     text-align: center;
     margin-top: 20px;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 6bb09ac..56c1970 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -2,18 +2,29 @@
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
-            <!--<span>{{ dataForm.name }}</span>-->
-          </el-form-item>
-        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.name" disabled type="text"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
             <el-input v-model.trim="dataForm.name" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="在线状态">
+            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
+          </el-form-item>
+        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row :gutter="20">
@@ -31,20 +42,20 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态">
-            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item v-show="isFence" label="是否开启">
-            <el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="在线状态">-->
+            <!--<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.onlineStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item v-show="isFence" label="是否开启">-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row :gutter="20">
         <el-col :span="12">
@@ -61,14 +72,14 @@
         </el-col>
       </el-row>
 
-      <el-row v-show="isDoor" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="进出营">
-            <el-input v-model.trim="dataForm.inOutName" disabled type="text"/>
-            <!--<span>{{ dataForm.inOutName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row v-show="isDoor" :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row v-show="isIrisDev" :gutter="20">
         <el-col :span="24">
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index feb4b36..1fc121f 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号/设备名称" clearable />
+                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="4">
@@ -119,17 +119,22 @@
           value: 'devcode',
           align: 'center'
         },
-        {
-          text: '设备名称',
-          value: 'name',
-          align: 'center'
-        },
+        // {
+        //   text: '设备名称',
+        //   value: 'name',
+        //   align: 'center'
+        // },
         {
           text: '设备类型',
           value: 'typeName',
           align: 'center'
         },
         {
+          text: '设备型号',
+          value: 'model',
+          align: 'center'
+        },
+        {
           text: '在线状态',
           value: 'onlineStatusName',
           align: 'center'

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index b06847f..f452ea5 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -102,10 +102,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
@@ -151,11 +171,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+      <!--<el-col :span="24">设备名称-->
+      <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+      <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -192,452 +212,495 @@
 </template>
 
 <script>
-import { getProject } from '@/utils/baseConfig'
-import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
-import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+  import { getProject } from '@/utils/baseConfig'
+  import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
+  import { alarmListOverview } from '@/api/alarm'
+  import DeviceDetail from '@/views/deviceManage/deviceDetail'
+  import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+  import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+  import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+  import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
-const cameraTypes = [4, 5, 8, 9, 10, 11]
-const fenceTypes = [6, 7]
-const smokingTypes = [2]
-const temperatureTypes = [1]
-const soundTypes = [12]
-export default {
-  name: 'CtrlOverview',
-  components: { DeviceDetail },
-  data() {
-    return {
-      title: getProject().title,
-      bgImageSrc: tg_main,
-      devListParams: {
-        picture: '1',
-        deviceTypes: []
-      },
-      dev: {
-        alarm: 0,
-        onLine: 0,
-        closed: 0,
-        offLine: 0
-      },
-      imgSizeOriginal: {
-        width: 2245,
-        height: 1586
-      }, // 图片原尺寸
-      imgSize: {
-        width: 2245,
-        height: 1586
-      }, // 图片显示尺寸
-      winSize: {
-        width: 1440,
-        height: 789
-      }, // 屏幕窗口尺寸
-      halfLeft: 0,
-      footLeft: 0, // footer部分设备类型按钮偏移量
-      showFence: true, // 是否显示电子围栏按钮
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
-      showSubTabGuider: false, // 是否显示二级菜单指引
-      showFloorThree: false, // 是否显示三层
-      showFloorFour: false, // 是否显示四层
-      showDevDetail: false, // 是否显示设备详情
-      alarmList: [], // 报警列表
-      alarmColumns: [
-        {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center'
+  const cameraTypes = [4, 5, 8, 9, 10, 11]
+  const fenceTypes = [6, 7]
+  const smokingTypes = [2]
+  const temperatureTypes = [1]
+  const soundTypes = [12]
+  export default {
+    name: 'CtrlOverview',
+    components: { DeviceDetail },
+    data() {
+      return {
+        title: getProject().title,
+        bgImageSrc: tg_main,
+        devListParams: {
+          picture: '1',
+          deviceTypes: []
         },
-        {
-          text: '报警内容',
-          value: 'alarmContent',
-          align: 'center'
+        dev: {
+          alarm: 0,
+          onLine: 0,
+          closed: 0,
+          offLine: 0
         },
-        {
-          text: '报警时间',
-          value: 'alarmTime',
-          align: 'center',
-          width: 165
-        }
-      ], // 报警列表显示列
-      tableShow: true, // 是否显示告警列表
-      devList: [], // 设备列表（在地图上显示）
-      dataForm: {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
-      }, // 设备详情表单
-      isFence: false, // 是否电子围栏设备
-      checkDevType: [true, false, false, false, false, false] // 选中设备类型
-    }
-  },
-  mounted() {
-    this.initWindowSize()
-
-    this.fetchData()
-    this.fetchAlarmNowData()
-
-    const that = this
-    window.onresize = function() {
-      that.initWindowSize()
-      that.getBgImageSize()
-      // that.reDrawDevs()
-    }
-  },
-  methods: {
-    // 获取窗口大小
-    initWindowSize() {
-      // 获取窗体尺寸
-      this.winSize = {
-        width: document.documentElement.clientWidth,
-        height: document.documentElement.clientHeight
-      }
-
-      // 设置footer部分居中显示
-      if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 3 * 210) / 2
-      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 3 * 155) / 2
-      }
-    },
-    // 获取图像大小
-    getBgImageSize() {
-      // 获取图片尺寸
-      this.imgSize = {
-        width: this.$refs['bgImg'].width,
-        height: this.$refs['bgImg'].height
-      }
-      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
-    },
-    // 重新绘制设备点位
-    reDrawDevs() {
-      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
-
-      // 调整球机的设备位置
-      const that = this
-      this.devList.forEach(function(item) {
-        const point = document.getElementById(item.id)
-
-        if (point !== null) {
-          if (item.x !== '' && item.y !== '') {
-            point.style.position = 'absolute'
-            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
-            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
-          } else {
-            point.style.display = 'none'
+        imgSizeOriginal: {
+          width: 2245,
+          height: 1586
+        }, // 图片原尺寸
+        imgSize: {
+          width: 2245,
+          height: 1586
+        }, // 图片显示尺寸
+        winSize: {
+          width: 1440,
+          height: 789
+        }, // 屏幕窗口尺寸
+        halfLeft: 0,
+        footLeft: 0, // footer部分设备类型按钮偏移量
+        showFence: true, // 是否显示电子围栏按钮
+        showTemp: false, // 是否显示温湿度按钮
+        showSmoking: false, // 是否显示烟感按钮
+        showSound: false, // 是否显示声光报警按钮
+        showSubTabGuider: false, // 是否显示二级菜单指引
+        showFloorThree: false, // 是否显示三层
+        showFloorFour: false, // 是否显示四层
+        showDevDetail: false, // 是否显示设备详情
+        alarmList: [], // 报警列表
+        alarmColumns: [
+          {
+            text: '设备编号',
+            value: 'devcode',
+            align: 'center'
+          },
+          {
+            text: '报警内容',
+            value: 'alarmContent',
+            align: 'center'
+          },
+          {
+            text: '报警时间',
+            value: 'alarmTime',
+            align: 'center',
+            width: 165
           }
-        }
-      })
-    },
-    // 获取设备列表
-    fetchDeviceData() {
-      overviewDeviceList(this.devListParams).then(response => {
-        if (response.code === 200) {
-          const that = this
-          this.devList = []
-          response.data.forEach(dev => {
-            if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
-            }
-          })
-        }
-      })
-    },
-    // 平面图就绪时执行函数
-    backgroundImageReady() {
-      this.getBgImageSize()
-      this.fetchDeviceData()
-    },
-    // 获取设备状态统计值
-    fetchData() {
-      overviewDeviceStatus().then(response => {
-        if (response.code === 200) {
-          this.dev.alarm = response.data.alarm.length
-          this.dev.onLine = response.data.onLine.length
-          this.dev.closed = response.data.closed.length
-          this.dev.offLine = response.data.offLine.length
-        }
-      })
-    },
-    // 获取报警列表
-    fetchAlarmNowData() {
-      alarmListOverview().then(response => {
-        if (response.code === 200) {
-          this.alarmList = response.data
-        } else {
-          this.$message.error(response.message)
-        }
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    backToIndex() {
-      this.$router.push('/ctrl')
-    },
-    // 选择设备类型
-    selectDevByType(type, event) {
-      // 遍历所有的设备类型
-      const devTypes = document.querySelectorAll('.dev-icon')
-      for (let i = 0; i < devTypes.length; i++) {
-        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
-          devTypes[i].className = 'dev-icon el-col el-col-24'
-        }
-      }
-      this.checkDevType = [false, false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
-      }
-
-      if (type === 'all') {
-        this.devListParams.deviceTypes = []
-        this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
-        this.checkDevType[1] = true
-      } else if (type === 'fence') {
-        this.devListParams.deviceTypes = fenceTypes.toString()
-        this.checkDevType[2] = true
-      } else if (type === 'temperature') {
-        this.devListParams.deviceTypes = temperatureTypes.toString()
-        this.checkDevType[3] = true
-      } else if (type === 'smoking') {
-        this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
-      } else if (type === 'sound') {
-        this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
-      }
-      this.fetchDeviceData()
-    },
-    // 点击平面图一级按钮
-    selectMapTab(tab, event) {
-      // 遍历所有的地图
-      const mapTabs = document.querySelectorAll('.map-index-button')
-      for (let i = 0; i < mapTabs.length; i++) {
-        if (mapTabs[i].className.indexOf('index-selected') > -1) {
-          mapTabs[i].className = 'map-index-button'
-        }
-      }
-
-      // 添加选中的样式
-      event.currentTarget.className += ' index-selected'
-
-      // 选中三层
-      if (tab === 'three') {
-        this.showSubTabGuider = true
-        this.showFloorThree = true
-        this.showFloorFour = false
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-3'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '135px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '185px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '340px'
-          this.$refs['sub-tab-floor-3'].style.top = '220px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '102px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '140px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '245px'
-          this.$refs['sub-tab-floor-3'].style.top = '170px'
-        }
-      } else if (tab === 'four') {
-        this.showSubTabGuider = true
-        this.showFloorThree = false
-        this.showFloorFour = true
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '210px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '260px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '300px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '350px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '158px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '196px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '226px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '266px'
-        }
-      } else {
-        this.changeMap('tg_main')
+        ], // 报警列表显示列
+        tableShow: true, // 是否显示告警列表
+        devList: [], // 设备列表（在地图上显示）
+        dataForm: {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }, // 设备详情表单
+        isFence: false, // 是否电子围栏设备
+        itemColor: '#f58a88',
+        checkDevType: [true, false, false, false, false, false] // 选中设备类型
       }
     },
-    // 切换地图
-    changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
+    mounted() {
+      this.initWindowSize()
 
-      this.showSubTabGuider = false
-      this.showFloorThree = false
-      this.showFloorFour = false
+      this.fetchData()
+      this.fetchAlarmNowData()
 
-      if (index === 'tg_main') {
-        this.bgImageSrc = tg_main
-        this.devListParams.picture = '1'
+      const that = this
+      window.onresize = function() {
+        that.initWindowSize()
+        that.getBgImageSize()
+        // that.reDrawDevs()
+      }
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.selectDevByType(key,undefined)
+      },
+      // 获取窗口大小
+      initWindowSize() {
+        // 获取窗体尺寸
+        this.winSize = {
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        }
 
-        this.showFence = true // 显示电子围栏
-        this.showTemp = false // 隐藏温湿度设备
-        this.showSound = false // 隐藏声光报警设备
-        this.showSmoking = false // 隐藏烟感设备
+        // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
+      },
+      // 获取图像大小
+      getBgImageSize() {
+        // 获取图片尺寸
+        this.imgSize = {
+          width: this.$refs['bgImg'].width,
+          height: this.$refs['bgImg'].height
+        }
+        this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+      },
+      // 重新绘制设备点位
+      reDrawDevs() {
+        const halfLeft = (this.winSize.width - this.imgSize.width) / 2
 
-        // 将二级菜单的指引区隐藏
+        // 调整球机的设备位置
+        const that = this
+        this.devList.forEach(function(item) {
+          const point = document.getElementById(item.id)
+
+          if (point !== null) {
+            if (item.x !== '' && item.y !== '') {
+              point.style.position = 'absolute'
+              point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+              point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+            } else {
+              point.style.display = 'none'
+            }
+          }
+        })
+      },
+      // 获取设备列表
+      fetchDeviceData() {
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                that.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      // 平面图就绪时执行函数
+      backgroundImageReady() {
+        this.getBgImageSize()
+        this.fetchDeviceData()
+      },
+      // 获取设备状态统计值
+      fetchData() {
+        overviewDeviceStatus().then(response => {
+          if (response.code === 200) {
+            this.dev.alarm = response.data.alarm.length
+            this.dev.onLine = response.data.onLine.length
+            this.dev.closed = response.data.closed.length
+            this.dev.offLine = response.data.offLine.length
+          }
+        })
+      },
+      // 获取报警列表
+      fetchAlarmNowData() {
+        alarmListOverview().then(response => {
+          if (response.code === 200) {
+            this.alarmList = response.data
+          } else {
+            this.$message.error(response.message)
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      backToIndex() {
+        this.$router.push('/ctrl')
+      },
+      // 选择设备类型
+      selectDevByType(type, event) {
+        // 遍历所有的设备类型
+        const devTypes = document.querySelectorAll('.dev-icon')
+        for (let i = 0; i < devTypes.length; i++) {
+          if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+            devTypes[i].className = 'dev-icon el-col el-col-24'
+          }
+        }
+        this.checkDevType = [false, false, false, false, false, false]
+        if(type.length>2){
+          // 添加选中的样式
+          if (typeof event === 'undefined') {
+            devTypes[0].className += ' dev-type-selected'
+          } else {
+            event.currentTarget.className += ' dev-type-selected'
+          }
+        }
+
+        if (type === 'all') {
+          this.devListParams.deviceTypes = []
+          this.checkDevType[0] = true
+        } else if (type === 'camera') {
+          this.devListParams.deviceTypes = cameraTypes.toString()
+          this.checkDevType[1] = true
+        } else if (type === 'fence') {
+          this.devListParams.deviceTypes = fenceTypes.toString()
+          this.checkDevType[2] = true
+        } else if (type === 'temperature') {
+          this.devListParams.deviceTypes = temperatureTypes.toString()
+          this.checkDevType[3] = true
+        } else if (type === 'smoking') {
+          this.devListParams.deviceTypes = smokingTypes.toString()
+          this.checkDevType[4] = true
+        } else if (type === 'sound') {
+          this.devListParams.deviceTypes = soundTypes.toString()
+          this.checkDevType[5] = true
+        }else if(type === '4'){
+          this.devListParams.deviceTypes = '4'
+          this.checkDevType[1] = true
+        }else if(type === '5'){
+          this.devListParams.deviceTypes = '5'
+          this.checkDevType[1] = true
+        }else if(type === '8'){
+          this.devListParams.deviceTypes = '8'
+          this.checkDevType[1] = true
+        }else if(type === '9'){
+          this.devListParams.deviceTypes = '9'
+          this.checkDevType[1] = true
+        }else if(type === '10'){
+          this.devListParams.deviceTypes = '10'
+          this.checkDevType[1] = true
+        }else if(type === '11'){
+          this.devListParams.deviceTypes = '11'
+          this.checkDevType[1] = true
+        }
+        this.fetchDeviceData()
+        if(this.checkDevType[1]){
+          this.itemColor = '#f58a88'
+        }else{
+          this.itemColor = '#00D2FF'
+        }
+      },
+      // 点击平面图一级按钮
+      selectMapTab(tab, event) {
+        // 遍历所有的地图
+        const mapTabs = document.querySelectorAll('.map-index-button')
+        for (let i = 0; i < mapTabs.length; i++) {
+          if (mapTabs[i].className.indexOf('index-selected') > -1) {
+            mapTabs[i].className = 'map-index-button'
+          }
+        }
+
+        // 添加选中的样式
+        event.currentTarget.className += ' index-selected'
+
+        // 选中三层
+        if (tab === 'three') {
+          this.showSubTabGuider = true
+          this.showFloorThree = true
+          this.showFloorFour = false
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '135px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '185px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '340px'
+            this.$refs['sub-tab-floor-3'].style.top = '220px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '102px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '140px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '245px'
+            this.$refs['sub-tab-floor-3'].style.top = '170px'
+          }
+        } else if (tab === 'four') {
+          this.showSubTabGuider = true
+          this.showFloorThree = false
+          this.showFloorFour = true
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '210px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '260px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '158px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '196px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+          }
+        } else {
+          this.changeMap('tg_main')
+        }
+      },
+      // 切换地图
+      changeMap(index) {
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-      } else if (index === 'tg_3_1') {
-        this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      } else if (index === 'tg_4_1') {
-        this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
-        this.imgSizeOriginal = { width: 2218, height: 2169 }
+        if (index === 'tg_main') {
+          this.bgImageSrc = tg_main
+          this.devListParams.picture = '1'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = true // 显示温湿度
-        this.showSmoking = true // 显示烟感
-        this.showSound = true // 显示声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 5 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 5 * 155) / 2
-        }
-      } else if (index === 'tg_4_5') {
-        this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      }
-
-      this.selectDevByType('all')
-    },
-    // 查询并显示设备详情
-    detailDev(dev, event) {
-      this.resetDevDetail()
-      getDetailDevice(dev.id).then(response => {
-        if (response.code === 200) {
-          this.dataForm = {
-            id: dev.id,
-            name: dev.name,
-            devcode: dev.devcode,
-            typeName: response.data.typeName,
-            model: dev.model,
-            onlineStatusName: response.data.onlineStatusName,
-            position: dev.position,
-            installDate: dev.installDate,
-            inOutName: response.data.inOutName,
-            deviceStatusName: response.data.deviceStatusName
+          this.showFence = true // 显示电子围栏
+          this.showTemp = false // 隐藏温湿度设备
+          this.showSound = false // 隐藏声光报警设备
+          this.showSmoking = false // 隐藏烟感设备
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 3 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 3 * 155) / 2
           }
 
-          // 电子围栏设备有开启字段
-          if (dev.typeName.indexOf('电子围栏') >= 0) {
-            this.isFence = true
+          // 将二级菜单的指引区隐藏
+          this.showSubTabGuider = false
+          this.showFloorThree = false
+          this.showFloorFour = false
+        } else if (index === 'tg_3_1') {
+          this.bgImageSrc = tg_3_1
+          this.devListParams.picture = '2'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
           }
-        } else {
-          this.$message.error(response.message)
+        } else if (index === 'tg_4_1') {
+          this.bgImageSrc = tg_4_1
+          this.devListParams.picture = '3'
+          this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = true // 显示温湿度
+          this.showSmoking = true // 显示烟感
+          this.showSound = true // 显示声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 5 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 5 * 155) / 2
+          }
+        } else if (index === 'tg_4_5') {
+          this.bgImageSrc = tg_4_5
+          this.devListParams.picture = '4'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
+          }
         }
-      })
 
-      // 弹窗显示设备详情
-      const targetDev = event.currentTarget // 取到点击到的设备图标div
+        this.selectDevByType('all')
+      },
+      // 查询并显示设备详情
+      detailDev(dev, event) {
+        this.resetDevDetail()
+        getDetailDevice(dev.id).then(response => {
+          if (response.code === 200) {
+            this.dataForm = {
+              id: dev.id,
+              name: dev.name,
+              devcode: dev.devcode,
+              typeName: response.data.typeName,
+              model: dev.model,
+              onlineStatusName: response.data.onlineStatusName,
+              position: dev.position,
+              installDate: dev.installDate,
+              inOutName: response.data.inOutName,
+              deviceStatusName: response.data.deviceStatusName
+            }
 
-      this.showDevDetail = true
-      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
-      top = top + 100
-      this.$refs['dev-detail-block'].style.position = 'absolute'
-      this.$refs['dev-detail-block'].style.top = top + 'px'
-      this.$refs['dev-detail-block'].style.left = targetDev.style.left
-    },
-    // 点击报警列表
-    alarmRowClick(dev, column, event) {
+            // 电子围栏设备有开启字段
+            if (dev.typeName.indexOf('电子围栏') >= 0) {
+              this.isFence = true
+            }
+          } else {
+            this.$message.error(response.message)
+          }
+        })
 
-    },
-    // 清除设备详情
-    resetDevDetail() {
-      this.dataForm = {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+        this.showDevDetail = true
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['dev-detail-block'].style.position = 'absolute'
+        this.$refs['dev-detail-block'].style.top = top + 'px'
+        this.$refs['dev-detail-block'].style.left = targetDev.style.left
+      },
+      // 点击报警列表
+      alarmRowClick(dev, column, event) {
+
+      },
+      // 清除设备详情
+      resetDevDetail() {
+        this.dataForm = {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }
       }
     }
   }
-}
 </script>
 
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+   .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 
   .main-page {
@@ -714,7 +777,30 @@
     background-size: contain;
     @extend .point;
   }
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .statis-block {
     text-align: center;
     margin-top: 20px;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 6bb09ac..56c1970 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -2,18 +2,29 @@
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
-            <!--<span>{{ dataForm.name }}</span>-->
-          </el-form-item>
-        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.name" disabled type="text"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
             <el-input v-model.trim="dataForm.name" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="在线状态">
+            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
+          </el-form-item>
+        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row :gutter="20">
@@ -31,20 +42,20 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态">
-            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item v-show="isFence" label="是否开启">
-            <el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="在线状态">-->
+            <!--<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.onlineStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item v-show="isFence" label="是否开启">-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row :gutter="20">
         <el-col :span="12">
@@ -61,14 +72,14 @@
         </el-col>
       </el-row>
 
-      <el-row v-show="isDoor" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="进出营">
-            <el-input v-model.trim="dataForm.inOutName" disabled type="text"/>
-            <!--<span>{{ dataForm.inOutName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row v-show="isDoor" :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row v-show="isIrisDev" :gutter="20">
         <el-col :span="24">
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index feb4b36..1fc121f 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号/设备名称" clearable />
+                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="4">
@@ -119,17 +119,22 @@
           value: 'devcode',
           align: 'center'
         },
-        {
-          text: '设备名称',
-          value: 'name',
-          align: 'center'
-        },
+        // {
+        //   text: '设备名称',
+        //   value: 'name',
+        //   align: 'center'
+        // },
         {
           text: '设备类型',
           value: 'typeName',
           align: 'center'
         },
         {
+          text: '设备型号',
+          value: 'model',
+          align: 'center'
+        },
+        {
           text: '在线状态',
           value: 'onlineStatusName',
           align: 'center'
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 4f48bd0..34e9041 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -100,22 +100,46 @@
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +174,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +243,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +269,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -337,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -349,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index b06847f..f452ea5 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -102,10 +102,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
@@ -151,11 +171,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+      <!--<el-col :span="24">设备名称-->
+      <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+      <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -192,452 +212,495 @@
 </template>
 
 <script>
-import { getProject } from '@/utils/baseConfig'
-import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
-import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+  import { getProject } from '@/utils/baseConfig'
+  import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
+  import { alarmListOverview } from '@/api/alarm'
+  import DeviceDetail from '@/views/deviceManage/deviceDetail'
+  import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+  import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+  import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+  import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
-const cameraTypes = [4, 5, 8, 9, 10, 11]
-const fenceTypes = [6, 7]
-const smokingTypes = [2]
-const temperatureTypes = [1]
-const soundTypes = [12]
-export default {
-  name: 'CtrlOverview',
-  components: { DeviceDetail },
-  data() {
-    return {
-      title: getProject().title,
-      bgImageSrc: tg_main,
-      devListParams: {
-        picture: '1',
-        deviceTypes: []
-      },
-      dev: {
-        alarm: 0,
-        onLine: 0,
-        closed: 0,
-        offLine: 0
-      },
-      imgSizeOriginal: {
-        width: 2245,
-        height: 1586
-      }, // 图片原尺寸
-      imgSize: {
-        width: 2245,
-        height: 1586
-      }, // 图片显示尺寸
-      winSize: {
-        width: 1440,
-        height: 789
-      }, // 屏幕窗口尺寸
-      halfLeft: 0,
-      footLeft: 0, // footer部分设备类型按钮偏移量
-      showFence: true, // 是否显示电子围栏按钮
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
-      showSubTabGuider: false, // 是否显示二级菜单指引
-      showFloorThree: false, // 是否显示三层
-      showFloorFour: false, // 是否显示四层
-      showDevDetail: false, // 是否显示设备详情
-      alarmList: [], // 报警列表
-      alarmColumns: [
-        {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center'
+  const cameraTypes = [4, 5, 8, 9, 10, 11]
+  const fenceTypes = [6, 7]
+  const smokingTypes = [2]
+  const temperatureTypes = [1]
+  const soundTypes = [12]
+  export default {
+    name: 'CtrlOverview',
+    components: { DeviceDetail },
+    data() {
+      return {
+        title: getProject().title,
+        bgImageSrc: tg_main,
+        devListParams: {
+          picture: '1',
+          deviceTypes: []
         },
-        {
-          text: '报警内容',
-          value: 'alarmContent',
-          align: 'center'
+        dev: {
+          alarm: 0,
+          onLine: 0,
+          closed: 0,
+          offLine: 0
         },
-        {
-          text: '报警时间',
-          value: 'alarmTime',
-          align: 'center',
-          width: 165
-        }
-      ], // 报警列表显示列
-      tableShow: true, // 是否显示告警列表
-      devList: [], // 设备列表（在地图上显示）
-      dataForm: {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
-      }, // 设备详情表单
-      isFence: false, // 是否电子围栏设备
-      checkDevType: [true, false, false, false, false, false] // 选中设备类型
-    }
-  },
-  mounted() {
-    this.initWindowSize()
-
-    this.fetchData()
-    this.fetchAlarmNowData()
-
-    const that = this
-    window.onresize = function() {
-      that.initWindowSize()
-      that.getBgImageSize()
-      // that.reDrawDevs()
-    }
-  },
-  methods: {
-    // 获取窗口大小
-    initWindowSize() {
-      // 获取窗体尺寸
-      this.winSize = {
-        width: document.documentElement.clientWidth,
-        height: document.documentElement.clientHeight
-      }
-
-      // 设置footer部分居中显示
-      if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 3 * 210) / 2
-      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 3 * 155) / 2
-      }
-    },
-    // 获取图像大小
-    getBgImageSize() {
-      // 获取图片尺寸
-      this.imgSize = {
-        width: this.$refs['bgImg'].width,
-        height: this.$refs['bgImg'].height
-      }
-      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
-    },
-    // 重新绘制设备点位
-    reDrawDevs() {
-      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
-
-      // 调整球机的设备位置
-      const that = this
-      this.devList.forEach(function(item) {
-        const point = document.getElementById(item.id)
-
-        if (point !== null) {
-          if (item.x !== '' && item.y !== '') {
-            point.style.position = 'absolute'
-            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
-            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
-          } else {
-            point.style.display = 'none'
+        imgSizeOriginal: {
+          width: 2245,
+          height: 1586
+        }, // 图片原尺寸
+        imgSize: {
+          width: 2245,
+          height: 1586
+        }, // 图片显示尺寸
+        winSize: {
+          width: 1440,
+          height: 789
+        }, // 屏幕窗口尺寸
+        halfLeft: 0,
+        footLeft: 0, // footer部分设备类型按钮偏移量
+        showFence: true, // 是否显示电子围栏按钮
+        showTemp: false, // 是否显示温湿度按钮
+        showSmoking: false, // 是否显示烟感按钮
+        showSound: false, // 是否显示声光报警按钮
+        showSubTabGuider: false, // 是否显示二级菜单指引
+        showFloorThree: false, // 是否显示三层
+        showFloorFour: false, // 是否显示四层
+        showDevDetail: false, // 是否显示设备详情
+        alarmList: [], // 报警列表
+        alarmColumns: [
+          {
+            text: '设备编号',
+            value: 'devcode',
+            align: 'center'
+          },
+          {
+            text: '报警内容',
+            value: 'alarmContent',
+            align: 'center'
+          },
+          {
+            text: '报警时间',
+            value: 'alarmTime',
+            align: 'center',
+            width: 165
           }
-        }
-      })
-    },
-    // 获取设备列表
-    fetchDeviceData() {
-      overviewDeviceList(this.devListParams).then(response => {
-        if (response.code === 200) {
-          const that = this
-          this.devList = []
-          response.data.forEach(dev => {
-            if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
-            }
-          })
-        }
-      })
-    },
-    // 平面图就绪时执行函数
-    backgroundImageReady() {
-      this.getBgImageSize()
-      this.fetchDeviceData()
-    },
-    // 获取设备状态统计值
-    fetchData() {
-      overviewDeviceStatus().then(response => {
-        if (response.code === 200) {
-          this.dev.alarm = response.data.alarm.length
-          this.dev.onLine = response.data.onLine.length
-          this.dev.closed = response.data.closed.length
-          this.dev.offLine = response.data.offLine.length
-        }
-      })
-    },
-    // 获取报警列表
-    fetchAlarmNowData() {
-      alarmListOverview().then(response => {
-        if (response.code === 200) {
-          this.alarmList = response.data
-        } else {
-          this.$message.error(response.message)
-        }
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    backToIndex() {
-      this.$router.push('/ctrl')
-    },
-    // 选择设备类型
-    selectDevByType(type, event) {
-      // 遍历所有的设备类型
-      const devTypes = document.querySelectorAll('.dev-icon')
-      for (let i = 0; i < devTypes.length; i++) {
-        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
-          devTypes[i].className = 'dev-icon el-col el-col-24'
-        }
-      }
-      this.checkDevType = [false, false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
-      }
-
-      if (type === 'all') {
-        this.devListParams.deviceTypes = []
-        this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
-        this.checkDevType[1] = true
-      } else if (type === 'fence') {
-        this.devListParams.deviceTypes = fenceTypes.toString()
-        this.checkDevType[2] = true
-      } else if (type === 'temperature') {
-        this.devListParams.deviceTypes = temperatureTypes.toString()
-        this.checkDevType[3] = true
-      } else if (type === 'smoking') {
-        this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
-      } else if (type === 'sound') {
-        this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
-      }
-      this.fetchDeviceData()
-    },
-    // 点击平面图一级按钮
-    selectMapTab(tab, event) {
-      // 遍历所有的地图
-      const mapTabs = document.querySelectorAll('.map-index-button')
-      for (let i = 0; i < mapTabs.length; i++) {
-        if (mapTabs[i].className.indexOf('index-selected') > -1) {
-          mapTabs[i].className = 'map-index-button'
-        }
-      }
-
-      // 添加选中的样式
-      event.currentTarget.className += ' index-selected'
-
-      // 选中三层
-      if (tab === 'three') {
-        this.showSubTabGuider = true
-        this.showFloorThree = true
-        this.showFloorFour = false
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-3'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '135px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '185px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '340px'
-          this.$refs['sub-tab-floor-3'].style.top = '220px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '102px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '140px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '245px'
-          this.$refs['sub-tab-floor-3'].style.top = '170px'
-        }
-      } else if (tab === 'four') {
-        this.showSubTabGuider = true
-        this.showFloorThree = false
-        this.showFloorFour = true
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '210px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '260px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '300px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '350px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '158px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '196px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '226px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '266px'
-        }
-      } else {
-        this.changeMap('tg_main')
+        ], // 报警列表显示列
+        tableShow: true, // 是否显示告警列表
+        devList: [], // 设备列表（在地图上显示）
+        dataForm: {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }, // 设备详情表单
+        isFence: false, // 是否电子围栏设备
+        itemColor: '#f58a88',
+        checkDevType: [true, false, false, false, false, false] // 选中设备类型
       }
     },
-    // 切换地图
-    changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
+    mounted() {
+      this.initWindowSize()
 
-      this.showSubTabGuider = false
-      this.showFloorThree = false
-      this.showFloorFour = false
+      this.fetchData()
+      this.fetchAlarmNowData()
 
-      if (index === 'tg_main') {
-        this.bgImageSrc = tg_main
-        this.devListParams.picture = '1'
+      const that = this
+      window.onresize = function() {
+        that.initWindowSize()
+        that.getBgImageSize()
+        // that.reDrawDevs()
+      }
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.selectDevByType(key,undefined)
+      },
+      // 获取窗口大小
+      initWindowSize() {
+        // 获取窗体尺寸
+        this.winSize = {
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        }
 
-        this.showFence = true // 显示电子围栏
-        this.showTemp = false // 隐藏温湿度设备
-        this.showSound = false // 隐藏声光报警设备
-        this.showSmoking = false // 隐藏烟感设备
+        // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
+      },
+      // 获取图像大小
+      getBgImageSize() {
+        // 获取图片尺寸
+        this.imgSize = {
+          width: this.$refs['bgImg'].width,
+          height: this.$refs['bgImg'].height
+        }
+        this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+      },
+      // 重新绘制设备点位
+      reDrawDevs() {
+        const halfLeft = (this.winSize.width - this.imgSize.width) / 2
 
-        // 将二级菜单的指引区隐藏
+        // 调整球机的设备位置
+        const that = this
+        this.devList.forEach(function(item) {
+          const point = document.getElementById(item.id)
+
+          if (point !== null) {
+            if (item.x !== '' && item.y !== '') {
+              point.style.position = 'absolute'
+              point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+              point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+            } else {
+              point.style.display = 'none'
+            }
+          }
+        })
+      },
+      // 获取设备列表
+      fetchDeviceData() {
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                that.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      // 平面图就绪时执行函数
+      backgroundImageReady() {
+        this.getBgImageSize()
+        this.fetchDeviceData()
+      },
+      // 获取设备状态统计值
+      fetchData() {
+        overviewDeviceStatus().then(response => {
+          if (response.code === 200) {
+            this.dev.alarm = response.data.alarm.length
+            this.dev.onLine = response.data.onLine.length
+            this.dev.closed = response.data.closed.length
+            this.dev.offLine = response.data.offLine.length
+          }
+        })
+      },
+      // 获取报警列表
+      fetchAlarmNowData() {
+        alarmListOverview().then(response => {
+          if (response.code === 200) {
+            this.alarmList = response.data
+          } else {
+            this.$message.error(response.message)
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      backToIndex() {
+        this.$router.push('/ctrl')
+      },
+      // 选择设备类型
+      selectDevByType(type, event) {
+        // 遍历所有的设备类型
+        const devTypes = document.querySelectorAll('.dev-icon')
+        for (let i = 0; i < devTypes.length; i++) {
+          if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+            devTypes[i].className = 'dev-icon el-col el-col-24'
+          }
+        }
+        this.checkDevType = [false, false, false, false, false, false]
+        if(type.length>2){
+          // 添加选中的样式
+          if (typeof event === 'undefined') {
+            devTypes[0].className += ' dev-type-selected'
+          } else {
+            event.currentTarget.className += ' dev-type-selected'
+          }
+        }
+
+        if (type === 'all') {
+          this.devListParams.deviceTypes = []
+          this.checkDevType[0] = true
+        } else if (type === 'camera') {
+          this.devListParams.deviceTypes = cameraTypes.toString()
+          this.checkDevType[1] = true
+        } else if (type === 'fence') {
+          this.devListParams.deviceTypes = fenceTypes.toString()
+          this.checkDevType[2] = true
+        } else if (type === 'temperature') {
+          this.devListParams.deviceTypes = temperatureTypes.toString()
+          this.checkDevType[3] = true
+        } else if (type === 'smoking') {
+          this.devListParams.deviceTypes = smokingTypes.toString()
+          this.checkDevType[4] = true
+        } else if (type === 'sound') {
+          this.devListParams.deviceTypes = soundTypes.toString()
+          this.checkDevType[5] = true
+        }else if(type === '4'){
+          this.devListParams.deviceTypes = '4'
+          this.checkDevType[1] = true
+        }else if(type === '5'){
+          this.devListParams.deviceTypes = '5'
+          this.checkDevType[1] = true
+        }else if(type === '8'){
+          this.devListParams.deviceTypes = '8'
+          this.checkDevType[1] = true
+        }else if(type === '9'){
+          this.devListParams.deviceTypes = '9'
+          this.checkDevType[1] = true
+        }else if(type === '10'){
+          this.devListParams.deviceTypes = '10'
+          this.checkDevType[1] = true
+        }else if(type === '11'){
+          this.devListParams.deviceTypes = '11'
+          this.checkDevType[1] = true
+        }
+        this.fetchDeviceData()
+        if(this.checkDevType[1]){
+          this.itemColor = '#f58a88'
+        }else{
+          this.itemColor = '#00D2FF'
+        }
+      },
+      // 点击平面图一级按钮
+      selectMapTab(tab, event) {
+        // 遍历所有的地图
+        const mapTabs = document.querySelectorAll('.map-index-button')
+        for (let i = 0; i < mapTabs.length; i++) {
+          if (mapTabs[i].className.indexOf('index-selected') > -1) {
+            mapTabs[i].className = 'map-index-button'
+          }
+        }
+
+        // 添加选中的样式
+        event.currentTarget.className += ' index-selected'
+
+        // 选中三层
+        if (tab === 'three') {
+          this.showSubTabGuider = true
+          this.showFloorThree = true
+          this.showFloorFour = false
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '135px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '185px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '340px'
+            this.$refs['sub-tab-floor-3'].style.top = '220px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '102px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '140px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '245px'
+            this.$refs['sub-tab-floor-3'].style.top = '170px'
+          }
+        } else if (tab === 'four') {
+          this.showSubTabGuider = true
+          this.showFloorThree = false
+          this.showFloorFour = true
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '210px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '260px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '158px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '196px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+          }
+        } else {
+          this.changeMap('tg_main')
+        }
+      },
+      // 切换地图
+      changeMap(index) {
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-      } else if (index === 'tg_3_1') {
-        this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      } else if (index === 'tg_4_1') {
-        this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
-        this.imgSizeOriginal = { width: 2218, height: 2169 }
+        if (index === 'tg_main') {
+          this.bgImageSrc = tg_main
+          this.devListParams.picture = '1'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = true // 显示温湿度
-        this.showSmoking = true // 显示烟感
-        this.showSound = true // 显示声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 5 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 5 * 155) / 2
-        }
-      } else if (index === 'tg_4_5') {
-        this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      }
-
-      this.selectDevByType('all')
-    },
-    // 查询并显示设备详情
-    detailDev(dev, event) {
-      this.resetDevDetail()
-      getDetailDevice(dev.id).then(response => {
-        if (response.code === 200) {
-          this.dataForm = {
-            id: dev.id,
-            name: dev.name,
-            devcode: dev.devcode,
-            typeName: response.data.typeName,
-            model: dev.model,
-            onlineStatusName: response.data.onlineStatusName,
-            position: dev.position,
-            installDate: dev.installDate,
-            inOutName: response.data.inOutName,
-            deviceStatusName: response.data.deviceStatusName
+          this.showFence = true // 显示电子围栏
+          this.showTemp = false // 隐藏温湿度设备
+          this.showSound = false // 隐藏声光报警设备
+          this.showSmoking = false // 隐藏烟感设备
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 3 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 3 * 155) / 2
           }
 
-          // 电子围栏设备有开启字段
-          if (dev.typeName.indexOf('电子围栏') >= 0) {
-            this.isFence = true
+          // 将二级菜单的指引区隐藏
+          this.showSubTabGuider = false
+          this.showFloorThree = false
+          this.showFloorFour = false
+        } else if (index === 'tg_3_1') {
+          this.bgImageSrc = tg_3_1
+          this.devListParams.picture = '2'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
           }
-        } else {
-          this.$message.error(response.message)
+        } else if (index === 'tg_4_1') {
+          this.bgImageSrc = tg_4_1
+          this.devListParams.picture = '3'
+          this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = true // 显示温湿度
+          this.showSmoking = true // 显示烟感
+          this.showSound = true // 显示声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 5 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 5 * 155) / 2
+          }
+        } else if (index === 'tg_4_5') {
+          this.bgImageSrc = tg_4_5
+          this.devListParams.picture = '4'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
+          }
         }
-      })
 
-      // 弹窗显示设备详情
-      const targetDev = event.currentTarget // 取到点击到的设备图标div
+        this.selectDevByType('all')
+      },
+      // 查询并显示设备详情
+      detailDev(dev, event) {
+        this.resetDevDetail()
+        getDetailDevice(dev.id).then(response => {
+          if (response.code === 200) {
+            this.dataForm = {
+              id: dev.id,
+              name: dev.name,
+              devcode: dev.devcode,
+              typeName: response.data.typeName,
+              model: dev.model,
+              onlineStatusName: response.data.onlineStatusName,
+              position: dev.position,
+              installDate: dev.installDate,
+              inOutName: response.data.inOutName,
+              deviceStatusName: response.data.deviceStatusName
+            }
 
-      this.showDevDetail = true
-      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
-      top = top + 100
-      this.$refs['dev-detail-block'].style.position = 'absolute'
-      this.$refs['dev-detail-block'].style.top = top + 'px'
-      this.$refs['dev-detail-block'].style.left = targetDev.style.left
-    },
-    // 点击报警列表
-    alarmRowClick(dev, column, event) {
+            // 电子围栏设备有开启字段
+            if (dev.typeName.indexOf('电子围栏') >= 0) {
+              this.isFence = true
+            }
+          } else {
+            this.$message.error(response.message)
+          }
+        })
 
-    },
-    // 清除设备详情
-    resetDevDetail() {
-      this.dataForm = {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+        this.showDevDetail = true
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['dev-detail-block'].style.position = 'absolute'
+        this.$refs['dev-detail-block'].style.top = top + 'px'
+        this.$refs['dev-detail-block'].style.left = targetDev.style.left
+      },
+      // 点击报警列表
+      alarmRowClick(dev, column, event) {
+
+      },
+      // 清除设备详情
+      resetDevDetail() {
+        this.dataForm = {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }
       }
     }
   }
-}
 </script>
 
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+   .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 
   .main-page {
@@ -714,7 +777,30 @@
     background-size: contain;
     @extend .point;
   }
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .statis-block {
     text-align: center;
     margin-top: 20px;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 6bb09ac..56c1970 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -2,18 +2,29 @@
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
-            <!--<span>{{ dataForm.name }}</span>-->
-          </el-form-item>
-        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.name" disabled type="text"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
             <el-input v-model.trim="dataForm.name" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="在线状态">
+            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
+          </el-form-item>
+        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row :gutter="20">
@@ -31,20 +42,20 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态">
-            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item v-show="isFence" label="是否开启">
-            <el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="在线状态">-->
+            <!--<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.onlineStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item v-show="isFence" label="是否开启">-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row :gutter="20">
         <el-col :span="12">
@@ -61,14 +72,14 @@
         </el-col>
       </el-row>
 
-      <el-row v-show="isDoor" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="进出营">
-            <el-input v-model.trim="dataForm.inOutName" disabled type="text"/>
-            <!--<span>{{ dataForm.inOutName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row v-show="isDoor" :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row v-show="isIrisDev" :gutter="20">
         <el-col :span="24">
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index feb4b36..1fc121f 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号/设备名称" clearable />
+                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="4">
@@ -119,17 +119,22 @@
           value: 'devcode',
           align: 'center'
         },
-        {
-          text: '设备名称',
-          value: 'name',
-          align: 'center'
-        },
+        // {
+        //   text: '设备名称',
+        //   value: 'name',
+        //   align: 'center'
+        // },
         {
           text: '设备类型',
           value: 'typeName',
           align: 'center'
         },
         {
+          text: '设备型号',
+          value: 'model',
+          align: 'center'
+        },
+        {
           text: '在线状态',
           value: 'onlineStatusName',
           align: 'center'
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 4f48bd0..34e9041 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -100,22 +100,46 @@
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +174,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +243,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +269,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -337,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -349,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 6a92ca8..69b5f84 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -101,21 +101,46 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +175,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +244,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +270,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -336,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -348,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index b06847f..f452ea5 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -102,10 +102,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
@@ -151,11 +171,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+      <!--<el-col :span="24">设备名称-->
+      <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+      <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -192,452 +212,495 @@
 </template>
 
 <script>
-import { getProject } from '@/utils/baseConfig'
-import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
-import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+  import { getProject } from '@/utils/baseConfig'
+  import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
+  import { alarmListOverview } from '@/api/alarm'
+  import DeviceDetail from '@/views/deviceManage/deviceDetail'
+  import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+  import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+  import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+  import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
-const cameraTypes = [4, 5, 8, 9, 10, 11]
-const fenceTypes = [6, 7]
-const smokingTypes = [2]
-const temperatureTypes = [1]
-const soundTypes = [12]
-export default {
-  name: 'CtrlOverview',
-  components: { DeviceDetail },
-  data() {
-    return {
-      title: getProject().title,
-      bgImageSrc: tg_main,
-      devListParams: {
-        picture: '1',
-        deviceTypes: []
-      },
-      dev: {
-        alarm: 0,
-        onLine: 0,
-        closed: 0,
-        offLine: 0
-      },
-      imgSizeOriginal: {
-        width: 2245,
-        height: 1586
-      }, // 图片原尺寸
-      imgSize: {
-        width: 2245,
-        height: 1586
-      }, // 图片显示尺寸
-      winSize: {
-        width: 1440,
-        height: 789
-      }, // 屏幕窗口尺寸
-      halfLeft: 0,
-      footLeft: 0, // footer部分设备类型按钮偏移量
-      showFence: true, // 是否显示电子围栏按钮
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
-      showSubTabGuider: false, // 是否显示二级菜单指引
-      showFloorThree: false, // 是否显示三层
-      showFloorFour: false, // 是否显示四层
-      showDevDetail: false, // 是否显示设备详情
-      alarmList: [], // 报警列表
-      alarmColumns: [
-        {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center'
+  const cameraTypes = [4, 5, 8, 9, 10, 11]
+  const fenceTypes = [6, 7]
+  const smokingTypes = [2]
+  const temperatureTypes = [1]
+  const soundTypes = [12]
+  export default {
+    name: 'CtrlOverview',
+    components: { DeviceDetail },
+    data() {
+      return {
+        title: getProject().title,
+        bgImageSrc: tg_main,
+        devListParams: {
+          picture: '1',
+          deviceTypes: []
         },
-        {
-          text: '报警内容',
-          value: 'alarmContent',
-          align: 'center'
+        dev: {
+          alarm: 0,
+          onLine: 0,
+          closed: 0,
+          offLine: 0
         },
-        {
-          text: '报警时间',
-          value: 'alarmTime',
-          align: 'center',
-          width: 165
-        }
-      ], // 报警列表显示列
-      tableShow: true, // 是否显示告警列表
-      devList: [], // 设备列表（在地图上显示）
-      dataForm: {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
-      }, // 设备详情表单
-      isFence: false, // 是否电子围栏设备
-      checkDevType: [true, false, false, false, false, false] // 选中设备类型
-    }
-  },
-  mounted() {
-    this.initWindowSize()
-
-    this.fetchData()
-    this.fetchAlarmNowData()
-
-    const that = this
-    window.onresize = function() {
-      that.initWindowSize()
-      that.getBgImageSize()
-      // that.reDrawDevs()
-    }
-  },
-  methods: {
-    // 获取窗口大小
-    initWindowSize() {
-      // 获取窗体尺寸
-      this.winSize = {
-        width: document.documentElement.clientWidth,
-        height: document.documentElement.clientHeight
-      }
-
-      // 设置footer部分居中显示
-      if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 3 * 210) / 2
-      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 3 * 155) / 2
-      }
-    },
-    // 获取图像大小
-    getBgImageSize() {
-      // 获取图片尺寸
-      this.imgSize = {
-        width: this.$refs['bgImg'].width,
-        height: this.$refs['bgImg'].height
-      }
-      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
-    },
-    // 重新绘制设备点位
-    reDrawDevs() {
-      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
-
-      // 调整球机的设备位置
-      const that = this
-      this.devList.forEach(function(item) {
-        const point = document.getElementById(item.id)
-
-        if (point !== null) {
-          if (item.x !== '' && item.y !== '') {
-            point.style.position = 'absolute'
-            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
-            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
-          } else {
-            point.style.display = 'none'
+        imgSizeOriginal: {
+          width: 2245,
+          height: 1586
+        }, // 图片原尺寸
+        imgSize: {
+          width: 2245,
+          height: 1586
+        }, // 图片显示尺寸
+        winSize: {
+          width: 1440,
+          height: 789
+        }, // 屏幕窗口尺寸
+        halfLeft: 0,
+        footLeft: 0, // footer部分设备类型按钮偏移量
+        showFence: true, // 是否显示电子围栏按钮
+        showTemp: false, // 是否显示温湿度按钮
+        showSmoking: false, // 是否显示烟感按钮
+        showSound: false, // 是否显示声光报警按钮
+        showSubTabGuider: false, // 是否显示二级菜单指引
+        showFloorThree: false, // 是否显示三层
+        showFloorFour: false, // 是否显示四层
+        showDevDetail: false, // 是否显示设备详情
+        alarmList: [], // 报警列表
+        alarmColumns: [
+          {
+            text: '设备编号',
+            value: 'devcode',
+            align: 'center'
+          },
+          {
+            text: '报警内容',
+            value: 'alarmContent',
+            align: 'center'
+          },
+          {
+            text: '报警时间',
+            value: 'alarmTime',
+            align: 'center',
+            width: 165
           }
-        }
-      })
-    },
-    // 获取设备列表
-    fetchDeviceData() {
-      overviewDeviceList(this.devListParams).then(response => {
-        if (response.code === 200) {
-          const that = this
-          this.devList = []
-          response.data.forEach(dev => {
-            if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
-            }
-          })
-        }
-      })
-    },
-    // 平面图就绪时执行函数
-    backgroundImageReady() {
-      this.getBgImageSize()
-      this.fetchDeviceData()
-    },
-    // 获取设备状态统计值
-    fetchData() {
-      overviewDeviceStatus().then(response => {
-        if (response.code === 200) {
-          this.dev.alarm = response.data.alarm.length
-          this.dev.onLine = response.data.onLine.length
-          this.dev.closed = response.data.closed.length
-          this.dev.offLine = response.data.offLine.length
-        }
-      })
-    },
-    // 获取报警列表
-    fetchAlarmNowData() {
-      alarmListOverview().then(response => {
-        if (response.code === 200) {
-          this.alarmList = response.data
-        } else {
-          this.$message.error(response.message)
-        }
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    backToIndex() {
-      this.$router.push('/ctrl')
-    },
-    // 选择设备类型
-    selectDevByType(type, event) {
-      // 遍历所有的设备类型
-      const devTypes = document.querySelectorAll('.dev-icon')
-      for (let i = 0; i < devTypes.length; i++) {
-        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
-          devTypes[i].className = 'dev-icon el-col el-col-24'
-        }
-      }
-      this.checkDevType = [false, false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
-      }
-
-      if (type === 'all') {
-        this.devListParams.deviceTypes = []
-        this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
-        this.checkDevType[1] = true
-      } else if (type === 'fence') {
-        this.devListParams.deviceTypes = fenceTypes.toString()
-        this.checkDevType[2] = true
-      } else if (type === 'temperature') {
-        this.devListParams.deviceTypes = temperatureTypes.toString()
-        this.checkDevType[3] = true
-      } else if (type === 'smoking') {
-        this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
-      } else if (type === 'sound') {
-        this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
-      }
-      this.fetchDeviceData()
-    },
-    // 点击平面图一级按钮
-    selectMapTab(tab, event) {
-      // 遍历所有的地图
-      const mapTabs = document.querySelectorAll('.map-index-button')
-      for (let i = 0; i < mapTabs.length; i++) {
-        if (mapTabs[i].className.indexOf('index-selected') > -1) {
-          mapTabs[i].className = 'map-index-button'
-        }
-      }
-
-      // 添加选中的样式
-      event.currentTarget.className += ' index-selected'
-
-      // 选中三层
-      if (tab === 'three') {
-        this.showSubTabGuider = true
-        this.showFloorThree = true
-        this.showFloorFour = false
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-3'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '135px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '185px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '340px'
-          this.$refs['sub-tab-floor-3'].style.top = '220px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '102px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '140px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '245px'
-          this.$refs['sub-tab-floor-3'].style.top = '170px'
-        }
-      } else if (tab === 'four') {
-        this.showSubTabGuider = true
-        this.showFloorThree = false
-        this.showFloorFour = true
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '210px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '260px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '300px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '350px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '158px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '196px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '226px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '266px'
-        }
-      } else {
-        this.changeMap('tg_main')
+        ], // 报警列表显示列
+        tableShow: true, // 是否显示告警列表
+        devList: [], // 设备列表（在地图上显示）
+        dataForm: {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }, // 设备详情表单
+        isFence: false, // 是否电子围栏设备
+        itemColor: '#f58a88',
+        checkDevType: [true, false, false, false, false, false] // 选中设备类型
       }
     },
-    // 切换地图
-    changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
+    mounted() {
+      this.initWindowSize()
 
-      this.showSubTabGuider = false
-      this.showFloorThree = false
-      this.showFloorFour = false
+      this.fetchData()
+      this.fetchAlarmNowData()
 
-      if (index === 'tg_main') {
-        this.bgImageSrc = tg_main
-        this.devListParams.picture = '1'
+      const that = this
+      window.onresize = function() {
+        that.initWindowSize()
+        that.getBgImageSize()
+        // that.reDrawDevs()
+      }
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.selectDevByType(key,undefined)
+      },
+      // 获取窗口大小
+      initWindowSize() {
+        // 获取窗体尺寸
+        this.winSize = {
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        }
 
-        this.showFence = true // 显示电子围栏
-        this.showTemp = false // 隐藏温湿度设备
-        this.showSound = false // 隐藏声光报警设备
-        this.showSmoking = false // 隐藏烟感设备
+        // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
+      },
+      // 获取图像大小
+      getBgImageSize() {
+        // 获取图片尺寸
+        this.imgSize = {
+          width: this.$refs['bgImg'].width,
+          height: this.$refs['bgImg'].height
+        }
+        this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+      },
+      // 重新绘制设备点位
+      reDrawDevs() {
+        const halfLeft = (this.winSize.width - this.imgSize.width) / 2
 
-        // 将二级菜单的指引区隐藏
+        // 调整球机的设备位置
+        const that = this
+        this.devList.forEach(function(item) {
+          const point = document.getElementById(item.id)
+
+          if (point !== null) {
+            if (item.x !== '' && item.y !== '') {
+              point.style.position = 'absolute'
+              point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+              point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+            } else {
+              point.style.display = 'none'
+            }
+          }
+        })
+      },
+      // 获取设备列表
+      fetchDeviceData() {
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                that.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      // 平面图就绪时执行函数
+      backgroundImageReady() {
+        this.getBgImageSize()
+        this.fetchDeviceData()
+      },
+      // 获取设备状态统计值
+      fetchData() {
+        overviewDeviceStatus().then(response => {
+          if (response.code === 200) {
+            this.dev.alarm = response.data.alarm.length
+            this.dev.onLine = response.data.onLine.length
+            this.dev.closed = response.data.closed.length
+            this.dev.offLine = response.data.offLine.length
+          }
+        })
+      },
+      // 获取报警列表
+      fetchAlarmNowData() {
+        alarmListOverview().then(response => {
+          if (response.code === 200) {
+            this.alarmList = response.data
+          } else {
+            this.$message.error(response.message)
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      backToIndex() {
+        this.$router.push('/ctrl')
+      },
+      // 选择设备类型
+      selectDevByType(type, event) {
+        // 遍历所有的设备类型
+        const devTypes = document.querySelectorAll('.dev-icon')
+        for (let i = 0; i < devTypes.length; i++) {
+          if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+            devTypes[i].className = 'dev-icon el-col el-col-24'
+          }
+        }
+        this.checkDevType = [false, false, false, false, false, false]
+        if(type.length>2){
+          // 添加选中的样式
+          if (typeof event === 'undefined') {
+            devTypes[0].className += ' dev-type-selected'
+          } else {
+            event.currentTarget.className += ' dev-type-selected'
+          }
+        }
+
+        if (type === 'all') {
+          this.devListParams.deviceTypes = []
+          this.checkDevType[0] = true
+        } else if (type === 'camera') {
+          this.devListParams.deviceTypes = cameraTypes.toString()
+          this.checkDevType[1] = true
+        } else if (type === 'fence') {
+          this.devListParams.deviceTypes = fenceTypes.toString()
+          this.checkDevType[2] = true
+        } else if (type === 'temperature') {
+          this.devListParams.deviceTypes = temperatureTypes.toString()
+          this.checkDevType[3] = true
+        } else if (type === 'smoking') {
+          this.devListParams.deviceTypes = smokingTypes.toString()
+          this.checkDevType[4] = true
+        } else if (type === 'sound') {
+          this.devListParams.deviceTypes = soundTypes.toString()
+          this.checkDevType[5] = true
+        }else if(type === '4'){
+          this.devListParams.deviceTypes = '4'
+          this.checkDevType[1] = true
+        }else if(type === '5'){
+          this.devListParams.deviceTypes = '5'
+          this.checkDevType[1] = true
+        }else if(type === '8'){
+          this.devListParams.deviceTypes = '8'
+          this.checkDevType[1] = true
+        }else if(type === '9'){
+          this.devListParams.deviceTypes = '9'
+          this.checkDevType[1] = true
+        }else if(type === '10'){
+          this.devListParams.deviceTypes = '10'
+          this.checkDevType[1] = true
+        }else if(type === '11'){
+          this.devListParams.deviceTypes = '11'
+          this.checkDevType[1] = true
+        }
+        this.fetchDeviceData()
+        if(this.checkDevType[1]){
+          this.itemColor = '#f58a88'
+        }else{
+          this.itemColor = '#00D2FF'
+        }
+      },
+      // 点击平面图一级按钮
+      selectMapTab(tab, event) {
+        // 遍历所有的地图
+        const mapTabs = document.querySelectorAll('.map-index-button')
+        for (let i = 0; i < mapTabs.length; i++) {
+          if (mapTabs[i].className.indexOf('index-selected') > -1) {
+            mapTabs[i].className = 'map-index-button'
+          }
+        }
+
+        // 添加选中的样式
+        event.currentTarget.className += ' index-selected'
+
+        // 选中三层
+        if (tab === 'three') {
+          this.showSubTabGuider = true
+          this.showFloorThree = true
+          this.showFloorFour = false
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '135px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '185px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '340px'
+            this.$refs['sub-tab-floor-3'].style.top = '220px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '102px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '140px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '245px'
+            this.$refs['sub-tab-floor-3'].style.top = '170px'
+          }
+        } else if (tab === 'four') {
+          this.showSubTabGuider = true
+          this.showFloorThree = false
+          this.showFloorFour = true
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '210px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '260px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '158px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '196px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+          }
+        } else {
+          this.changeMap('tg_main')
+        }
+      },
+      // 切换地图
+      changeMap(index) {
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-      } else if (index === 'tg_3_1') {
-        this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      } else if (index === 'tg_4_1') {
-        this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
-        this.imgSizeOriginal = { width: 2218, height: 2169 }
+        if (index === 'tg_main') {
+          this.bgImageSrc = tg_main
+          this.devListParams.picture = '1'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = true // 显示温湿度
-        this.showSmoking = true // 显示烟感
-        this.showSound = true // 显示声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 5 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 5 * 155) / 2
-        }
-      } else if (index === 'tg_4_5') {
-        this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      }
-
-      this.selectDevByType('all')
-    },
-    // 查询并显示设备详情
-    detailDev(dev, event) {
-      this.resetDevDetail()
-      getDetailDevice(dev.id).then(response => {
-        if (response.code === 200) {
-          this.dataForm = {
-            id: dev.id,
-            name: dev.name,
-            devcode: dev.devcode,
-            typeName: response.data.typeName,
-            model: dev.model,
-            onlineStatusName: response.data.onlineStatusName,
-            position: dev.position,
-            installDate: dev.installDate,
-            inOutName: response.data.inOutName,
-            deviceStatusName: response.data.deviceStatusName
+          this.showFence = true // 显示电子围栏
+          this.showTemp = false // 隐藏温湿度设备
+          this.showSound = false // 隐藏声光报警设备
+          this.showSmoking = false // 隐藏烟感设备
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 3 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 3 * 155) / 2
           }
 
-          // 电子围栏设备有开启字段
-          if (dev.typeName.indexOf('电子围栏') >= 0) {
-            this.isFence = true
+          // 将二级菜单的指引区隐藏
+          this.showSubTabGuider = false
+          this.showFloorThree = false
+          this.showFloorFour = false
+        } else if (index === 'tg_3_1') {
+          this.bgImageSrc = tg_3_1
+          this.devListParams.picture = '2'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
           }
-        } else {
-          this.$message.error(response.message)
+        } else if (index === 'tg_4_1') {
+          this.bgImageSrc = tg_4_1
+          this.devListParams.picture = '3'
+          this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = true // 显示温湿度
+          this.showSmoking = true // 显示烟感
+          this.showSound = true // 显示声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 5 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 5 * 155) / 2
+          }
+        } else if (index === 'tg_4_5') {
+          this.bgImageSrc = tg_4_5
+          this.devListParams.picture = '4'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
+          }
         }
-      })
 
-      // 弹窗显示设备详情
-      const targetDev = event.currentTarget // 取到点击到的设备图标div
+        this.selectDevByType('all')
+      },
+      // 查询并显示设备详情
+      detailDev(dev, event) {
+        this.resetDevDetail()
+        getDetailDevice(dev.id).then(response => {
+          if (response.code === 200) {
+            this.dataForm = {
+              id: dev.id,
+              name: dev.name,
+              devcode: dev.devcode,
+              typeName: response.data.typeName,
+              model: dev.model,
+              onlineStatusName: response.data.onlineStatusName,
+              position: dev.position,
+              installDate: dev.installDate,
+              inOutName: response.data.inOutName,
+              deviceStatusName: response.data.deviceStatusName
+            }
 
-      this.showDevDetail = true
-      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
-      top = top + 100
-      this.$refs['dev-detail-block'].style.position = 'absolute'
-      this.$refs['dev-detail-block'].style.top = top + 'px'
-      this.$refs['dev-detail-block'].style.left = targetDev.style.left
-    },
-    // 点击报警列表
-    alarmRowClick(dev, column, event) {
+            // 电子围栏设备有开启字段
+            if (dev.typeName.indexOf('电子围栏') >= 0) {
+              this.isFence = true
+            }
+          } else {
+            this.$message.error(response.message)
+          }
+        })
 
-    },
-    // 清除设备详情
-    resetDevDetail() {
-      this.dataForm = {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+        this.showDevDetail = true
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['dev-detail-block'].style.position = 'absolute'
+        this.$refs['dev-detail-block'].style.top = top + 'px'
+        this.$refs['dev-detail-block'].style.left = targetDev.style.left
+      },
+      // 点击报警列表
+      alarmRowClick(dev, column, event) {
+
+      },
+      // 清除设备详情
+      resetDevDetail() {
+        this.dataForm = {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }
       }
     }
   }
-}
 </script>
 
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+   .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 
   .main-page {
@@ -714,7 +777,30 @@
     background-size: contain;
     @extend .point;
   }
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .statis-block {
     text-align: center;
     margin-top: 20px;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 6bb09ac..56c1970 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -2,18 +2,29 @@
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
-            <!--<span>{{ dataForm.name }}</span>-->
-          </el-form-item>
-        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.name" disabled type="text"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
             <el-input v-model.trim="dataForm.name" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="在线状态">
+            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
+          </el-form-item>
+        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row :gutter="20">
@@ -31,20 +42,20 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态">
-            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item v-show="isFence" label="是否开启">
-            <el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="在线状态">-->
+            <!--<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.onlineStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item v-show="isFence" label="是否开启">-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row :gutter="20">
         <el-col :span="12">
@@ -61,14 +72,14 @@
         </el-col>
       </el-row>
 
-      <el-row v-show="isDoor" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="进出营">
-            <el-input v-model.trim="dataForm.inOutName" disabled type="text"/>
-            <!--<span>{{ dataForm.inOutName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row v-show="isDoor" :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row v-show="isIrisDev" :gutter="20">
         <el-col :span="24">
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index feb4b36..1fc121f 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号/设备名称" clearable />
+                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="4">
@@ -119,17 +119,22 @@
           value: 'devcode',
           align: 'center'
         },
-        {
-          text: '设备名称',
-          value: 'name',
-          align: 'center'
-        },
+        // {
+        //   text: '设备名称',
+        //   value: 'name',
+        //   align: 'center'
+        // },
         {
           text: '设备类型',
           value: 'typeName',
           align: 'center'
         },
         {
+          text: '设备型号',
+          value: 'model',
+          align: 'center'
+        },
+        {
           text: '在线状态',
           value: 'onlineStatusName',
           align: 'center'
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 4f48bd0..34e9041 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -100,22 +100,46 @@
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +174,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +243,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +269,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -337,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -349,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 6a92ca8..69b5f84 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -101,21 +101,46 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +175,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +244,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +270,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -336,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -348,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index bf97bf5..ff732f9 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -101,10 +101,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
@@ -143,11 +163,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -182,9 +202,9 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 const smokingTypes = [2]
@@ -195,6 +215,7 @@
   components: { DeviceDetail },
   data() {
     return {
+      itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
@@ -278,6 +299,9 @@
     }
   },
   methods: {
+    handleSelect(key, keyPath) {
+      this.selectDevByType(key,undefined)
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -380,14 +404,14 @@
         }
       }
       this.checkDevType = [false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
+      if(type.length>2) {
+        // 添加选中的样式
+        if (typeof event === 'undefined') {
+          devTypes[0].className += ' dev-type-selected'
+        } else {
+          event.currentTarget.className += ' dev-type-selected'
+        }
       }
-
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
@@ -403,8 +427,31 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
+      }else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
+        this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[1] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[1] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[1] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[1] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[1] = true
       }
       this.fetchDeviceData()
+      if(this.checkDevType[1]){
+        this.itemColor = '#f58a88'
+      }else{
+        this.itemColor = '#00D2FF'
+      }
     },
     // 查询并显示设备详情
     detailDev(dev, event) {
@@ -590,9 +637,46 @@
   }
 }
 </script>
-
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+    .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;

diff --git a/src/api/area.js b/src/api/area.js
index 840acf2..e3667bd 100644
--- a/src/api/area.js
+++ b/src/api/area.js
@@ -89,7 +89,7 @@
 // 区域布防撤防
 export function updateDefence(params) {
   return request({
-    url: 'region/update',
+    url: 'region/updateRegionStatus',
     method: 'post',
     params
   })
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
deleted file mode 100644
index 623d80e..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-3-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-3-1.png b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
new file mode 100644
index 0000000..0ee6c29
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-3-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
deleted file mode 100644
index 77d2a33..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-1.png b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
new file mode 100644
index 0000000..5ca92f6
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg b/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
deleted file mode 100644
index b2df6b9..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg-4-5.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg-4-5.png b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
new file mode 100644
index 0000000..cfcf008
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-5.png
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.jpg b/src/assets/overview_images/tg/mapOverviewTg.jpg
deleted file mode 100644
index efb7371..0000000
--- a/src/assets/overview_images/tg/mapOverviewTg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/tg/mapOverviewTg.png b/src/assets/overview_images/tg/mapOverviewTg.png
new file mode 100644
index 0000000..52e938f
--- /dev/null
+++ b/src/assets/overview_images/tg/mapOverviewTg.png
Binary files differ
diff --git a/src/components/DownloadTemplate/index.vue b/src/components/DownloadTemplate/index.vue
index 5e5020f..8ded2cd 100644
--- a/src/components/DownloadTemplate/index.vue
+++ b/src/components/DownloadTemplate/index.vue
@@ -15,10 +15,8 @@
   methods: {
     // 下载模板
     downloadTemplate() {
-      console.log('###############################')
       if (this.filename !== '') {
         const filename = this.filename
-        console.log(filename)
         // 全屏加载动画
         const loading = this.$loading({
           lock: true,
diff --git a/src/views/alarm/alarmDetail.vue b/src/views/alarm/alarmDetail.vue
index 617d580..63c852a 100644
--- a/src/views/alarm/alarmDetail.vue
+++ b/src/views/alarm/alarmDetail.vue
@@ -48,18 +48,15 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20">
-        <el-col :span="12">
           <el-form-item label="所属防护">
             <el-input v-model.trim="dataForm.areaType" :disabled="isDetailMode" type="text" />
           </el-form-item>
         </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.devName" :disabled="isDetailMode" type="text" />-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row v-show="!dataForm.valid" :gutter="20">
diff --git a/src/views/alarm/alarmList.vue b/src/views/alarm/alarmList.vue
index 91967a0..2601cfc 100644
--- a/src/views/alarm/alarmList.vue
+++ b/src/views/alarm/alarmList.vue
@@ -64,12 +64,12 @@
           </template>
         </el-table-column>
         <!--操作列-->
-        <el-table-column label="操作" align="center" width="160">
-          <template slot-scope="scope">
-            <el-button type="text" @click="position(scope.row)">位置</el-button>
-            <el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>
-          </template>
-        </el-table-column>
+        <!--<el-table-column label="操作" align="center" width="160">-->
+          <!--<template slot-scope="scope">-->
+            <!--<el-button type="text" @click="position(scope.row)">位置</el-button>-->
+            <!--<el-button v-if="hasPerm('/car/update')" type="text" @click="video(scope.row)">视频</el-button>-->
+          <!--</template>-->
+        <!--</el-table-column>-->
       </el-table>
     </div>
     <!--分页-->
@@ -187,7 +187,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmMonitor.vue b/src/views/alarm/alarmMonitor.vue
index 517d6e9..fe1f4d7 100644
--- a/src/views/alarm/alarmMonitor.vue
+++ b/src/views/alarm/alarmMonitor.vue
@@ -1,80 +1,125 @@
 <template>
   <div>
     <el-row>
-      <!--<el-col :span="6">-->
-        <!--&lt;!&ndash;<video-tree @click="handleCameraClicked"/>&ndash;&gt;-->
-      <!--</el-col>-->
-
       <el-col :span="18" :offset="3">
-        <web-play ref="webCtrl" />
+        <el-card class="box-card" style="margin-top: 14px; height: calc(100vh - 170px);">
+          <div class="body-right">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="海康" name="hk">
+                <iframe name="playHK" class="iframe-body" src="/static/webCtrl/hk/demo_window_simple_playback.html"/>
+              </el-tab-pane>
+              <el-tab-pane label="NVR" name="nvr">
+                <iframe name="playNVR" class="iframe-body" src="/static/webCtrl/nvr/demo-easy.html"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-// import VideoTree from './videoTree'
-import WebPlay from './webPlay'
-import { getDetailDevice } from '@/api/device'
-export default {
-  name: 'VideoMonitor',
-  components: { WebPlay },
-  data() {
-    return {
-      camera:{
-        ip:'',
-        port:'',
-        username:'',
-        password:''
+  // import VideoTree from './videoTree'
+  // import WebPlay from './webPlay'
+  import { getDetailDevice } from '@/api/device'
+  export default {
+    name: 'VideoMonitor',
+    // components: { WebPlay },
+    data() {
+      return {
+        activeName: 'nvr',
+        videoShow: true,
+        listQuery: {
+          startTime: '',
+          endTime: ''
+        },
+        camera:{
+          ip:'',
+          port:'',
+          monitorPoint:'',
+          username:'',
+          password:''
+        }
       }
-    }
-  },
-  mounted() {
-
-  },
-  activated() {
-    if (this.$route.query && this.$route.query.id) {
-      const id = this.$route.query.id
-      getDetailDevice(id).then(response => {
+    },
+    mounted() {
+      if (this.$route.query && this.$route.query.id) {
+        const id = this.$route.query.id
+        this.listQuery.startTime = this.$route.query.time
+        var time =  new Date(this.listQuery.startTime)
+        var minute = time.getMinutes()
+        time.setMinutes(minute+5)
+        this.listQuery.endTime = time.toLocaleString()
+        getDetailDevice(id).then(response => {
           if (response.code === 200) {
             console.log(response.data)
             this.camera.ip = response.data.ip
             this.camera.port = response.data.port
+            this.camera.monitorPoint = response.data.monitorPoint
             this.camera.username = response.data.username
             this.camera.password = response.data.password
-            this.handleCamera()
+            this.initCamera()
           }
-      })
-    }
-  },
-  methods: {
-    handleCamera(){
-      if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
-        console.log('ip is null')
-        return false
+        })
       }
-      if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
-        console.log('port is null')
-        return false
-      }else{
-        this.camera.ip += (':'+ this.camera.port)
-      }
-      if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
-        console.log('username is null')
-        return false
-      }
-      if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
-        console.log('password is null')
-        return false
-      }
+    },
+    methods: {
+      handleClick(tab, event) {
+        this.initCamera()
+      },
+      initCamera(){
+        if(this.activeName === 'hk'){
+          // window.frames['playHK'].close()
+          if (typeof this.camera.monitorPoint === 'undefined' || this.camera.monitorPoint === '') {
+            console.log('monitorPoint is null')
+            return false
+          }
+          if (typeof this.listQuery.startTime === 'undefined' || this.listQuery.startTime === '') {
+            console.log('startTime is null')
+            return false
+          }
+          window.frames['playHK'].initPlugin()
+          window.frames['playHK'].stop()
+          window.frames['playHK'].search(this.camera.monitorPoint, this.listQuery.startTime, this.listQuery.endTime)
+        }else{
+          window.frames['playNVR'].stopPlayReal(null)
+          if (typeof this.camera.ip === 'undefined' || this.camera.ip === '') {
+            console.log('ip is null')
+            return false
+          }
+          if (typeof this.camera.port === 'undefined' || this.camera.port === '') {
+            console.log('port is null')
+            return false
+          }else{
+            this.camera.ip += (':'+ this.camera.port)
+          }
+          if (typeof this.camera.username === 'undefined' || this.camera.username === '') {
+            console.log('username is null')
+            return false
+          }
+          if (typeof this.camera.password === 'undefined' || this.camera.password === '') {
+            console.log('password is null')
+            return false
+          }
+          // 开始预览
+          window.frames['playNVR'].startPlayReal(this.camera)
+          window.frames['playNVR'].search(0, this.listQuery.startTime, this.listQuery.endTime)
+          // this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)  //   <web-play ref="webCtrl" />
+        }
 
-      // 开始预览
-      this.$refs.webCtrl.$refs.play.contentWindow.startPlayReal(this.camera)
+      }
     }
   }
-}
 </script>
 
 <style scoped>
-
+  .iframe-body{
+    height: calc(100vh - 305px);
+    width: 100%;
+    frameBorder: 0;
+    scrolling: no;
+    border: 0;
+    vspale: 0;
+  }
 </style>
diff --git a/src/views/alarm/alarmNow.vue b/src/views/alarm/alarmNow.vue
index 66055b1..4b47872 100644
--- a/src/views/alarm/alarmNow.vue
+++ b/src/views/alarm/alarmNow.vue
@@ -185,7 +185,7 @@
   methods: {
     video(row){
       const code = this.$store.getters.currentSystem.code
-      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId }})
+      this.$router.push({ path: '/' + code + '/alarm/video', query: { id: row.deviceId, time:row.alarmTime }})
     },
     position(row){
       const code = this.$store.getters.currentSystem.code
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 51f915e..402da42 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -15,11 +15,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -52,10 +52,10 @@
 <script>
 import { getProject } from '@/utils/baseConfig'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 import { getDetailDevice } from '@/api/device'
 
 // const cameraTypes = [4, 5, 8, 9, 10, 11]
diff --git a/src/views/alarm/webPlay.vue b/src/views/alarm/webPlay.vue
index 97e5ed2..8a18b6d 100644
--- a/src/views/alarm/webPlay.vue
+++ b/src/views/alarm/webPlay.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="play-window-block">
     <div style="height: 100%">
-      <iframe ref="play" src="/static/webCtrl/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
+      <iframe ref="play" src="/static/webCtrl/nvr/demo-easy.html" width="100%" height="100%" style="border: 0px; overflow: hidden;" />
     </div>
   </div>
 </template>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index b06847f..f452ea5 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -102,10 +102,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showFence" class="dev-icon" @click.native="selectDevByType('fence', $event)">
@@ -151,11 +171,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+      <!--<el-col :span="24">设备名称-->
+      <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+      <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -192,452 +212,495 @@
 </template>
 
 <script>
-import { getProject } from '@/utils/baseConfig'
-import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
-import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+  import { getProject } from '@/utils/baseConfig'
+  import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
+  import { alarmListOverview } from '@/api/alarm'
+  import DeviceDetail from '@/views/deviceManage/deviceDetail'
+  import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
+  import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+  import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+  import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
-const cameraTypes = [4, 5, 8, 9, 10, 11]
-const fenceTypes = [6, 7]
-const smokingTypes = [2]
-const temperatureTypes = [1]
-const soundTypes = [12]
-export default {
-  name: 'CtrlOverview',
-  components: { DeviceDetail },
-  data() {
-    return {
-      title: getProject().title,
-      bgImageSrc: tg_main,
-      devListParams: {
-        picture: '1',
-        deviceTypes: []
-      },
-      dev: {
-        alarm: 0,
-        onLine: 0,
-        closed: 0,
-        offLine: 0
-      },
-      imgSizeOriginal: {
-        width: 2245,
-        height: 1586
-      }, // 图片原尺寸
-      imgSize: {
-        width: 2245,
-        height: 1586
-      }, // 图片显示尺寸
-      winSize: {
-        width: 1440,
-        height: 789
-      }, // 屏幕窗口尺寸
-      halfLeft: 0,
-      footLeft: 0, // footer部分设备类型按钮偏移量
-      showFence: true, // 是否显示电子围栏按钮
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
-      showSubTabGuider: false, // 是否显示二级菜单指引
-      showFloorThree: false, // 是否显示三层
-      showFloorFour: false, // 是否显示四层
-      showDevDetail: false, // 是否显示设备详情
-      alarmList: [], // 报警列表
-      alarmColumns: [
-        {
-          text: '设备编号',
-          value: 'devcode',
-          align: 'center'
+  const cameraTypes = [4, 5, 8, 9, 10, 11]
+  const fenceTypes = [6, 7]
+  const smokingTypes = [2]
+  const temperatureTypes = [1]
+  const soundTypes = [12]
+  export default {
+    name: 'CtrlOverview',
+    components: { DeviceDetail },
+    data() {
+      return {
+        title: getProject().title,
+        bgImageSrc: tg_main,
+        devListParams: {
+          picture: '1',
+          deviceTypes: []
         },
-        {
-          text: '报警内容',
-          value: 'alarmContent',
-          align: 'center'
+        dev: {
+          alarm: 0,
+          onLine: 0,
+          closed: 0,
+          offLine: 0
         },
-        {
-          text: '报警时间',
-          value: 'alarmTime',
-          align: 'center',
-          width: 165
-        }
-      ], // 报警列表显示列
-      tableShow: true, // 是否显示告警列表
-      devList: [], // 设备列表（在地图上显示）
-      dataForm: {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
-      }, // 设备详情表单
-      isFence: false, // 是否电子围栏设备
-      checkDevType: [true, false, false, false, false, false] // 选中设备类型
-    }
-  },
-  mounted() {
-    this.initWindowSize()
-
-    this.fetchData()
-    this.fetchAlarmNowData()
-
-    const that = this
-    window.onresize = function() {
-      that.initWindowSize()
-      that.getBgImageSize()
-      // that.reDrawDevs()
-    }
-  },
-  methods: {
-    // 获取窗口大小
-    initWindowSize() {
-      // 获取窗体尺寸
-      this.winSize = {
-        width: document.documentElement.clientWidth,
-        height: document.documentElement.clientHeight
-      }
-
-      // 设置footer部分居中显示
-      if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 3 * 210) / 2
-      } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 3 * 155) / 2
-      }
-    },
-    // 获取图像大小
-    getBgImageSize() {
-      // 获取图片尺寸
-      this.imgSize = {
-        width: this.$refs['bgImg'].width,
-        height: this.$refs['bgImg'].height
-      }
-      this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
-    },
-    // 重新绘制设备点位
-    reDrawDevs() {
-      const halfLeft = (this.winSize.width - this.imgSize.width) / 2
-
-      // 调整球机的设备位置
-      const that = this
-      this.devList.forEach(function(item) {
-        const point = document.getElementById(item.id)
-
-        if (point !== null) {
-          if (item.x !== '' && item.y !== '') {
-            point.style.position = 'absolute'
-            point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
-            point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
-          } else {
-            point.style.display = 'none'
+        imgSizeOriginal: {
+          width: 2245,
+          height: 1586
+        }, // 图片原尺寸
+        imgSize: {
+          width: 2245,
+          height: 1586
+        }, // 图片显示尺寸
+        winSize: {
+          width: 1440,
+          height: 789
+        }, // 屏幕窗口尺寸
+        halfLeft: 0,
+        footLeft: 0, // footer部分设备类型按钮偏移量
+        showFence: true, // 是否显示电子围栏按钮
+        showTemp: false, // 是否显示温湿度按钮
+        showSmoking: false, // 是否显示烟感按钮
+        showSound: false, // 是否显示声光报警按钮
+        showSubTabGuider: false, // 是否显示二级菜单指引
+        showFloorThree: false, // 是否显示三层
+        showFloorFour: false, // 是否显示四层
+        showDevDetail: false, // 是否显示设备详情
+        alarmList: [], // 报警列表
+        alarmColumns: [
+          {
+            text: '设备编号',
+            value: 'devcode',
+            align: 'center'
+          },
+          {
+            text: '报警内容',
+            value: 'alarmContent',
+            align: 'center'
+          },
+          {
+            text: '报警时间',
+            value: 'alarmTime',
+            align: 'center',
+            width: 165
           }
-        }
-      })
-    },
-    // 获取设备列表
-    fetchDeviceData() {
-      overviewDeviceList(this.devListParams).then(response => {
-        if (response.code === 200) {
-          const that = this
-          this.devList = []
-          response.data.forEach(dev => {
-            if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
-            }
-          })
-        }
-      })
-    },
-    // 平面图就绪时执行函数
-    backgroundImageReady() {
-      this.getBgImageSize()
-      this.fetchDeviceData()
-    },
-    // 获取设备状态统计值
-    fetchData() {
-      overviewDeviceStatus().then(response => {
-        if (response.code === 200) {
-          this.dev.alarm = response.data.alarm.length
-          this.dev.onLine = response.data.onLine.length
-          this.dev.closed = response.data.closed.length
-          this.dev.offLine = response.data.offLine.length
-        }
-      })
-    },
-    // 获取报警列表
-    fetchAlarmNowData() {
-      alarmListOverview().then(response => {
-        if (response.code === 200) {
-          this.alarmList = response.data
-        } else {
-          this.$message.error(response.message)
-        }
-      })
-    },
-    logout() {
-      this.$store.dispatch('LogOut').then(() => {
-        location.reload() // 为了重新实例化vue-router对象 避免bug
-      })
-    },
-    backToIndex() {
-      this.$router.push('/ctrl')
-    },
-    // 选择设备类型
-    selectDevByType(type, event) {
-      // 遍历所有的设备类型
-      const devTypes = document.querySelectorAll('.dev-icon')
-      for (let i = 0; i < devTypes.length; i++) {
-        if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
-          devTypes[i].className = 'dev-icon el-col el-col-24'
-        }
-      }
-      this.checkDevType = [false, false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
-      }
-
-      if (type === 'all') {
-        this.devListParams.deviceTypes = []
-        this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
-        this.checkDevType[1] = true
-      } else if (type === 'fence') {
-        this.devListParams.deviceTypes = fenceTypes.toString()
-        this.checkDevType[2] = true
-      } else if (type === 'temperature') {
-        this.devListParams.deviceTypes = temperatureTypes.toString()
-        this.checkDevType[3] = true
-      } else if (type === 'smoking') {
-        this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
-      } else if (type === 'sound') {
-        this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
-      }
-      this.fetchDeviceData()
-    },
-    // 点击平面图一级按钮
-    selectMapTab(tab, event) {
-      // 遍历所有的地图
-      const mapTabs = document.querySelectorAll('.map-index-button')
-      for (let i = 0; i < mapTabs.length; i++) {
-        if (mapTabs[i].className.indexOf('index-selected') > -1) {
-          mapTabs[i].className = 'map-index-button'
-        }
-      }
-
-      // 添加选中的样式
-      event.currentTarget.className += ' index-selected'
-
-      // 选中三层
-      if (tab === 'three') {
-        this.showSubTabGuider = true
-        this.showFloorThree = true
-        this.showFloorFour = false
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-3'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '135px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '185px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '340px'
-          this.$refs['sub-tab-floor-3'].style.top = '220px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '102px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '140px'
-
-          this.$refs['sub-tab-floor-3'].style.right = '245px'
-          this.$refs['sub-tab-floor-3'].style.top = '170px'
-        }
-      } else if (tab === 'four') {
-        this.showSubTabGuider = true
-        this.showFloorThree = false
-        this.showFloorFour = true
-
-        this.$refs['sub-tab'].style.position = 'absolute'
-        this.$refs['sub-tab-border'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
-        this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
-
-        if (this.winSize.width >= 1920) {
-          this.$refs['sub-tab'].style.right = '290px'
-          this.$refs['sub-tab'].style.top = '210px'
-
-          this.$refs['sub-tab-border'].style.right = '335px'
-          this.$refs['sub-tab-border'].style.top = '260px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '300px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '340px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '350px'
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.$refs['sub-tab'].style.right = '215px'
-          this.$refs['sub-tab'].style.top = '158px'
-
-          this.$refs['sub-tab-border'].style.right = '245px'
-          this.$refs['sub-tab-border'].style.top = '196px'
-
-          this.$refs['sub-tab-floor-4-1'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-1'].style.top = '226px'
-
-          this.$refs['sub-tab-floor-4-5'].style.right = '245px'
-          this.$refs['sub-tab-floor-4-5'].style.top = '266px'
-        }
-      } else {
-        this.changeMap('tg_main')
+        ], // 报警列表显示列
+        tableShow: true, // 是否显示告警列表
+        devList: [], // 设备列表（在地图上显示）
+        dataForm: {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }, // 设备详情表单
+        isFence: false, // 是否电子围栏设备
+        itemColor: '#f58a88',
+        checkDevType: [true, false, false, false, false, false] // 选中设备类型
       }
     },
-    // 切换地图
-    changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
+    mounted() {
+      this.initWindowSize()
 
-      this.showSubTabGuider = false
-      this.showFloorThree = false
-      this.showFloorFour = false
+      this.fetchData()
+      this.fetchAlarmNowData()
 
-      if (index === 'tg_main') {
-        this.bgImageSrc = tg_main
-        this.devListParams.picture = '1'
+      const that = this
+      window.onresize = function() {
+        that.initWindowSize()
+        that.getBgImageSize()
+        // that.reDrawDevs()
+      }
+    },
+    methods: {
+      handleSelect(key, keyPath) {
+        this.selectDevByType(key,undefined)
+      },
+      // 获取窗口大小
+      initWindowSize() {
+        // 获取窗体尺寸
+        this.winSize = {
+          width: document.documentElement.clientWidth,
+          height: document.documentElement.clientHeight
+        }
 
-        this.showFence = true // 显示电子围栏
-        this.showTemp = false // 隐藏温湿度设备
-        this.showSound = false // 隐藏声光报警设备
-        this.showSmoking = false // 隐藏烟感设备
+        // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
+      },
+      // 获取图像大小
+      getBgImageSize() {
+        // 获取图片尺寸
+        this.imgSize = {
+          width: this.$refs['bgImg'].width,
+          height: this.$refs['bgImg'].height
+        }
+        this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+      },
+      // 重新绘制设备点位
+      reDrawDevs() {
+        const halfLeft = (this.winSize.width - this.imgSize.width) / 2
 
-        // 将二级菜单的指引区隐藏
+        // 调整球机的设备位置
+        const that = this
+        this.devList.forEach(function(item) {
+          const point = document.getElementById(item.id)
+
+          if (point !== null) {
+            if (item.x !== '' && item.y !== '') {
+              point.style.position = 'absolute'
+              point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+              point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+            } else {
+              point.style.display = 'none'
+            }
+          }
+        })
+      },
+      // 获取设备列表
+      fetchDeviceData() {
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                that.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      // 平面图就绪时执行函数
+      backgroundImageReady() {
+        this.getBgImageSize()
+        this.fetchDeviceData()
+      },
+      // 获取设备状态统计值
+      fetchData() {
+        overviewDeviceStatus().then(response => {
+          if (response.code === 200) {
+            this.dev.alarm = response.data.alarm.length
+            this.dev.onLine = response.data.onLine.length
+            this.dev.closed = response.data.closed.length
+            this.dev.offLine = response.data.offLine.length
+          }
+        })
+      },
+      // 获取报警列表
+      fetchAlarmNowData() {
+        alarmListOverview().then(response => {
+          if (response.code === 200) {
+            this.alarmList = response.data
+          } else {
+            this.$message.error(response.message)
+          }
+        })
+      },
+      logout() {
+        this.$store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      },
+      backToIndex() {
+        this.$router.push('/ctrl')
+      },
+      // 选择设备类型
+      selectDevByType(type, event) {
+        // 遍历所有的设备类型
+        const devTypes = document.querySelectorAll('.dev-icon')
+        for (let i = 0; i < devTypes.length; i++) {
+          if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+            devTypes[i].className = 'dev-icon el-col el-col-24'
+          }
+        }
+        this.checkDevType = [false, false, false, false, false, false]
+        if(type.length>2){
+          // 添加选中的样式
+          if (typeof event === 'undefined') {
+            devTypes[0].className += ' dev-type-selected'
+          } else {
+            event.currentTarget.className += ' dev-type-selected'
+          }
+        }
+
+        if (type === 'all') {
+          this.devListParams.deviceTypes = []
+          this.checkDevType[0] = true
+        } else if (type === 'camera') {
+          this.devListParams.deviceTypes = cameraTypes.toString()
+          this.checkDevType[1] = true
+        } else if (type === 'fence') {
+          this.devListParams.deviceTypes = fenceTypes.toString()
+          this.checkDevType[2] = true
+        } else if (type === 'temperature') {
+          this.devListParams.deviceTypes = temperatureTypes.toString()
+          this.checkDevType[3] = true
+        } else if (type === 'smoking') {
+          this.devListParams.deviceTypes = smokingTypes.toString()
+          this.checkDevType[4] = true
+        } else if (type === 'sound') {
+          this.devListParams.deviceTypes = soundTypes.toString()
+          this.checkDevType[5] = true
+        }else if(type === '4'){
+          this.devListParams.deviceTypes = '4'
+          this.checkDevType[1] = true
+        }else if(type === '5'){
+          this.devListParams.deviceTypes = '5'
+          this.checkDevType[1] = true
+        }else if(type === '8'){
+          this.devListParams.deviceTypes = '8'
+          this.checkDevType[1] = true
+        }else if(type === '9'){
+          this.devListParams.deviceTypes = '9'
+          this.checkDevType[1] = true
+        }else if(type === '10'){
+          this.devListParams.deviceTypes = '10'
+          this.checkDevType[1] = true
+        }else if(type === '11'){
+          this.devListParams.deviceTypes = '11'
+          this.checkDevType[1] = true
+        }
+        this.fetchDeviceData()
+        if(this.checkDevType[1]){
+          this.itemColor = '#f58a88'
+        }else{
+          this.itemColor = '#00D2FF'
+        }
+      },
+      // 点击平面图一级按钮
+      selectMapTab(tab, event) {
+        // 遍历所有的地图
+        const mapTabs = document.querySelectorAll('.map-index-button')
+        for (let i = 0; i < mapTabs.length; i++) {
+          if (mapTabs[i].className.indexOf('index-selected') > -1) {
+            mapTabs[i].className = 'map-index-button'
+          }
+        }
+
+        // 添加选中的样式
+        event.currentTarget.className += ' index-selected'
+
+        // 选中三层
+        if (tab === 'three') {
+          this.showSubTabGuider = true
+          this.showFloorThree = true
+          this.showFloorFour = false
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '135px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '185px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '340px'
+            this.$refs['sub-tab-floor-3'].style.top = '220px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '102px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '140px'
+
+            this.$refs['sub-tab-floor-3'].style.right = '245px'
+            this.$refs['sub-tab-floor-3'].style.top = '170px'
+          }
+        } else if (tab === 'four') {
+          this.showSubTabGuider = true
+          this.showFloorThree = false
+          this.showFloorFour = true
+
+          this.$refs['sub-tab'].style.position = 'absolute'
+          this.$refs['sub-tab-border'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+          this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+          if (this.winSize.width >= 1920) {
+            this.$refs['sub-tab'].style.right = '290px'
+            this.$refs['sub-tab'].style.top = '210px'
+
+            this.$refs['sub-tab-border'].style.right = '335px'
+            this.$refs['sub-tab-border'].style.top = '260px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.$refs['sub-tab'].style.right = '215px'
+            this.$refs['sub-tab'].style.top = '158px'
+
+            this.$refs['sub-tab-border'].style.right = '245px'
+            this.$refs['sub-tab-border'].style.top = '196px'
+
+            this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+            this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+            this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+          }
+        } else {
+          this.changeMap('tg_main')
+        }
+      },
+      // 切换地图
+      changeMap(index) {
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-      } else if (index === 'tg_3_1') {
-        this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      } else if (index === 'tg_4_1') {
-        this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
-        this.imgSizeOriginal = { width: 2218, height: 2169 }
+        if (index === 'tg_main') {
+          this.bgImageSrc = tg_main
+          this.devListParams.picture = '1'
 
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = true // 显示温湿度
-        this.showSmoking = true // 显示烟感
-        this.showSound = true // 显示声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 5 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 5 * 155) / 2
-        }
-      } else if (index === 'tg_4_5') {
-        this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
-        this.showFence = false // 隐藏电子围栏
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
-        if (this.winSize.width >= 1920) {
-          this.footLeft = (this.winSize.width - 2 * 210) / 2
-        } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-          this.footLeft = (this.winSize.width - 2 * 155) / 2
-        }
-      }
-
-      this.selectDevByType('all')
-    },
-    // 查询并显示设备详情
-    detailDev(dev, event) {
-      this.resetDevDetail()
-      getDetailDevice(dev.id).then(response => {
-        if (response.code === 200) {
-          this.dataForm = {
-            id: dev.id,
-            name: dev.name,
-            devcode: dev.devcode,
-            typeName: response.data.typeName,
-            model: dev.model,
-            onlineStatusName: response.data.onlineStatusName,
-            position: dev.position,
-            installDate: dev.installDate,
-            inOutName: response.data.inOutName,
-            deviceStatusName: response.data.deviceStatusName
+          this.showFence = true // 显示电子围栏
+          this.showTemp = false // 隐藏温湿度设备
+          this.showSound = false // 隐藏声光报警设备
+          this.showSmoking = false // 隐藏烟感设备
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 3 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 3 * 155) / 2
           }
 
-          // 电子围栏设备有开启字段
-          if (dev.typeName.indexOf('电子围栏') >= 0) {
-            this.isFence = true
+          // 将二级菜单的指引区隐藏
+          this.showSubTabGuider = false
+          this.showFloorThree = false
+          this.showFloorFour = false
+        } else if (index === 'tg_3_1') {
+          this.bgImageSrc = tg_3_1
+          this.devListParams.picture = '2'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
           }
-        } else {
-          this.$message.error(response.message)
+        } else if (index === 'tg_4_1') {
+          this.bgImageSrc = tg_4_1
+          this.devListParams.picture = '3'
+          this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = true // 显示温湿度
+          this.showSmoking = true // 显示烟感
+          this.showSound = true // 显示声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 5 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 5 * 155) / 2
+          }
+        } else if (index === 'tg_4_5') {
+          this.bgImageSrc = tg_4_5
+          this.devListParams.picture = '4'
+
+          this.showFence = false // 隐藏电子围栏
+          this.showTemp = false // 隐藏温湿度
+          this.showSmoking = false // 隐藏烟感
+          this.showSound = false // 隐藏声光报警器
+          if (this.winSize.width >= 1920) {
+            this.footLeft = (this.winSize.width - 2 * 210) / 2
+          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+            this.footLeft = (this.winSize.width - 2 * 155) / 2
+          }
         }
-      })
 
-      // 弹窗显示设备详情
-      const targetDev = event.currentTarget // 取到点击到的设备图标div
+        this.selectDevByType('all')
+      },
+      // 查询并显示设备详情
+      detailDev(dev, event) {
+        this.resetDevDetail()
+        getDetailDevice(dev.id).then(response => {
+          if (response.code === 200) {
+            this.dataForm = {
+              id: dev.id,
+              name: dev.name,
+              devcode: dev.devcode,
+              typeName: response.data.typeName,
+              model: dev.model,
+              onlineStatusName: response.data.onlineStatusName,
+              position: dev.position,
+              installDate: dev.installDate,
+              inOutName: response.data.inOutName,
+              deviceStatusName: response.data.deviceStatusName
+            }
 
-      this.showDevDetail = true
-      let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
-      top = top + 100
-      this.$refs['dev-detail-block'].style.position = 'absolute'
-      this.$refs['dev-detail-block'].style.top = top + 'px'
-      this.$refs['dev-detail-block'].style.left = targetDev.style.left
-    },
-    // 点击报警列表
-    alarmRowClick(dev, column, event) {
+            // 电子围栏设备有开启字段
+            if (dev.typeName.indexOf('电子围栏') >= 0) {
+              this.isFence = true
+            }
+          } else {
+            this.$message.error(response.message)
+          }
+        })
 
-    },
-    // 清除设备详情
-    resetDevDetail() {
-      this.dataForm = {
-        id: '', // id
-        name: '', // 设备名
-        devcode: '', // 设备编号
-        typeName: '', // 设备类型
-        model: '', // 设备型号
-        onlineStatusName: '', // 在线状态
-        deviceStatusName: '', // 设备状态
-        position: '', // 安装位置
-        installDate: '', // 安装日期
-        inOutName: '' // 进出营
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+        this.showDevDetail = true
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['dev-detail-block'].style.position = 'absolute'
+        this.$refs['dev-detail-block'].style.top = top + 'px'
+        this.$refs['dev-detail-block'].style.left = targetDev.style.left
+      },
+      // 点击报警列表
+      alarmRowClick(dev, column, event) {
+
+      },
+      // 清除设备详情
+      resetDevDetail() {
+        this.dataForm = {
+          id: '', // id
+          name: '', // 设备名
+          devcode: '', // 设备编号
+          typeName: '', // 设备类型
+          model: '', // 设备型号
+          onlineStatusName: '', // 在线状态
+          deviceStatusName: '', // 设备状态
+          position: '', // 安装位置
+          installDate: '', // 安装日期
+          inOutName: '' // 进出营
+        }
       }
     }
   }
-}
 </script>
 
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+   .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
 
   .main-page {
@@ -714,7 +777,30 @@
     background-size: contain;
     @extend .point;
   }
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .statis-block {
     text-align: center;
     margin-top: 20px;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 6bb09ac..56c1970 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -2,18 +2,29 @@
   <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible" append-to-body>
     <el-form ref="dataForm" :model="dataForm" label-well-code="right" label-width="110px">
       <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="设备名称">
-            <el-input v-model.trim="dataForm.name" disabled type="text"/>
-            <!--<span>{{ dataForm.name }}</span>-->
-          </el-form-item>
-        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="设备名称">-->
+            <!--<el-input v-model.trim="dataForm.name" disabled type="text"/>-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
         <el-col :span="12">
           <el-form-item label="设备编号">
             <el-input v-model.trim="dataForm.name" disabled type="text"/>
             <!--<span>{{ dataForm.devcode }}</span>-->
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="在线状态">
+            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
+            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
+          </el-form-item>
+        </el-col>
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
       </el-row>
 
       <el-row :gutter="20">
@@ -31,20 +42,20 @@
         </el-col>
       </el-row>
 
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="在线状态">
-            <el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.onlineStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item v-show="isFence" label="是否开启">
-            <el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>
-            <!--<span>{{ dataForm.deviceStatusName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="在线状态">-->
+            <!--<el-input v-model.trim="dataForm.onlineStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.onlineStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item v-show="isFence" label="是否开启">-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row :gutter="20">
         <el-col :span="12">
@@ -61,14 +72,14 @@
         </el-col>
       </el-row>
 
-      <el-row v-show="isDoor" :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="进出营">
-            <el-input v-model.trim="dataForm.inOutName" disabled type="text"/>
-            <!--<span>{{ dataForm.inOutName }}</span>-->
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <!--<el-row v-show="isDoor" :gutter="20">-->
+        <!--<el-col :span="12">-->
+          <!--<el-form-item label="进出营">-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
+            <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
+          <!--</el-form-item>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
 
       <el-row v-show="isIrisDev" :gutter="20">
         <el-col :span="24">
diff --git a/src/views/deviceManage/deviceList.vue b/src/views/deviceManage/deviceList.vue
index feb4b36..1fc121f 100644
--- a/src/views/deviceManage/deviceList.vue
+++ b/src/views/deviceManage/deviceList.vue
@@ -8,7 +8,7 @@
           <el-row>
             <el-col :span="4">
               <el-form-item class="selectForm-container-item">
-                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号/设备名称" clearable />
+                <el-input v-model.trim="listQuery.keywords" placeholder="设备编号" clearable />
               </el-form-item>
             </el-col>
             <el-col :span="4">
@@ -119,17 +119,22 @@
           value: 'devcode',
           align: 'center'
         },
-        {
-          text: '设备名称',
-          value: 'name',
-          align: 'center'
-        },
+        // {
+        //   text: '设备名称',
+        //   value: 'name',
+        //   align: 'center'
+        // },
         {
           text: '设备类型',
           value: 'typeName',
           align: 'center'
         },
         {
+          text: '设备型号',
+          value: 'model',
+          align: 'center'
+        },
+        {
           text: '在线状态',
           value: 'onlineStatusName',
           align: 'center'
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 4f48bd0..34e9041 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -100,22 +100,46 @@
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
         <span>全部</span>
       </el-col>
-
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +174,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +243,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +269,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -337,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -349,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 6a92ca8..69b5f84 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -101,21 +101,46 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +175,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +244,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +270,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -336,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -348,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index bf97bf5..ff732f9 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -101,10 +101,30 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" >
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span><el-menu
+          mode="horizontal"
+          @select="handleSelect"
+          class="menu-camera"
+          background-color="#00000000"
+          text-color = "#00D2FF"
+          :active-text-color="itemColor">
+          <el-submenu
+            index="1"
+            popper-class="pop-camera">
+            <span  slot="title" v-if="checkDevType[1]" style="color: #f58a88">摄像头</span>
+            <span  slot="title" v-else style="color: #00D2FF">摄像头</span>
+            <el-menu-item index="4">人脸识别摄像头</el-menu-item>
+            <el-menu-item index="5">车牌轨迹摄像头</el-menu-item>
+            <el-menu-item index="8">周界防护预警摄像头</el-menu-item>
+            <el-menu-item index="9">标准数字摄像头</el-menu-item>
+            <el-menu-item index="10">智能球形摄像头</el-menu-item>
+            <el-menu-item index="11">标准半球摄像头</el-menu-item>
+          </el-submenu>
+        </el-menu></span>
+        <!--<span>摄像头</span>-->
       </el-col>
 
       <el-col v-show="showTemp" class="dev-icon" @click.native="selectDevByType('temperature', $event)">
@@ -143,11 +163,11 @@
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -182,9 +202,9 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
-import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
-import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.png'
+import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.png'
+import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 const smokingTypes = [2]
@@ -195,6 +215,7 @@
   components: { DeviceDetail },
   data() {
     return {
+      itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
@@ -278,6 +299,9 @@
     }
   },
   methods: {
+    handleSelect(key, keyPath) {
+      this.selectDevByType(key,undefined)
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -380,14 +404,14 @@
         }
       }
       this.checkDevType = [false, false, false, false, false]
-
-      // 添加选中的样式
-      if (typeof event === 'undefined') {
-        devTypes[0].className += ' dev-type-selected'
-      } else {
-        event.currentTarget.className += ' dev-type-selected'
+      if(type.length>2) {
+        // 添加选中的样式
+        if (typeof event === 'undefined') {
+          devTypes[0].className += ' dev-type-selected'
+        } else {
+          event.currentTarget.className += ' dev-type-selected'
+        }
       }
-
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
@@ -403,8 +427,31 @@
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
         this.checkDevType[4] = true
+      }else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
+        this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[1] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[1] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[1] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[1] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[1] = true
       }
       this.fetchDeviceData()
+      if(this.checkDevType[1]){
+        this.itemColor = '#f58a88'
+      }else{
+        this.itemColor = '#00D2FF'
+      }
     },
     // 查询并显示设备详情
     detailDev(dev, event) {
@@ -590,9 +637,46 @@
   }
 }
 </script>
-
+<style lang="scss">
+  .pop-camera {
+    margin-bottom: 12px;
+    .el-menu--popup{
+      min-width: 160px !important;
+    }
+    .el-menu-item{
+      font-size: 15px;
+    }
+    .el-menu-item:hover{
+      background-color: rgba(2, 61, 131, 0.57) !important;
+      color: #f58a88 !important;
+    }
+  }
+</style>
 <style lang="scss" scoped>
-
+  .menu-camera {
+    /deep/ .el-submenu__title {
+      padding: 0px;
+      margin-left: 88px;
+    }
+    /deep/ .el-submenu__icon-arrow{
+      display: none;
+    }
+  }
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
+  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+  /deep/ .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
+    background-color: rgba(255, 255, 255, 0) !important;
+  }
+  /deep/ .menu-camera li{
+    margin-left: -88px !important;
+  }
+  /deep/ .el-menu.el-menu--horizontal {
+    border-bottom: solid 0px #e6e6e6;
+    width: 60px !important;
+  }
+  /deep/ .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    border-bottom-width: 0px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index cdc6c5c..449436c 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -101,21 +101,46 @@
         <span>全部</span>
       </el-col>
 
-      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('camera', $event)">
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img v-if="checkDevType[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>摄像头</span>
+        <span>人脸识别</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('5', $event)">
+        <img v-if="checkDevType[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>车牌轨迹</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('8', $event)">
+        <img v-if="checkDevType[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>周界防护</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('9', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准数字</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('10', $event)">
+        <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>智能球形</span>
+      </el-col>
+      <el-col ref="camera" class="dev-icon" @click.native="selectDevByType('11', $event)">
+        <img v-if="checkDevType[6]" src="@/assets/overview_images/icons/icon-camera-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
+        <span>标准半球</span>
       </el-col>
     </el-row>
 
     <!-- 右侧设备详情及操作区域 -->
     <div v-show="showDevDetail" ref="dev-detail-block" class="dev-detail-block">
       <span class="dev-detail-close" @click="showDevDetail=false" />
-      <el-row style="margin-top: -25px;">
-        <el-col :span="24">设备名称
-          <span class="dev-detail-span">{{ dataForm.name }}</span>
-        </el-col>
-      </el-row>
+      <!--<el-row style="margin-top: -25px;">-->
+        <!--<el-col :span="24">设备名称-->
+          <!--<span class="dev-detail-span">{{ dataForm.name }}</span>-->
+        <!--</el-col>-->
+      <!--</el-row>-->
       <el-row>
         <el-col :span="24">设备编号
           <span class="dev-detail-span">{{ dataForm.devcode }}</span>
@@ -150,7 +175,7 @@
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
 import { alarmListOverview } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
-import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
 const cameraTypes = [4, 5, 8, 9, 10, 11]
 export default {
@@ -219,7 +244,7 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
   mounted() {
@@ -245,9 +270,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 2 * 210) / 2
+        this.footLeft = (this.winSize.width - 7 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 2 * 155) / 2
+        this.footLeft = (this.winSize.width - 7 * 155) / 2
       }
     },
     // 获取图像大小
@@ -336,7 +361,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType = [false, false]
+      this.checkDevType =[false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -348,9 +373,24 @@
       if (type === 'all') {
         this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
-      } else if (type === 'camera') {
-        this.devListParams.deviceTypes = cameraTypes.toString()
+      } else if(type === '4'){
+        this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
+      }else if(type === '5'){
+        this.devListParams.deviceTypes = '5'
+        this.checkDevType[2] = true
+      }else if(type === '8'){
+        this.devListParams.deviceTypes = '8'
+        this.checkDevType[3] = true
+      }else if(type === '9'){
+        this.devListParams.deviceTypes = '9'
+        this.checkDevType[4] = true
+      }else if(type === '10'){
+        this.devListParams.deviceTypes = '10'
+        this.checkDevType[5] = true
+      }else if(type === '11'){
+        this.devListParams.deviceTypes = '11'
+        this.checkDevType[6] = true
       }
       this.fetchDeviceData()
     },