diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /dev/null
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 0d89301..2e15516 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -84,57 +84,51 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
-        <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>车牌轨迹</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
-        <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>周界防护</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
-        <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准数字</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
-        <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>智能球形</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
-        <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准半球</span>
-      </el-col>
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
+        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>车牌轨迹</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
+        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>周界防护</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
+        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准数字</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
+        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>智能球形</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
+        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准半球</span>-->
+      <!--</el-col>-->
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -156,11 +150,11 @@
         <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
         <span>烟感</span>
       </el-col>
-      <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-      <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-      <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-      <!--<span>声光报警</span>-->
-      <!--</el-col>-->
+      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+        <span>声光报警</span>
+      </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -211,13 +205,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 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'
@@ -232,13 +265,27 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
         picture: '2',
         areaTypeId: 4,
-        deviceTypes: []
+        deviceTypes: '1,2,4,12'
       },
       dev: {
         alarm: 0,
@@ -258,11 +305,13 @@
         width: 1440,
         height: 789
       }, // 屏幕窗口尺寸
+      cameraTypeNum: 5,
+      btnwidth: 210,
       halfLeft: 0,
       footLeft: 0, // footer部分设备类型按钮偏移量
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
+      showTemp: true, // 是否显示温湿度按钮
+      showSmoking: true, // 是否显示烟感按钮
+      showSound: true, // 是否显示声光报警按钮
       showSubTabGuider: false, // 是否显示二级菜单指引
       showFloorThree: false, // 是否显示三层
       showFloorFour: false, // 是否显示四层
@@ -315,8 +364,11 @@
       }
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
-    window.addEventListener('click',this.handleKeyup)
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -330,8 +382,9 @@
   },
   methods: {
     handleKeyup(val){ //单击收起摄像头分类
-      console.log(val)
-      var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+      this.showAlarmDetail  = false
+      this.showDevDetail  = false
+      var item = ['人脸识别']
       for(var i=0;i<item.length;i++){
         if(item[i]===val.target.innerText){
           return
@@ -345,7 +398,7 @@
         const devTypes = document.querySelectorAll('.dev-icon')
         for(var i=0;i<this.checkDevType.length;i++) {
           if (this.checkDevType[i]) {
-            devTypes[i+6].className += ' dev-type-selected'
+            devTypes[i+1].className += ' dev-type-selected'
           }
         }
       }
@@ -363,8 +416,10 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
+        this.btnwidth= 210
         this.footLeft = (this.winSize.width - 2 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+        this.btnwidth= 155
         this.footLeft = (this.winSize.width - 2 * 155) / 2
       }
     },
@@ -405,7 +460,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              this.devList.push(dev)
             }
           })
         }
@@ -457,7 +549,7 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[0].className += ' dev-type-selected'
+          devTypes[1].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
@@ -467,7 +559,12 @@
         this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        if(this.bgImageSrc===tg_4_5){
+          this.devListParams.deviceTypes = '4'
+        }else{
+          this.devListParams.deviceTypes = '1,2,4,12'
+        }
+        // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
       } else if(type==='camera'){
         for(var i=0;i<this.checkDevType1.length;i++){
@@ -476,18 +573,15 @@
           }
         }
         return
-      } 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
+        this.checkDevType[2] = true
       } else if (type === 'smoking') {
         this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
+        this.checkDevType[3] = true
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
+        this.checkDevType[4] = true
       }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
@@ -542,15 +636,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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
+      }
     },
     // 点击平面图一级按钮
     selectMapTab(tab, event) {
@@ -635,19 +746,89 @@
     },
     // 切换地图
     changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
-
       this.showSubTabGuider = false
       this.showFloorThree = false
       this.showFloorFour = false
-
+      if(index === 'tg_4_5'){
+        this.devListParams.deviceTypes = '4'
+      }else{
+        this.devListParams.deviceTypes = '1,2,4,12'
+      }
+      // this.devListParams.deviceTypes = []
+      if (index === 'tg_main') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '1'
+      }else if (index === 'tg_3_1') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '2'
+      } else if (index === 'tg_4_1') {
+        // this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.devListParams.picture = '3'
+      }else if (index === 'tg_4_5') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '4'
+      }
+      overviewDeviceList(this.devListParams).then(response => {
+        if (response.code === 200) {
+          const that = this
+          this.devList = []
+          response.data.forEach(dev => {
+            if (dev.x !== '' && dev.y !== '') {
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              that.devList.push(dev)
+            }
+          })
+          this.initMap(index)
+        }
+      })
+    },
+    // 切换地图
+    initMap(index) {
       if (index === 'tg_3_1') {
         this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        // this.devListParams.picture = '2'
+        this.cameraTypeNum = 5
 
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
+        this.showTemp = true // 隐藏温湿度
+        this.showSmoking = true // 隐藏烟感
+        this.showSound = true // 隐藏声光报警器
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 2 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
@@ -655,8 +836,9 @@
         }
       } else if (index === 'tg_4_1') {
         this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
+        // this.devListParams.picture = '3'
         this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.cameraTypeNum = 5
 
         this.showTemp = true // 显示温湿度
         this.showSmoking = true // 显示烟感
@@ -668,8 +850,9 @@
         }
       } else if (index === 'tg_4_5') {
         this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
+        // this.devListParams.picture = '4'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.cameraTypeNum = 2
         this.showTemp = false // 隐藏温湿度
         this.showSmoking = false // 隐藏烟感
         this.showSound = false // 隐藏声光报警器
@@ -688,6 +871,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -720,6 +904,12 @@
   }
 </style>
 <style lang="scss" scoped>
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .menu-camera {
     /deep/ .el-submenu__title {
       padding: 0px;
@@ -809,7 +999,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 0d89301..2e15516 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -84,57 +84,51 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
-        <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>车牌轨迹</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
-        <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>周界防护</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
-        <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准数字</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
-        <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>智能球形</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
-        <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准半球</span>
-      </el-col>
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
+        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>车牌轨迹</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
+        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>周界防护</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
+        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准数字</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
+        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>智能球形</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
+        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准半球</span>-->
+      <!--</el-col>-->
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -156,11 +150,11 @@
         <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
         <span>烟感</span>
       </el-col>
-      <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-      <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-      <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-      <!--<span>声光报警</span>-->
-      <!--</el-col>-->
+      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+        <span>声光报警</span>
+      </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -211,13 +205,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 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'
@@ -232,13 +265,27 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
         picture: '2',
         areaTypeId: 4,
-        deviceTypes: []
+        deviceTypes: '1,2,4,12'
       },
       dev: {
         alarm: 0,
@@ -258,11 +305,13 @@
         width: 1440,
         height: 789
       }, // 屏幕窗口尺寸
+      cameraTypeNum: 5,
+      btnwidth: 210,
       halfLeft: 0,
       footLeft: 0, // footer部分设备类型按钮偏移量
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
+      showTemp: true, // 是否显示温湿度按钮
+      showSmoking: true, // 是否显示烟感按钮
+      showSound: true, // 是否显示声光报警按钮
       showSubTabGuider: false, // 是否显示二级菜单指引
       showFloorThree: false, // 是否显示三层
       showFloorFour: false, // 是否显示四层
@@ -315,8 +364,11 @@
       }
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
-    window.addEventListener('click',this.handleKeyup)
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -330,8 +382,9 @@
   },
   methods: {
     handleKeyup(val){ //单击收起摄像头分类
-      console.log(val)
-      var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+      this.showAlarmDetail  = false
+      this.showDevDetail  = false
+      var item = ['人脸识别']
       for(var i=0;i<item.length;i++){
         if(item[i]===val.target.innerText){
           return
@@ -345,7 +398,7 @@
         const devTypes = document.querySelectorAll('.dev-icon')
         for(var i=0;i<this.checkDevType.length;i++) {
           if (this.checkDevType[i]) {
-            devTypes[i+6].className += ' dev-type-selected'
+            devTypes[i+1].className += ' dev-type-selected'
           }
         }
       }
@@ -363,8 +416,10 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
+        this.btnwidth= 210
         this.footLeft = (this.winSize.width - 2 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+        this.btnwidth= 155
         this.footLeft = (this.winSize.width - 2 * 155) / 2
       }
     },
@@ -405,7 +460,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              this.devList.push(dev)
             }
           })
         }
@@ -457,7 +549,7 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[0].className += ' dev-type-selected'
+          devTypes[1].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
@@ -467,7 +559,12 @@
         this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        if(this.bgImageSrc===tg_4_5){
+          this.devListParams.deviceTypes = '4'
+        }else{
+          this.devListParams.deviceTypes = '1,2,4,12'
+        }
+        // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
       } else if(type==='camera'){
         for(var i=0;i<this.checkDevType1.length;i++){
@@ -476,18 +573,15 @@
           }
         }
         return
-      } 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
+        this.checkDevType[2] = true
       } else if (type === 'smoking') {
         this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
+        this.checkDevType[3] = true
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
+        this.checkDevType[4] = true
       }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
@@ -542,15 +636,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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
+      }
     },
     // 点击平面图一级按钮
     selectMapTab(tab, event) {
@@ -635,19 +746,89 @@
     },
     // 切换地图
     changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
-
       this.showSubTabGuider = false
       this.showFloorThree = false
       this.showFloorFour = false
-
+      if(index === 'tg_4_5'){
+        this.devListParams.deviceTypes = '4'
+      }else{
+        this.devListParams.deviceTypes = '1,2,4,12'
+      }
+      // this.devListParams.deviceTypes = []
+      if (index === 'tg_main') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '1'
+      }else if (index === 'tg_3_1') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '2'
+      } else if (index === 'tg_4_1') {
+        // this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.devListParams.picture = '3'
+      }else if (index === 'tg_4_5') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '4'
+      }
+      overviewDeviceList(this.devListParams).then(response => {
+        if (response.code === 200) {
+          const that = this
+          this.devList = []
+          response.data.forEach(dev => {
+            if (dev.x !== '' && dev.y !== '') {
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              that.devList.push(dev)
+            }
+          })
+          this.initMap(index)
+        }
+      })
+    },
+    // 切换地图
+    initMap(index) {
       if (index === 'tg_3_1') {
         this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        // this.devListParams.picture = '2'
+        this.cameraTypeNum = 5
 
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
+        this.showTemp = true // 隐藏温湿度
+        this.showSmoking = true // 隐藏烟感
+        this.showSound = true // 隐藏声光报警器
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 2 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
@@ -655,8 +836,9 @@
         }
       } else if (index === 'tg_4_1') {
         this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
+        // this.devListParams.picture = '3'
         this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.cameraTypeNum = 5
 
         this.showTemp = true // 显示温湿度
         this.showSmoking = true // 显示烟感
@@ -668,8 +850,9 @@
         }
       } else if (index === 'tg_4_5') {
         this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
+        // this.devListParams.picture = '4'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.cameraTypeNum = 2
         this.showTemp = false // 隐藏温湿度
         this.showSmoking = false // 隐藏烟感
         this.showSound = false // 隐藏声光报警器
@@ -688,6 +871,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -720,6 +904,12 @@
   }
 </style>
 <style lang="scss" scoped>
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .menu-camera {
     /deep/ .el-submenu__title {
       padding: 0px;
@@ -809,7 +999,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index f20530a..640a0f8 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -106,16 +107,16 @@
         <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('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('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">
@@ -167,13 +168,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +223,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '3',
         areaTypeId: 3,
-        deviceTypes: []
+        deviceTypes: '4,9,10,11'
       },
       dev: {
         alarm: 0,
@@ -247,7 +301,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -260,6 +318,10 @@
     }
   },
   methods: {
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -270,9 +332,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 5 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 5 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +374,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +471,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,9,10,11'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -416,15 +516,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
@@ -432,6 +549,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +634,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 0d89301..2e15516 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -84,57 +84,51 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
-        <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>车牌轨迹</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
-        <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>周界防护</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
-        <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准数字</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
-        <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>智能球形</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
-        <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准半球</span>
-      </el-col>
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
+        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>车牌轨迹</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
+        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>周界防护</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
+        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准数字</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
+        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>智能球形</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
+        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准半球</span>-->
+      <!--</el-col>-->
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -156,11 +150,11 @@
         <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
         <span>烟感</span>
       </el-col>
-      <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-      <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-      <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-      <!--<span>声光报警</span>-->
-      <!--</el-col>-->
+      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+        <span>声光报警</span>
+      </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -211,13 +205,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 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'
@@ -232,13 +265,27 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
         picture: '2',
         areaTypeId: 4,
-        deviceTypes: []
+        deviceTypes: '1,2,4,12'
       },
       dev: {
         alarm: 0,
@@ -258,11 +305,13 @@
         width: 1440,
         height: 789
       }, // 屏幕窗口尺寸
+      cameraTypeNum: 5,
+      btnwidth: 210,
       halfLeft: 0,
       footLeft: 0, // footer部分设备类型按钮偏移量
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
+      showTemp: true, // 是否显示温湿度按钮
+      showSmoking: true, // 是否显示烟感按钮
+      showSound: true, // 是否显示声光报警按钮
       showSubTabGuider: false, // 是否显示二级菜单指引
       showFloorThree: false, // 是否显示三层
       showFloorFour: false, // 是否显示四层
@@ -315,8 +364,11 @@
       }
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
-    window.addEventListener('click',this.handleKeyup)
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -330,8 +382,9 @@
   },
   methods: {
     handleKeyup(val){ //单击收起摄像头分类
-      console.log(val)
-      var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+      this.showAlarmDetail  = false
+      this.showDevDetail  = false
+      var item = ['人脸识别']
       for(var i=0;i<item.length;i++){
         if(item[i]===val.target.innerText){
           return
@@ -345,7 +398,7 @@
         const devTypes = document.querySelectorAll('.dev-icon')
         for(var i=0;i<this.checkDevType.length;i++) {
           if (this.checkDevType[i]) {
-            devTypes[i+6].className += ' dev-type-selected'
+            devTypes[i+1].className += ' dev-type-selected'
           }
         }
       }
@@ -363,8 +416,10 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
+        this.btnwidth= 210
         this.footLeft = (this.winSize.width - 2 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+        this.btnwidth= 155
         this.footLeft = (this.winSize.width - 2 * 155) / 2
       }
     },
@@ -405,7 +460,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              this.devList.push(dev)
             }
           })
         }
@@ -457,7 +549,7 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[0].className += ' dev-type-selected'
+          devTypes[1].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
@@ -467,7 +559,12 @@
         this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        if(this.bgImageSrc===tg_4_5){
+          this.devListParams.deviceTypes = '4'
+        }else{
+          this.devListParams.deviceTypes = '1,2,4,12'
+        }
+        // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
       } else if(type==='camera'){
         for(var i=0;i<this.checkDevType1.length;i++){
@@ -476,18 +573,15 @@
           }
         }
         return
-      } 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
+        this.checkDevType[2] = true
       } else if (type === 'smoking') {
         this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
+        this.checkDevType[3] = true
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
+        this.checkDevType[4] = true
       }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
@@ -542,15 +636,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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
+      }
     },
     // 点击平面图一级按钮
     selectMapTab(tab, event) {
@@ -635,19 +746,89 @@
     },
     // 切换地图
     changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
-
       this.showSubTabGuider = false
       this.showFloorThree = false
       this.showFloorFour = false
-
+      if(index === 'tg_4_5'){
+        this.devListParams.deviceTypes = '4'
+      }else{
+        this.devListParams.deviceTypes = '1,2,4,12'
+      }
+      // this.devListParams.deviceTypes = []
+      if (index === 'tg_main') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '1'
+      }else if (index === 'tg_3_1') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '2'
+      } else if (index === 'tg_4_1') {
+        // this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.devListParams.picture = '3'
+      }else if (index === 'tg_4_5') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '4'
+      }
+      overviewDeviceList(this.devListParams).then(response => {
+        if (response.code === 200) {
+          const that = this
+          this.devList = []
+          response.data.forEach(dev => {
+            if (dev.x !== '' && dev.y !== '') {
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              that.devList.push(dev)
+            }
+          })
+          this.initMap(index)
+        }
+      })
+    },
+    // 切换地图
+    initMap(index) {
       if (index === 'tg_3_1') {
         this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        // this.devListParams.picture = '2'
+        this.cameraTypeNum = 5
 
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
+        this.showTemp = true // 隐藏温湿度
+        this.showSmoking = true // 隐藏烟感
+        this.showSound = true // 隐藏声光报警器
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 2 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
@@ -655,8 +836,9 @@
         }
       } else if (index === 'tg_4_1') {
         this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
+        // this.devListParams.picture = '3'
         this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.cameraTypeNum = 5
 
         this.showTemp = true // 显示温湿度
         this.showSmoking = true // 显示烟感
@@ -668,8 +850,9 @@
         }
       } else if (index === 'tg_4_5') {
         this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
+        // this.devListParams.picture = '4'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.cameraTypeNum = 2
         this.showTemp = false // 隐藏温湿度
         this.showSmoking = false // 隐藏烟感
         this.showSound = false // 隐藏声光报警器
@@ -688,6 +871,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -720,6 +904,12 @@
   }
 </style>
 <style lang="scss" scoped>
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .menu-camera {
     /deep/ .el-submenu__title {
       padding: 0px;
@@ -809,7 +999,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index f20530a..640a0f8 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -106,16 +107,16 @@
         <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('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('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">
@@ -167,13 +168,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +223,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '3',
         areaTypeId: 3,
-        deviceTypes: []
+        deviceTypes: '4,9,10,11'
       },
       dev: {
         alarm: 0,
@@ -247,7 +301,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -260,6 +318,10 @@
     }
   },
   methods: {
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -270,9 +332,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 5 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 5 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +374,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +471,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,9,10,11'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -416,15 +516,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
@@ -432,6 +549,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +634,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index c07299b..a68be4c 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,13 +16,13 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <el-input v-model="dataForm.name" readonly type="text"/>
+                <el-input v-model="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="dataForm.idCard" readonly type="text"/>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
                 <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
@@ -31,19 +31,19 @@
           <el-row :gutter="20">
             <!--<el-col :span="12">-->
               <!--<el-form-item label="出生日期">-->
-                <!--<el-input v-model="dataForm.birthday" readonly type="text"/>-->
+                <!--<el-input v-model="dataForm.birthday" disabled type="text"/>-->
                 <!--&lt;!&ndash;<span>{{ dataForm.birthday }}</span>&ndash;&gt;-->
               <!--</el-form-item>-->
             <!--</el-col>-->
             <el-col :span="12">
               <el-form-item label="性别">
-                <el-input v-model="dataForm.sex" readonly type="text"/>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
                 <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <el-input v-model="dataForm.phone" readonly type="text"/>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
                 <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
@@ -51,7 +51,7 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <el-input v-model="dataForm.deptName" readonly type="text"/>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
                 <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
@@ -60,7 +60,7 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <el-input v-model="dataForm.address" readonly type="text"/>
+                <el-input v-model="dataForm.address" disabled type="text"/>
                 <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 0d89301..2e15516 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -84,57 +84,51 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
-        <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>车牌轨迹</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
-        <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>周界防护</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
-        <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准数字</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
-        <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>智能球形</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
-        <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准半球</span>
-      </el-col>
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
+        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>车牌轨迹</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
+        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>周界防护</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
+        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准数字</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
+        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>智能球形</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
+        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准半球</span>-->
+      <!--</el-col>-->
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -156,11 +150,11 @@
         <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
         <span>烟感</span>
       </el-col>
-      <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-      <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-      <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-      <!--<span>声光报警</span>-->
-      <!--</el-col>-->
+      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+        <span>声光报警</span>
+      </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -211,13 +205,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 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'
@@ -232,13 +265,27 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
         picture: '2',
         areaTypeId: 4,
-        deviceTypes: []
+        deviceTypes: '1,2,4,12'
       },
       dev: {
         alarm: 0,
@@ -258,11 +305,13 @@
         width: 1440,
         height: 789
       }, // 屏幕窗口尺寸
+      cameraTypeNum: 5,
+      btnwidth: 210,
       halfLeft: 0,
       footLeft: 0, // footer部分设备类型按钮偏移量
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
+      showTemp: true, // 是否显示温湿度按钮
+      showSmoking: true, // 是否显示烟感按钮
+      showSound: true, // 是否显示声光报警按钮
       showSubTabGuider: false, // 是否显示二级菜单指引
       showFloorThree: false, // 是否显示三层
       showFloorFour: false, // 是否显示四层
@@ -315,8 +364,11 @@
       }
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
-    window.addEventListener('click',this.handleKeyup)
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -330,8 +382,9 @@
   },
   methods: {
     handleKeyup(val){ //单击收起摄像头分类
-      console.log(val)
-      var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+      this.showAlarmDetail  = false
+      this.showDevDetail  = false
+      var item = ['人脸识别']
       for(var i=0;i<item.length;i++){
         if(item[i]===val.target.innerText){
           return
@@ -345,7 +398,7 @@
         const devTypes = document.querySelectorAll('.dev-icon')
         for(var i=0;i<this.checkDevType.length;i++) {
           if (this.checkDevType[i]) {
-            devTypes[i+6].className += ' dev-type-selected'
+            devTypes[i+1].className += ' dev-type-selected'
           }
         }
       }
@@ -363,8 +416,10 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
+        this.btnwidth= 210
         this.footLeft = (this.winSize.width - 2 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+        this.btnwidth= 155
         this.footLeft = (this.winSize.width - 2 * 155) / 2
       }
     },
@@ -405,7 +460,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              this.devList.push(dev)
             }
           })
         }
@@ -457,7 +549,7 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[0].className += ' dev-type-selected'
+          devTypes[1].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
@@ -467,7 +559,12 @@
         this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        if(this.bgImageSrc===tg_4_5){
+          this.devListParams.deviceTypes = '4'
+        }else{
+          this.devListParams.deviceTypes = '1,2,4,12'
+        }
+        // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
       } else if(type==='camera'){
         for(var i=0;i<this.checkDevType1.length;i++){
@@ -476,18 +573,15 @@
           }
         }
         return
-      } 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
+        this.checkDevType[2] = true
       } else if (type === 'smoking') {
         this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
+        this.checkDevType[3] = true
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
+        this.checkDevType[4] = true
       }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
@@ -542,15 +636,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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
+      }
     },
     // 点击平面图一级按钮
     selectMapTab(tab, event) {
@@ -635,19 +746,89 @@
     },
     // 切换地图
     changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
-
       this.showSubTabGuider = false
       this.showFloorThree = false
       this.showFloorFour = false
-
+      if(index === 'tg_4_5'){
+        this.devListParams.deviceTypes = '4'
+      }else{
+        this.devListParams.deviceTypes = '1,2,4,12'
+      }
+      // this.devListParams.deviceTypes = []
+      if (index === 'tg_main') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '1'
+      }else if (index === 'tg_3_1') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '2'
+      } else if (index === 'tg_4_1') {
+        // this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.devListParams.picture = '3'
+      }else if (index === 'tg_4_5') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '4'
+      }
+      overviewDeviceList(this.devListParams).then(response => {
+        if (response.code === 200) {
+          const that = this
+          this.devList = []
+          response.data.forEach(dev => {
+            if (dev.x !== '' && dev.y !== '') {
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              that.devList.push(dev)
+            }
+          })
+          this.initMap(index)
+        }
+      })
+    },
+    // 切换地图
+    initMap(index) {
       if (index === 'tg_3_1') {
         this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        // this.devListParams.picture = '2'
+        this.cameraTypeNum = 5
 
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
+        this.showTemp = true // 隐藏温湿度
+        this.showSmoking = true // 隐藏烟感
+        this.showSound = true // 隐藏声光报警器
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 2 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
@@ -655,8 +836,9 @@
         }
       } else if (index === 'tg_4_1') {
         this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
+        // this.devListParams.picture = '3'
         this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.cameraTypeNum = 5
 
         this.showTemp = true // 显示温湿度
         this.showSmoking = true // 显示烟感
@@ -668,8 +850,9 @@
         }
       } else if (index === 'tg_4_5') {
         this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
+        // this.devListParams.picture = '4'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.cameraTypeNum = 2
         this.showTemp = false // 隐藏温湿度
         this.showSmoking = false // 隐藏烟感
         this.showSound = false // 隐藏声光报警器
@@ -688,6 +871,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -720,6 +904,12 @@
   }
 </style>
 <style lang="scss" scoped>
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .menu-camera {
     /deep/ .el-submenu__title {
       padding: 0px;
@@ -809,7 +999,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index f20530a..640a0f8 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -106,16 +107,16 @@
         <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('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('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">
@@ -167,13 +168,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +223,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '3',
         areaTypeId: 3,
-        deviceTypes: []
+        deviceTypes: '4,9,10,11'
       },
       dev: {
         alarm: 0,
@@ -247,7 +301,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -260,6 +318,10 @@
     }
   },
   methods: {
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -270,9 +332,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 5 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 5 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +374,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +471,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,9,10,11'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -416,15 +516,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
@@ -432,6 +549,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +634,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index c07299b..a68be4c 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,13 +16,13 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <el-input v-model="dataForm.name" readonly type="text"/>
+                <el-input v-model="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="dataForm.idCard" readonly type="text"/>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
                 <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
@@ -31,19 +31,19 @@
           <el-row :gutter="20">
             <!--<el-col :span="12">-->
               <!--<el-form-item label="出生日期">-->
-                <!--<el-input v-model="dataForm.birthday" readonly type="text"/>-->
+                <!--<el-input v-model="dataForm.birthday" disabled type="text"/>-->
                 <!--&lt;!&ndash;<span>{{ dataForm.birthday }}</span>&ndash;&gt;-->
               <!--</el-form-item>-->
             <!--</el-col>-->
             <el-col :span="12">
               <el-form-item label="性别">
-                <el-input v-model="dataForm.sex" readonly type="text"/>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
                 <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <el-input v-model="dataForm.phone" readonly type="text"/>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
                 <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
@@ -51,7 +51,7 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <el-input v-model="dataForm.deptName" readonly type="text"/>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
                 <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
@@ -60,7 +60,7 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <el-input v-model="dataForm.address" readonly type="text"/>
+                <el-input v-model="dataForm.address" disabled type="text"/>
                 <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 8d458c6..87ec546 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -50,7 +50,7 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="接访部门" prop="deptid">
-              <el-select v-show="!isDetailMode" v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
+              <el-select v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
                 <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
               <!--<dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 0d89301..2e15516 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -84,57 +84,51 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
-        <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>车牌轨迹</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
-        <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>周界防护</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
-        <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准数字</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
-        <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>智能球形</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
-        <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准半球</span>
-      </el-col>
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
+        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>车牌轨迹</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
+        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>周界防护</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
+        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准数字</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
+        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>智能球形</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
+        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准半球</span>-->
+      <!--</el-col>-->
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -156,11 +150,11 @@
         <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
         <span>烟感</span>
       </el-col>
-      <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-      <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-      <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-      <!--<span>声光报警</span>-->
-      <!--</el-col>-->
+      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+        <span>声光报警</span>
+      </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -211,13 +205,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 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'
@@ -232,13 +265,27 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
         picture: '2',
         areaTypeId: 4,
-        deviceTypes: []
+        deviceTypes: '1,2,4,12'
       },
       dev: {
         alarm: 0,
@@ -258,11 +305,13 @@
         width: 1440,
         height: 789
       }, // 屏幕窗口尺寸
+      cameraTypeNum: 5,
+      btnwidth: 210,
       halfLeft: 0,
       footLeft: 0, // footer部分设备类型按钮偏移量
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
+      showTemp: true, // 是否显示温湿度按钮
+      showSmoking: true, // 是否显示烟感按钮
+      showSound: true, // 是否显示声光报警按钮
       showSubTabGuider: false, // 是否显示二级菜单指引
       showFloorThree: false, // 是否显示三层
       showFloorFour: false, // 是否显示四层
@@ -315,8 +364,11 @@
       }
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
-    window.addEventListener('click',this.handleKeyup)
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -330,8 +382,9 @@
   },
   methods: {
     handleKeyup(val){ //单击收起摄像头分类
-      console.log(val)
-      var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+      this.showAlarmDetail  = false
+      this.showDevDetail  = false
+      var item = ['人脸识别']
       for(var i=0;i<item.length;i++){
         if(item[i]===val.target.innerText){
           return
@@ -345,7 +398,7 @@
         const devTypes = document.querySelectorAll('.dev-icon')
         for(var i=0;i<this.checkDevType.length;i++) {
           if (this.checkDevType[i]) {
-            devTypes[i+6].className += ' dev-type-selected'
+            devTypes[i+1].className += ' dev-type-selected'
           }
         }
       }
@@ -363,8 +416,10 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
+        this.btnwidth= 210
         this.footLeft = (this.winSize.width - 2 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+        this.btnwidth= 155
         this.footLeft = (this.winSize.width - 2 * 155) / 2
       }
     },
@@ -405,7 +460,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              this.devList.push(dev)
             }
           })
         }
@@ -457,7 +549,7 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[0].className += ' dev-type-selected'
+          devTypes[1].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
@@ -467,7 +559,12 @@
         this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        if(this.bgImageSrc===tg_4_5){
+          this.devListParams.deviceTypes = '4'
+        }else{
+          this.devListParams.deviceTypes = '1,2,4,12'
+        }
+        // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
       } else if(type==='camera'){
         for(var i=0;i<this.checkDevType1.length;i++){
@@ -476,18 +573,15 @@
           }
         }
         return
-      } 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
+        this.checkDevType[2] = true
       } else if (type === 'smoking') {
         this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
+        this.checkDevType[3] = true
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
+        this.checkDevType[4] = true
       }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
@@ -542,15 +636,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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
+      }
     },
     // 点击平面图一级按钮
     selectMapTab(tab, event) {
@@ -635,19 +746,89 @@
     },
     // 切换地图
     changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
-
       this.showSubTabGuider = false
       this.showFloorThree = false
       this.showFloorFour = false
-
+      if(index === 'tg_4_5'){
+        this.devListParams.deviceTypes = '4'
+      }else{
+        this.devListParams.deviceTypes = '1,2,4,12'
+      }
+      // this.devListParams.deviceTypes = []
+      if (index === 'tg_main') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '1'
+      }else if (index === 'tg_3_1') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '2'
+      } else if (index === 'tg_4_1') {
+        // this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.devListParams.picture = '3'
+      }else if (index === 'tg_4_5') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '4'
+      }
+      overviewDeviceList(this.devListParams).then(response => {
+        if (response.code === 200) {
+          const that = this
+          this.devList = []
+          response.data.forEach(dev => {
+            if (dev.x !== '' && dev.y !== '') {
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              that.devList.push(dev)
+            }
+          })
+          this.initMap(index)
+        }
+      })
+    },
+    // 切换地图
+    initMap(index) {
       if (index === 'tg_3_1') {
         this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        // this.devListParams.picture = '2'
+        this.cameraTypeNum = 5
 
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
+        this.showTemp = true // 隐藏温湿度
+        this.showSmoking = true // 隐藏烟感
+        this.showSound = true // 隐藏声光报警器
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 2 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
@@ -655,8 +836,9 @@
         }
       } else if (index === 'tg_4_1') {
         this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
+        // this.devListParams.picture = '3'
         this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.cameraTypeNum = 5
 
         this.showTemp = true // 显示温湿度
         this.showSmoking = true // 显示烟感
@@ -668,8 +850,9 @@
         }
       } else if (index === 'tg_4_5') {
         this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
+        // this.devListParams.picture = '4'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.cameraTypeNum = 2
         this.showTemp = false // 隐藏温湿度
         this.showSmoking = false // 隐藏烟感
         this.showSound = false // 隐藏声光报警器
@@ -688,6 +871,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -720,6 +904,12 @@
   }
 </style>
 <style lang="scss" scoped>
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .menu-camera {
     /deep/ .el-submenu__title {
       padding: 0px;
@@ -809,7 +999,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index f20530a..640a0f8 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -106,16 +107,16 @@
         <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('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('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">
@@ -167,13 +168,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +223,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '3',
         areaTypeId: 3,
-        deviceTypes: []
+        deviceTypes: '4,9,10,11'
       },
       dev: {
         alarm: 0,
@@ -247,7 +301,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -260,6 +318,10 @@
     }
   },
   methods: {
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -270,9 +332,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 5 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 5 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +374,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +471,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,9,10,11'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -416,15 +516,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
@@ -432,6 +549,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +634,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index c07299b..a68be4c 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,13 +16,13 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <el-input v-model="dataForm.name" readonly type="text"/>
+                <el-input v-model="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="dataForm.idCard" readonly type="text"/>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
                 <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
@@ -31,19 +31,19 @@
           <el-row :gutter="20">
             <!--<el-col :span="12">-->
               <!--<el-form-item label="出生日期">-->
-                <!--<el-input v-model="dataForm.birthday" readonly type="text"/>-->
+                <!--<el-input v-model="dataForm.birthday" disabled type="text"/>-->
                 <!--&lt;!&ndash;<span>{{ dataForm.birthday }}</span>&ndash;&gt;-->
               <!--</el-form-item>-->
             <!--</el-col>-->
             <el-col :span="12">
               <el-form-item label="性别">
-                <el-input v-model="dataForm.sex" readonly type="text"/>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
                 <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <el-input v-model="dataForm.phone" readonly type="text"/>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
                 <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
@@ -51,7 +51,7 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <el-input v-model="dataForm.deptName" readonly type="text"/>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
                 <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
@@ -60,7 +60,7 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <el-input v-model="dataForm.address" readonly type="text"/>
+                <el-input v-model="dataForm.address" disabled type="text"/>
                 <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 8d458c6..87ec546 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -50,7 +50,7 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="接访部门" prop="deptid">
-              <el-select v-show="!isDetailMode" v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
+              <el-select v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
                 <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
               <!--<dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index f4de0fd..8513b4c 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -77,7 +77,7 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="接访部门" prop="deptid">
-              <el-select v-show="!isDetailMode" v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
+              <el-select v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
                 <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
               <!--<dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
@@ -118,9 +118,9 @@
         </el-row>
 
         <el-row :gutter="20">
-          <el-col :span="4">
+          <el-col :span="12">
             <el-form-item label="剩余车位">
-              <el-input v-model.trim="carNum" readonly type="text" />
+              <el-input v-model.trim="carNum" disabled type="text" style="width: 80px" />
             </el-form-item>
           </el-col>
         </el-row>

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 0d89301..2e15516 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -84,57 +84,51 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
-        <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>车牌轨迹</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
-        <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>周界防护</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
-        <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准数字</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
-        <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>智能球形</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
-        <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准半球</span>
-      </el-col>
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
+        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>车牌轨迹</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
+        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>周界防护</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
+        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准数字</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
+        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>智能球形</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
+        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准半球</span>-->
+      <!--</el-col>-->
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -156,11 +150,11 @@
         <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
         <span>烟感</span>
       </el-col>
-      <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-      <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-      <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-      <!--<span>声光报警</span>-->
-      <!--</el-col>-->
+      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+        <span>声光报警</span>
+      </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -211,13 +205,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 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'
@@ -232,13 +265,27 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
         picture: '2',
         areaTypeId: 4,
-        deviceTypes: []
+        deviceTypes: '1,2,4,12'
       },
       dev: {
         alarm: 0,
@@ -258,11 +305,13 @@
         width: 1440,
         height: 789
       }, // 屏幕窗口尺寸
+      cameraTypeNum: 5,
+      btnwidth: 210,
       halfLeft: 0,
       footLeft: 0, // footer部分设备类型按钮偏移量
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
+      showTemp: true, // 是否显示温湿度按钮
+      showSmoking: true, // 是否显示烟感按钮
+      showSound: true, // 是否显示声光报警按钮
       showSubTabGuider: false, // 是否显示二级菜单指引
       showFloorThree: false, // 是否显示三层
       showFloorFour: false, // 是否显示四层
@@ -315,8 +364,11 @@
       }
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
-    window.addEventListener('click',this.handleKeyup)
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -330,8 +382,9 @@
   },
   methods: {
     handleKeyup(val){ //单击收起摄像头分类
-      console.log(val)
-      var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+      this.showAlarmDetail  = false
+      this.showDevDetail  = false
+      var item = ['人脸识别']
       for(var i=0;i<item.length;i++){
         if(item[i]===val.target.innerText){
           return
@@ -345,7 +398,7 @@
         const devTypes = document.querySelectorAll('.dev-icon')
         for(var i=0;i<this.checkDevType.length;i++) {
           if (this.checkDevType[i]) {
-            devTypes[i+6].className += ' dev-type-selected'
+            devTypes[i+1].className += ' dev-type-selected'
           }
         }
       }
@@ -363,8 +416,10 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
+        this.btnwidth= 210
         this.footLeft = (this.winSize.width - 2 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+        this.btnwidth= 155
         this.footLeft = (this.winSize.width - 2 * 155) / 2
       }
     },
@@ -405,7 +460,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              this.devList.push(dev)
             }
           })
         }
@@ -457,7 +549,7 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[0].className += ' dev-type-selected'
+          devTypes[1].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
@@ -467,7 +559,12 @@
         this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        if(this.bgImageSrc===tg_4_5){
+          this.devListParams.deviceTypes = '4'
+        }else{
+          this.devListParams.deviceTypes = '1,2,4,12'
+        }
+        // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
       } else if(type==='camera'){
         for(var i=0;i<this.checkDevType1.length;i++){
@@ -476,18 +573,15 @@
           }
         }
         return
-      } 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
+        this.checkDevType[2] = true
       } else if (type === 'smoking') {
         this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
+        this.checkDevType[3] = true
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
+        this.checkDevType[4] = true
       }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
@@ -542,15 +636,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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
+      }
     },
     // 点击平面图一级按钮
     selectMapTab(tab, event) {
@@ -635,19 +746,89 @@
     },
     // 切换地图
     changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
-
       this.showSubTabGuider = false
       this.showFloorThree = false
       this.showFloorFour = false
-
+      if(index === 'tg_4_5'){
+        this.devListParams.deviceTypes = '4'
+      }else{
+        this.devListParams.deviceTypes = '1,2,4,12'
+      }
+      // this.devListParams.deviceTypes = []
+      if (index === 'tg_main') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '1'
+      }else if (index === 'tg_3_1') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '2'
+      } else if (index === 'tg_4_1') {
+        // this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.devListParams.picture = '3'
+      }else if (index === 'tg_4_5') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '4'
+      }
+      overviewDeviceList(this.devListParams).then(response => {
+        if (response.code === 200) {
+          const that = this
+          this.devList = []
+          response.data.forEach(dev => {
+            if (dev.x !== '' && dev.y !== '') {
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              that.devList.push(dev)
+            }
+          })
+          this.initMap(index)
+        }
+      })
+    },
+    // 切换地图
+    initMap(index) {
       if (index === 'tg_3_1') {
         this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        // this.devListParams.picture = '2'
+        this.cameraTypeNum = 5
 
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
+        this.showTemp = true // 隐藏温湿度
+        this.showSmoking = true // 隐藏烟感
+        this.showSound = true // 隐藏声光报警器
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 2 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
@@ -655,8 +836,9 @@
         }
       } else if (index === 'tg_4_1') {
         this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
+        // this.devListParams.picture = '3'
         this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.cameraTypeNum = 5
 
         this.showTemp = true // 显示温湿度
         this.showSmoking = true // 显示烟感
@@ -668,8 +850,9 @@
         }
       } else if (index === 'tg_4_5') {
         this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
+        // this.devListParams.picture = '4'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.cameraTypeNum = 2
         this.showTemp = false // 隐藏温湿度
         this.showSmoking = false // 隐藏烟感
         this.showSound = false // 隐藏声光报警器
@@ -688,6 +871,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -720,6 +904,12 @@
   }
 </style>
 <style lang="scss" scoped>
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .menu-camera {
     /deep/ .el-submenu__title {
       padding: 0px;
@@ -809,7 +999,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index f20530a..640a0f8 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -106,16 +107,16 @@
         <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('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('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">
@@ -167,13 +168,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +223,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '3',
         areaTypeId: 3,
-        deviceTypes: []
+        deviceTypes: '4,9,10,11'
       },
       dev: {
         alarm: 0,
@@ -247,7 +301,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -260,6 +318,10 @@
     }
   },
   methods: {
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -270,9 +332,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 5 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 5 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +374,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +471,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,9,10,11'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -416,15 +516,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
@@ -432,6 +549,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +634,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index c07299b..a68be4c 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,13 +16,13 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <el-input v-model="dataForm.name" readonly type="text"/>
+                <el-input v-model="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="dataForm.idCard" readonly type="text"/>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
                 <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
@@ -31,19 +31,19 @@
           <el-row :gutter="20">
             <!--<el-col :span="12">-->
               <!--<el-form-item label="出生日期">-->
-                <!--<el-input v-model="dataForm.birthday" readonly type="text"/>-->
+                <!--<el-input v-model="dataForm.birthday" disabled type="text"/>-->
                 <!--&lt;!&ndash;<span>{{ dataForm.birthday }}</span>&ndash;&gt;-->
               <!--</el-form-item>-->
             <!--</el-col>-->
             <el-col :span="12">
               <el-form-item label="性别">
-                <el-input v-model="dataForm.sex" readonly type="text"/>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
                 <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <el-input v-model="dataForm.phone" readonly type="text"/>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
                 <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
@@ -51,7 +51,7 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <el-input v-model="dataForm.deptName" readonly type="text"/>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
                 <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
@@ -60,7 +60,7 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <el-input v-model="dataForm.address" readonly type="text"/>
+                <el-input v-model="dataForm.address" disabled type="text"/>
                 <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 8d458c6..87ec546 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -50,7 +50,7 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="接访部门" prop="deptid">
-              <el-select v-show="!isDetailMode" v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
+              <el-select v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
                 <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
               <!--<dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index f4de0fd..8513b4c 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -77,7 +77,7 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="接访部门" prop="deptid">
-              <el-select v-show="!isDetailMode" v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
+              <el-select v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
                 <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
               <!--<dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
@@ -118,9 +118,9 @@
         </el-row>
 
         <el-row :gutter="20">
-          <el-col :span="4">
+          <el-col :span="12">
             <el-form-item label="剩余车位">
-              <el-input v-model.trim="carNum" readonly type="text" />
+              <el-input v-model.trim="carNum" disabled type="text" style="width: 80px" />
             </el-form-item>
           </el-col>
         </el-row>
diff --git a/theme/icon.css b/theme/icon.css
index 7b43b7c..cf2ff0c 100644
--- a/theme/icon.css
+++ b/theme/icon.css
@@ -295,7 +295,8 @@
   content: "\e6da"; }
 
 .el-icon-close:before {
-  content: "\e6db"; }
+  content: "\e6db";
+}
 
 .el-icon-d-arrow-right:before {
   content: "\e6dc"; }

diff --git a/config/dev.env.js b/config/dev.env.js
index 51c5a47..6b4622a 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,6 +6,6 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  // BASE_API: '"http://192.168.0.212:20220"'
+  // BASE_API: '"http://192.168.5.220:20311"'
   BASE_API: '"http://111.198.10.15:11631"'
 })
diff --git a/src/api/alarm.js b/src/api/alarm.js
index 4141914..c1bbe3e 100644
--- a/src/api/alarm.js
+++ b/src/api/alarm.js
@@ -7,6 +7,14 @@
     method: 'get',
     params
   })
+}export function alarmDetailbyCode(devcode	) {
+  return request({
+    url: '/alarm/getCurrentAlarmDetailByDevcode',
+    method: 'get',
+    params:{
+      devcode:devcode
+    }
+  })
 }
 
 // 查询历史报警记录
diff --git a/src/assets/overview_images/icons/camera-blue.png b/src/assets/overview_images/icons/camera-blue.png
new file mode 100644
index 0000000..3fe070e
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-green.png b/src/assets/overview_images/icons/camera-green.png
new file mode 100644
index 0000000..e8a0d66
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/camera-red.png b/src/assets/overview_images/icons/camera-red.png
new file mode 100644
index 0000000..14fc247
--- /dev/null
+++ b/src/assets/overview_images/icons/camera-red.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-blue.png b/src/assets/overview_images/icons/half-camera-blue.png
new file mode 100644
index 0000000..5c56a20
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-blue.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-green.png b/src/assets/overview_images/icons/half-camera-green.png
new file mode 100644
index 0000000..bc8c4b6
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-green.png
Binary files differ
diff --git a/src/assets/overview_images/icons/half-camera-red.png b/src/assets/overview_images/icons/half-camera-red.png
new file mode 100644
index 0000000..fa07acd
--- /dev/null
+++ b/src/assets/overview_images/icons/half-camera-red.png
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
deleted file mode 100644
index fa07acd..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
deleted file mode 100644
index bc8c4b6..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png" "b/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
deleted file mode 100644
index 5c56a20..0000000
--- "a/src/assets/overview_images/icons/\345\215\212\347\220\203-\350\223\235.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
deleted file mode 100644
index 14fc247..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\272\242.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
deleted file mode 100644
index e8a0d66..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\347\273\277.png"
+++ /dev/null
Binary files differ
diff --git "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png" "b/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
deleted file mode 100644
index 3fe070e..0000000
--- "a/src/assets/overview_images/icons/\347\220\203\346\234\272-\350\223\235.png"
+++ /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
index 5ca92f6..2c0eec5 100644
--- a/src/assets/overview_images/tg/mapOverviewTg-4-1.png
+++ b/src/assets/overview_images/tg/mapOverviewTg-4-1.png
Binary files differ
diff --git a/src/router/modules/ctrlSys.js b/src/router/modules/ctrlSys.js
index 843284d..c849d44 100644
--- a/src/router/modules/ctrlSys.js
+++ b/src/router/modules/ctrlSys.js
@@ -29,7 +29,7 @@
         path: '/ctrl/index',
         name: 'CtrlIndex',
         component: () => import('@/views/ctrl/index'),
-        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'], keepAlive: true }
+        meta: { title: '综合控制室首页', icon: '', permission: ['/ctrl/index'] }
       }
     ]
   },
@@ -49,7 +49,7 @@
         path: '/ctrl/overview',
         name: 'CtrlOverview',
         component: () => import('@/views/ctrl/overview'),
-        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'], keepAlive: true }
+        meta: { title: '综合运行总览', icon: '', permission: ['/ctrl/overview'] }
       }
     ]
   }
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index 832744b..e18d5d1 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -57,7 +57,7 @@
         path: '/key/overview/device',
         name: 'KeyOverviewDevice',
         component: () => import('@/views/overview/keyIndex'),
-        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+        meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device']}
       }
     ]
   },
diff --git a/src/views/alarm/alarmPosition.vue b/src/views/alarm/alarmPosition.vue
index 2da9b2c..3fc004b 100644
--- a/src/views/alarm/alarmPosition.vue
+++ b/src/views/alarm/alarmPosition.vue
@@ -4,10 +4,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -339,7 +340,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/area/defenceDetail.vue b/src/views/area/defenceDetail.vue
index eff1053..703ec7d 100644
--- a/src/views/area/defenceDetail.vue
+++ b/src/views/area/defenceDetail.vue
@@ -4,13 +4,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域名称">
-            <el-input v-model="dataForm.name" readonly type="text"/>
+            <el-input v-model="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="dataForm.areaStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.areaStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.areaStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -19,13 +19,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="区域类别">
-            <el-input v-model="dataForm.areaTypeName" readonly type="text"/>
+            <el-input v-model="dataForm.areaTypeName" disabled type="text"/>
             <!--<span>{{ dataForm.areaTypeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="区域位置">
-            <el-input v-model="dataForm.position" readonly type="text"/>
+            <el-input v-model="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -42,7 +42,7 @@
       <el-row v-show="isFence" :gutter="20">
         <el-col :span="12">
           <el-form-item label="电子围栏">
-            <el-input v-model="dataForm.deviceStatusName" readonly type="text"/>
+            <el-input v-model="dataForm.deviceStatusName" disabled type="text"/>
             <!--<span>{{ dataForm.deviceStatusName }}</span>-->
           </el-form-item>
         </el-col>
@@ -51,7 +51,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="备注" prop="remark">
-            <el-input v-model="dataForm.remark" readonly type="text"/>
+            <el-input v-model="dataForm.remark" disabled type="text"/>
             <!--<span>{{ dataForm.remark }}</span>-->
           </el-form-item>
         </el-col>
diff --git a/src/views/ctrl/overview.vue b/src/views/ctrl/overview.vue
index e2c5f62..4532bf7 100644
--- a/src/views/ctrl/overview.vue
+++ b/src/views/ctrl/overview.vue
@@ -85,57 +85,54 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
-        :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
+        :src="item.imgUrl"
+        :style="{transform: 'rotate('+ item.angle +'deg)',
+        position: 'absolute',
+        top: (item.y-25) * imgSize.height / imgSizeOriginal.height + 'px',
+        left: ((item.x-25) * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('5', $event)">
         <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>车牌轨迹</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('8', $event)">
         <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>周界防护</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('9', $event)">
         <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准数字</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('10', $event)">
         <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>智能球形</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
+      <el-col v-show="cameraTypeNum!==1" class="dev-icon" @click.native="selectDevByType('11', $event)">
         <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>标准半球</span>
       </el-col>
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: btnNum*btnwidth + 'px'}">
         <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
           <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
           <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -162,11 +159,11 @@
           <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
           <span>烟感</span>
         </el-col>
-        <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-        <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-        <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-        <!--<span>声光报警</span>-->
-        <!--</el-col>-->
+        <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+          <img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+          <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+          <span>声光报警</span>
+        </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -224,13 +221,53 @@
       </el-row>
     </div>
 
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
 <script>
   import { getProject } from '@/utils/baseConfig'
   import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-  import { alarmListOverview } from '@/api/alarm'
+  import { alarmListOverview,alarmDetailbyCode } 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'
@@ -253,7 +290,7 @@
         bgImageSrc: tg_main,
         devListParams: {
           picture: '1',
-          deviceTypes: []
+          deviceTypes: '4,5,8,9,10,11,12,7'
         },
         cameraClass:'dev-icon',
         dev: {
@@ -274,6 +311,10 @@
           width: 1440,
           height: 789
         }, // 屏幕窗口尺寸
+        imgUrl: require('../../assets/overview_images/icons/icon-camera-point.png'),
+        btnNum: 3,
+        cameraTypeNum: 6,
+        btnwidth: 210,
         halfLeft: 0,
         footLeft: 0, // footer部分设备类型按钮偏移量
         showFence: true, // 是否显示电子围栏按钮
@@ -284,6 +325,7 @@
         showFloorThree: false, // 是否显示三层
         showFloorFour: false, // 是否显示四层
         showDevDetail: false, // 是否显示设备详情
+        showAlarmDetail: false, // 是否显示设备详情
         alarmList: [], // 报警列表
         alarmColumns: [
           {
@@ -305,6 +347,19 @@
         ], // 报警列表显示列
         tableShow: true, // 是否显示告警列表
         devList: [], // 设备列表（在地图上显示）
+        alarmForm: {
+          id:'',
+          alarmCode: '',
+          alarmTime: '',
+          alarmContent: '',
+          alarmValue: '',
+          devcode: '',
+          devName: '',
+          areaPosition: '',
+          areaType: '',
+          reason: '',
+          remark: ''
+        },
         dataForm: {
           id: '', // id
           name: '', // 设备名
@@ -312,6 +367,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -332,10 +388,12 @@
         }
      }
     },
+    destroyed() {
+      window.removeEventListener("click", this.handleKeyup, true);
+    },
     mounted() {
-      window.addEventListener('click',this.handleKeyup)
+      window.addEventListener('click',this.handleKeyup, true)
       this.wsPath = this.wsPath.replace(/http/,'ws')
-      console.log(this.wsPath)
       // this.webSocket()
       this.initWindowSize()
 
@@ -351,8 +409,11 @@
     },
     methods: {
       handleKeyup(val){ //单击收起摄像头分类
-        console.log(val)
+        this.showAlarmDetail  = false
+        this.showDevDetail  = false
+
         var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+        // console.log(val.target.innerText)
         for(var i=0;i<item.length;i++){
           if(item[i]===val.target.innerText){
             return
@@ -364,8 +425,11 @@
         if( val.target.innerText!=='摄像头') {
           this.showType = false
           const devTypes = document.querySelectorAll('.dev-icon')
+          // console.log(devTypes)
+          // console.log(this.cameraTypeNum)
             for(var i=0;i<this.checkDevType.length;i++) {
               if (this.checkDevType[i]) {
+                // console.log(i)
                 devTypes[i+6].className += ' dev-type-selected'
               }
             }
@@ -439,8 +503,10 @@
 
         // 设置footer部分居中显示
         if (this.winSize.width >= 1920) {
+          this.btnwidth= 210
           this.footLeft = (this.winSize.width - 3 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+          this.btnwidth= 155
           this.footLeft = (this.winSize.width - 3 * 155) / 2
         }
       },
@@ -481,6 +547,44 @@
             this.devList = []
             response.data.forEach(dev => {
               if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
                 that.devList.push(dev)
               }
             })
@@ -531,19 +635,23 @@
           }
         }
         if(type !== 'camera'){
+          this.checkDevType = [false, false, false, false, false, false]
+          this.checkDevType1 = [false, false, false, false, false, false]
           // 添加选中的样式
           if (typeof event === 'undefined') {
-            devTypes[0].className += ' dev-type-selected'
+            devTypes[6].className += ' dev-type-selected'
           } else {
             event.currentTarget.className += ' dev-type-selected'
           }
         }
-        if(type!=='camera'){
-          this.checkDevType = [false, false, false, false, false, false]
-          this.checkDevType1 = [false, false, false, false, false, false]
-        }
         if (type === 'all') {
-          this.devListParams.deviceTypes = []
+          if(this.bgImageSrc===tg_main){
+            this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          }else if(this.bgImageSrc===tg_4_5){
+            this.devListParams.deviceTypes = '4'
+          }else{
+            this.devListParams.deviceTypes = '1,2,4,12'
+          }
           this.checkDevType[0] = true
         } else if(type==='camera'){
           for(var i=0;i<this.checkDevType1.length;i++){
@@ -552,7 +660,8 @@
             }
           }
           return
-        } else if (type === 'fence') {
+        }
+        else if (type === 'fence') {
           this.devListParams.deviceTypes = fenceTypes.toString()
           this.checkDevType[2] = true
         } else if (type === 'temperature') {
@@ -561,10 +670,12 @@
         } else if (type === 'smoking') {
           this.devListParams.deviceTypes = smokingTypes.toString()
           this.checkDevType[4] = true
-        } else if (type === 'sound') {
+        }
+        else if (type === 'sound') {
           this.devListParams.deviceTypes = soundTypes.toString()
           this.checkDevType[5] = true
-        }else if(type === '4'){
+        }
+        else if(type === '4'){
           this.devListParams.deviceTypes = '4'
           this.checkDevType[1] = true
           this.checkDevType1[0] = true
@@ -590,11 +701,7 @@
           this.checkDevType1[5] = true
         }
         this.fetchDeviceData()
-        // if(this.checkDevType[1]){
-        //   this.itemColor = '#f58a88'
-        // }else{
-        //   this.itemColor = '#00D2FF'
-        // }
+
       },
       // 点击平面图一级按钮
       selectMapTab(tab, event) {
@@ -678,72 +785,120 @@
       },
       // 切换地图
       changeMap(index) {
-        this.imgSizeOriginal = { width: 2245, height: 1586 }
-
         this.showSubTabGuider = false
         this.showFloorThree = false
         this.showFloorFour = false
-
+        if (index === 'tg_main') {
+          this.devListParams.deviceTypes = '4,5,8,9,10,11,12,7'
+          this.devListParams.picture = '1'
+        }else if (index === 'tg_3_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '2'
+        } else if (index === 'tg_4_1') {
+          this.devListParams.deviceTypes = '1,2,4,12'
+          this.devListParams.picture = '3'
+        }else if (index === 'tg_4_5') {
+          this.devListParams.deviceTypes = '4'
+          this.devListParams.picture = '4'
+        }
+        overviewDeviceList(this.devListParams).then(response => {
+          if (response.code === 200) {
+            const that = this
+            this.devList = []
+            this.initMap(index)
+            response.data.forEach(dev => {
+              if (dev.x !== '' && dev.y !== '') {
+                dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                if(dev.type===10){ //球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                  }
+                }else if(dev.type===11){ //半球
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                  }
+                }else if(dev.type===1){ //温湿度
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===2){ //烟感
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                  }
+                }else if(dev.type===12){ //声光
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                  }
+                }else {  //camera
+                  if(dev.deviceStatus === 0){ //normal
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                  }else{ //alarm
+                    dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                  }
+                }
+                this.devList.push(dev)
+              }
+            })
+          }
+        })
+      },
+      initMap(index){
         if (index === 'tg_main') {
           this.bgImageSrc = tg_main
-          this.devListParams.picture = '1'
-
+          // this.devListParams.picture = '1'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 3
+          this.cameraTypeNum  = 6
           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
-          }
-
           // 将二级菜单的指引区隐藏
           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.devListParams.picture = '2'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
           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.showTemp = true // 隐藏温湿度
+          this.showSmoking = true // 隐藏烟感
+          this.showSound = true // 隐藏声光报警器
         } else if (index === 'tg_4_1') {
           this.bgImageSrc = tg_4_1
-          this.devListParams.picture = '3'
+          // this.devListParams.picture = '3'
           this.imgSizeOriginal = { width: 2218, height: 2169 }
+          this.btnNum  = 5
+          this.cameraTypeNum  = 1
 
           this.showFence = false // 隐藏电子围栏
           this.showTemp = true // 显示温湿度
           this.showSmoking = true // 显示烟感
           this.showSound = true // 显示声光报警器
-          if (this.winSize.width >= 1920) {
-            this.footLeft = (this.winSize.width - 4 * 210) / 2
-          } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-            this.footLeft = (this.winSize.width - 4 * 155) / 2
-          }
         } else if (index === 'tg_4_5') {
           this.bgImageSrc = tg_4_5
-          this.devListParams.picture = '4'
-
+          // this.devListParams.picture = '4'
+          this.imgSizeOriginal = { width: 2245, height: 1586 }
+          this.btnNum  = 2
+          this.cameraTypeNum  = 1
           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')
       },
       // 查询并显示设备详情
@@ -763,7 +918,6 @@
               inOutName: response.data.inOutName,
               deviceStatusName: response.data.deviceStatusName
             }
-
             // 电子围栏设备有开启字段
             if (dev.typeName.indexOf('电子围栏') >= 0) {
               this.isFence = true
@@ -772,16 +926,32 @@
             this.$message.error(response.message)
           }
         })
-
-        // 弹窗显示设备详情
-        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
+        if(dev.deviceStatus===1){
+          alarmDetailbyCode(dev.devcode).then(response=>{
+            if(response.code === 200){
+              this.alarmForm = response.data
+            }
+          })
+          this.showDevDetail = false
+          this.showAlarmDetail = true
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+          top = top + 100
+          this.$refs['alarm-detail-block'].style.position = 'absolute'
+          this.$refs['alarm-detail-block'].style.top = top + 'px'
+          this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+        }else{
+          this.showDevDetail = true
+          this.showAlarmDetail = false
+          // 弹窗显示设备详情
+          const targetDev = event.currentTarget // 取到点击到的设备图标div
+          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) {
@@ -789,6 +959,7 @@
       },
       // 清除设备详情
       resetDevDetail() {
+        this.alarmForm = {}
         this.dataForm = {
           id: '', // id
           name: '', // 设备名
@@ -796,6 +967,7 @@
           typeName: '', // 设备类型
           model: '', // 设备型号
           onlineStatusName: '', // 在线状态
+          deviceStatus: 0, // 设备状态
           deviceStatusName: '', // 设备状态
           position: '', // 安装位置
           installDate: '', // 安装日期
@@ -822,7 +994,12 @@
   }
 </style>
 <style lang="scss" scoped>
-
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .main-page {
     background-size: cover;
     background-color: #023d83;
@@ -888,7 +1065,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     /*transform:rotate(60deg);*/
     background-size: contain;
     @extend .point;
diff --git a/src/views/deviceManage/deviceDetail.vue b/src/views/deviceManage/deviceDetail.vue
index 604138d..701052d 100644
--- a/src/views/deviceManage/deviceDetail.vue
+++ b/src/views/deviceManage/deviceDetail.vue
@@ -4,24 +4,24 @@
       <el-row :gutter="20">
         <!--<el-col :span="12">-->
           <!--<el-form-item label="设备名称">-->
-            <!--<el-input v-model.trim="dataForm.name" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>
+            <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" readonly type="text"/>
+            <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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -30,13 +30,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="设备类型">
-            <el-input v-model.trim="dataForm.typeName" readonly type="text"/>
+            <el-input v-model.trim="dataForm.typeName" disabled type="text"/>
             <!--<span>{{ dataForm.typeName }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="设备型号">
-            <el-input v-model.trim="dataForm.model" readonly type="text"/>
+            <el-input v-model.trim="dataForm.model" disabled type="text"/>
             <!--<span>{{ dataForm.model }}</span>-->
           </el-form-item>
         </el-col>
@@ -45,13 +45,13 @@
       <!--<el-row :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="在线状态">-->
-            <!--<el-input v-model.trim="dataForm.onlineStatusName" readonly type="text"/>-->
+            <!--<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" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.deviceStatusName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.deviceStatusName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
@@ -60,13 +60,13 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="安装日期">
-            <el-input v-model.trim="dataForm.installDate" readonly type="text"/>
+            <el-input v-model.trim="dataForm.installDate" disabled type="text"/>
             <!--<span>{{ dataForm.installDate }}</span>-->
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="安装位置">
-            <el-input v-model.trim="dataForm.position" readonly type="text"/>
+            <el-input v-model.trim="dataForm.position" disabled type="text"/>
             <!--<span>{{ dataForm.position }}</span>-->
           </el-form-item>
         </el-col>
@@ -75,7 +75,7 @@
       <!--<el-row v-show="isDoor" :gutter="20">-->
         <!--<el-col :span="12">-->
           <!--<el-form-item label="进出营">-->
-            <!--<el-input v-model.trim="dataForm.inOutName" readonly type="text"/>-->
+            <!--<el-input v-model.trim="dataForm.inOutName" disabled type="text"/>-->
             <!--&lt;!&ndash;<span>{{ dataForm.inOutName }}</span>&ndash;&gt;-->
           <!--</el-form-item>-->
         <!--</el-col>-->
diff --git a/src/views/layout/components/AppHeader.vue b/src/views/layout/components/AppHeader.vue
index 8117f07..8310902 100644
--- a/src/views/layout/components/AppHeader.vue
+++ b/src/views/layout/components/AppHeader.vue
@@ -88,7 +88,7 @@
       this.$router.replace('/dashboard')
     },
     backToOverview() {
-      this.$router.replace('/ctrl/overview')
+      this.$router.push({path:'/ctrl/overview',query: { t: +new Date() } })
     },
     // 切换子系统
     handleCommand(command) {
@@ -119,7 +119,7 @@
     -webkit-background-size: 100% 100%;
     background-size: 100% 100%;
     color:white;
-    z-index: 10000;
+    z-index: 2000;
     border-radius: 2px;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.58);
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index 9b38e8f..1dd2e6e 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -110,26 +111,26 @@
         <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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -166,13 +167,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -182,12 +222,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 1,
-        deviceTypes: []
+        deviceTypes: '4,5'
       },
       dev: {
         alarm: 0,
@@ -246,7 +300,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -269,9 +327,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +370,44 @@
           console.log(response)
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +467,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,5'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -415,23 +511,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +633,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
index 8fbd395..e3ec0d5 100644
--- a/src/views/overview/fenceIndex.vue
+++ b/src/views/overview/fenceIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -101,36 +102,41 @@
         <span>全部</span>
       </el-col>
 
-      <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>
-      </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('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>-->
+      <!--</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 class="dev-icon" @click.native="selectDevByType('fence', $event)">
+        <img v-if="checkDevType[7]" src="@/assets/overview_images/icons/icon-fence-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-fence-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-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>
 
     <!-- 右侧设备详情及操作区域 -->
@@ -167,13 +173,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +228,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '1',
         areaTypeId: 2,
-        deviceTypes: []
+        deviceTypes: '7,8'
       },
       dev: {
         alarm: 0,
@@ -244,10 +303,14 @@
         installDate: '', // 安装日期
         inOutName: '' // 进出营
       }, // 设备详情表单
-      checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
+      checkDevType: [true, false, false, false, false, false, false,false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -270,9 +333,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 3 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 3 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +375,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -361,7 +462,7 @@
           devTypes[i].className = 'dev-icon el-col el-col-24'
         }
       }
-      this.checkDevType =[false, false, false, false, false, false, false]
+      this.checkDevType =[false, false, false, false, false, false, false, false]
 
       // 添加选中的样式
       if (typeof event === 'undefined') {
@@ -371,9 +472,12 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '7,8'
         this.checkDevType[0] = true
-      } else if(type === '4'){
+      } else if (type === 'fence') {
+        this.devListParams.deviceTypes = '6,7'
+        this.checkDevType[7] = true
+      }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
       }else if(type === '5'){
@@ -415,23 +519,44 @@
           this.$message.error(response.message)
         }
       })
-
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
 
     },
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +641,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
index 0d89301..2e15516 100644
--- a/src/views/overview/keyIndex.vue
+++ b/src/views/overview/keyIndex.vue
@@ -84,57 +84,51 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
     </div>
 
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="showType" style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    width: 1400px;
-    bottom: 25px;">
+    <div v-show="showType" class="bottom-center" :style="{ width: btnwidth + 'px'}">
       <el-col class="dev-icon" @click.native="selectDevByType('4', $event)">
         <img id="4-1-img" v-if="checkDevType1[0]" src="@/assets/overview_images/icons/icon-camera-checked.png">
         <img id="4-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
         <span>人脸识别</span>
       </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('5', $event)">
-        <img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>车牌轨迹</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('8', $event)">
-        <img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>周界防护</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('9', $event)">
-        <img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准数字</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('10', $event)">
-        <img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>智能球形</span>
-      </el-col>
-      <el-col class="dev-icon" @click.native="selectDevByType('11', $event)">
-        <img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">
-        <img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">
-        <span>标准半球</span>
-      </el-col>
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('5', $event)">-->
+        <!--<img id="5-1-img" v-if="checkDevType1[1]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="5-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>车牌轨迹</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('8', $event)">-->
+        <!--<img id="8-1-img" v-if="checkDevType1[2]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="8-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>周界防护</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('9', $event)">-->
+        <!--<img id="9-1-img" v-if="checkDevType1[3]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="9-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准数字</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('10', $event)">-->
+        <!--<img id="10-1-img" v-if="checkDevType1[4]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="10-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>智能球形</span>-->
+      <!--</el-col>-->
+      <!--<el-col class="dev-icon" @click.native="selectDevByType('11', $event)">-->
+        <!--<img id="11-1-img" v-if="checkDevType1[5]" src="@/assets/overview_images/icons/icon-camera-checked.png">-->
+        <!--<img id="11-2-img" v-else src="@/assets/overview_images/icons/icon-camera-unchecked.png">-->
+        <!--<span>标准半球</span>-->
+      <!--</el-col>-->
     </div>
     <!-- 平面图区域设备类型按钮 -->
-    <div v-show="!showType"style="text-align:center;
-    position: absolute;
-    left: 50%; transform: translateX(-50%);
-    bottom: 25px;">
+    <div v-show="!showType"class="bottom-center" :style="{ width: cameraTypeNum*btnwidth + 'px'}">
       <el-col ref="all" class="dev-icon dev-type-selected" @click.native="selectDevByType('all', $event)">
         <img v-if="checkDevType[0]" src="@/assets/overview_images/icons/icon-all-checked.png">
         <img v-else src="@/assets/overview_images/icons/icon-all-unchecked.png">
@@ -156,11 +150,11 @@
         <img v-else src="@/assets/overview_images/icons/icon-smoking-unchecked.png">
         <span>烟感</span>
       </el-col>
-      <!--<el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">-->
-      <!--<img v-if="checkDevType[5]" src="@/assets/overview_images/icons/icon-sound-checked.png">-->
-      <!--<img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">-->
-      <!--<span>声光报警</span>-->
-      <!--</el-col>-->
+      <el-col v-show="showSound" class="dev-icon" @click.native="selectDevByType('sound', $event)">
+        <img v-if="checkDevType[4]" src="@/assets/overview_images/icons/icon-sound-checked.png">
+        <img v-else src="@/assets/overview_images/icons/icon-sound-unchecked.png">
+        <span>声光报警</span>
+      </el-col>
     </div>
 
     <!-- 右侧平面图索引切换区域 -->
@@ -211,13 +205,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 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'
@@ -232,13 +265,27 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       itemColor: '#f58a88',
       title: getProject().title,
       bgImageSrc: tg_3_1,
       devListParams: {
         picture: '2',
         areaTypeId: 4,
-        deviceTypes: []
+        deviceTypes: '1,2,4,12'
       },
       dev: {
         alarm: 0,
@@ -258,11 +305,13 @@
         width: 1440,
         height: 789
       }, // 屏幕窗口尺寸
+      cameraTypeNum: 5,
+      btnwidth: 210,
       halfLeft: 0,
       footLeft: 0, // footer部分设备类型按钮偏移量
-      showTemp: false, // 是否显示温湿度按钮
-      showSmoking: false, // 是否显示烟感按钮
-      showSound: false, // 是否显示声光报警按钮
+      showTemp: true, // 是否显示温湿度按钮
+      showSmoking: true, // 是否显示烟感按钮
+      showSound: true, // 是否显示声光报警按钮
       showSubTabGuider: false, // 是否显示二级菜单指引
       showFloorThree: false, // 是否显示三层
       showFloorFour: false, // 是否显示四层
@@ -315,8 +364,11 @@
       }
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
-    window.addEventListener('click',this.handleKeyup)
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -330,8 +382,9 @@
   },
   methods: {
     handleKeyup(val){ //单击收起摄像头分类
-      console.log(val)
-      var item = ['人脸识别','车牌轨迹','周界防护','标准数字','智能球形','标准半球']
+      this.showAlarmDetail  = false
+      this.showDevDetail  = false
+      var item = ['人脸识别']
       for(var i=0;i<item.length;i++){
         if(item[i]===val.target.innerText){
           return
@@ -345,7 +398,7 @@
         const devTypes = document.querySelectorAll('.dev-icon')
         for(var i=0;i<this.checkDevType.length;i++) {
           if (this.checkDevType[i]) {
-            devTypes[i+6].className += ' dev-type-selected'
+            devTypes[i+1].className += ' dev-type-selected'
           }
         }
       }
@@ -363,8 +416,10 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
+        this.btnwidth= 210
         this.footLeft = (this.winSize.width - 2 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+        this.btnwidth= 155
         this.footLeft = (this.winSize.width - 2 * 155) / 2
       }
     },
@@ -405,7 +460,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
-              that.devList.push(dev)
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              this.devList.push(dev)
             }
           })
         }
@@ -457,7 +549,7 @@
       if(type !== 'camera'){
         // 添加选中的样式
         if (typeof event === 'undefined') {
-          devTypes[0].className += ' dev-type-selected'
+          devTypes[1].className += ' dev-type-selected'
         } else {
           event.currentTarget.className += ' dev-type-selected'
         }
@@ -467,7 +559,12 @@
         this.checkDevType1 = [false, false, false, false, false, false]
       }
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        if(this.bgImageSrc===tg_4_5){
+          this.devListParams.deviceTypes = '4'
+        }else{
+          this.devListParams.deviceTypes = '1,2,4,12'
+        }
+        // this.devListParams.deviceTypes = []
         this.checkDevType[0] = true
       } else if(type==='camera'){
         for(var i=0;i<this.checkDevType1.length;i++){
@@ -476,18 +573,15 @@
           }
         }
         return
-      } 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
+        this.checkDevType[2] = true
       } else if (type === 'smoking') {
         this.devListParams.deviceTypes = smokingTypes.toString()
-        this.checkDevType[4] = true
+        this.checkDevType[3] = true
       } else if (type === 'sound') {
         this.devListParams.deviceTypes = soundTypes.toString()
-        this.checkDevType[5] = true
+        this.checkDevType[4] = true
       }else if(type === '4'){
         this.devListParams.deviceTypes = '4'
         this.checkDevType[1] = true
@@ -542,15 +636,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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
+      }
     },
     // 点击平面图一级按钮
     selectMapTab(tab, event) {
@@ -635,19 +746,89 @@
     },
     // 切换地图
     changeMap(index) {
-      this.imgSizeOriginal = { width: 2245, height: 1586 }
-
       this.showSubTabGuider = false
       this.showFloorThree = false
       this.showFloorFour = false
-
+      if(index === 'tg_4_5'){
+        this.devListParams.deviceTypes = '4'
+      }else{
+        this.devListParams.deviceTypes = '1,2,4,12'
+      }
+      // this.devListParams.deviceTypes = []
+      if (index === 'tg_main') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '1'
+      }else if (index === 'tg_3_1') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '2'
+      } else if (index === 'tg_4_1') {
+        // this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.devListParams.picture = '3'
+      }else if (index === 'tg_4_5') {
+        // this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.devListParams.picture = '4'
+      }
+      overviewDeviceList(this.devListParams).then(response => {
+        if (response.code === 200) {
+          const that = this
+          this.devList = []
+          response.data.forEach(dev => {
+            if (dev.x !== '' && dev.y !== '') {
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
+              that.devList.push(dev)
+            }
+          })
+          this.initMap(index)
+        }
+      })
+    },
+    // 切换地图
+    initMap(index) {
       if (index === 'tg_3_1') {
         this.bgImageSrc = tg_3_1
-        this.devListParams.picture = '2'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        // this.devListParams.picture = '2'
+        this.cameraTypeNum = 5
 
-        this.showTemp = false // 隐藏温湿度
-        this.showSmoking = false // 隐藏烟感
-        this.showSound = false // 隐藏声光报警器
+        this.showTemp = true // 隐藏温湿度
+        this.showSmoking = true // 隐藏烟感
+        this.showSound = true // 隐藏声光报警器
         if (this.winSize.width >= 1920) {
           this.footLeft = (this.winSize.width - 2 * 210) / 2
         } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
@@ -655,8 +836,9 @@
         }
       } else if (index === 'tg_4_1') {
         this.bgImageSrc = tg_4_1
-        this.devListParams.picture = '3'
+        // this.devListParams.picture = '3'
         this.imgSizeOriginal = { width: 2218, height: 2169 }
+        this.cameraTypeNum = 5
 
         this.showTemp = true // 显示温湿度
         this.showSmoking = true // 显示烟感
@@ -668,8 +850,9 @@
         }
       } else if (index === 'tg_4_5') {
         this.bgImageSrc = tg_4_5
-        this.devListParams.picture = '4'
-
+        // this.devListParams.picture = '4'
+        this.imgSizeOriginal = { width: 2245, height: 1586 }
+        this.cameraTypeNum = 2
         this.showTemp = false // 隐藏温湿度
         this.showSmoking = false // 隐藏烟感
         this.showSound = false // 隐藏声光报警器
@@ -688,6 +871,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -720,6 +904,12 @@
   }
 </style>
 <style lang="scss" scoped>
+  .bottom-center{
+    text-align:center;
+    position: absolute;
+    left: 50%; transform: translateX(-50%);
+    bottom: 25px;
+  }
   .menu-camera {
     /deep/ .el-submenu__title {
       padding: 0px;
@@ -809,7 +999,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
index f20530a..640a0f8 100644
--- a/src/views/overview/regionIndex.vue
+++ b/src/views/overview/regionIndex.vue
@@ -84,10 +84,11 @@
     <div class="map-overview">
       <img ref="bgImg" :src="bgImageSrc" height="100%" @load="backgroundImageReady">
 
-      <div
+      <img
         v-for="item in devList"
         :id="item.id"
         :key="item.id"
+        :src="item.imgUrl"
         :style="{ transform: 'rotate('+ item.angle +'deg)', position: 'absolute', top: item.y * imgSize.height / imgSizeOriginal.height + 'px', left: (item.x * imgSize.width / imgSizeOriginal.width + halfLeft) + 'px' }"
         class="point-camera"
         @click="detailDev(item, $event)" />
@@ -106,16 +107,16 @@
         <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('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('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">
@@ -167,13 +168,52 @@
         </el-col>
       </el-row>
     </div>
+    <!-- 右侧报警详情及操作区域 -->
+    <div v-show="showAlarmDetail" ref="alarm-detail-block" class="dev-detail-block" style="color: red">
+      <span class="dev-detail-close" @click="showAlarmDetail=false" />
+      <el-row style="margin-top: -35px">
+        <el-col :span="24">设备编号
+          <span class="dev-detail-span">{{ dataForm.devcode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">设备类型
+          <span class="dev-detail-span">{{ dataForm.typeName }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警编号
+          <span class="dev-detail-span">{{ alarmForm.alarmCode }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警时间
+          <span class="dev-detail-span">{{ alarmForm.alarmTime }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">报警内容
+          <span class="dev-detail-span">{{ alarmForm.alarmContent }}</span>
+        </el-col>
+      </el-row>
+      <el-row v-show="dataForm.type===1">
+        <el-col :span="24">报警数值
+          <span class="dev-detail-span">{{ alarmForm.alarmValue }}</span>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">所属区域
+          <span class="dev-detail-span">{{ alarmForm.areaPosition }}</span>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
 import { getProject } from '@/utils/baseConfig'
 import { overviewDeviceList, overviewDeviceStatus, getDetailDevice } from '@/api/device'
-import { alarmListOverview } from '@/api/alarm'
+import { alarmListOverview,alarmDetailbyCode } from '@/api/alarm'
 import DeviceDetail from '@/views/deviceManage/deviceDetail'
 import tg_main from '../../assets/overview_images/tg/mapOverviewTg.png'
 
@@ -183,12 +223,26 @@
   components: { DeviceDetail },
   data() {
     return {
+      showAlarmDetail: false, // 是否显示设备详情
+      alarmForm: {
+        id:'',
+        alarmCode: '',
+        alarmTime: '',
+        alarmContent: '',
+        alarmValue: '',
+        devcode: '',
+        devName: '',
+        areaPosition: '',
+        areaType: '',
+        reason: '',
+        remark: ''
+      },
       title: getProject().title,
       bgImageSrc: tg_main,
       devListParams: {
         picture: '3',
         areaTypeId: 3,
-        deviceTypes: []
+        deviceTypes: '4,9,10,11'
       },
       dev: {
         alarm: 0,
@@ -247,7 +301,11 @@
       checkDevType: [true, false, false, false, false, false, false] // 选中设备类型
     }
   },
+  destroyed() {
+    window.removeEventListener("click", this.handleKeyup, true);
+  },
   mounted() {
+    window.addEventListener('click',this.handleKeyup, true)
     this.initWindowSize()
 
     this.fetchData()
@@ -260,6 +318,10 @@
     }
   },
   methods: {
+    handleKeyup(val) { //单击收起摄像头分类
+      this.showAlarmDetail = false
+      this.showDevDetail = false
+    },
     // 获取窗口大小
     initWindowSize() {
       // 获取窗体尺寸
@@ -270,9 +332,9 @@
 
       // 设置footer部分居中显示
       if (this.winSize.width >= 1920) {
-        this.footLeft = (this.winSize.width - 7 * 210) / 2
+        this.footLeft = (this.winSize.width - 5 * 210) / 2
       } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
-        this.footLeft = (this.winSize.width - 7 * 155) / 2
+        this.footLeft = (this.winSize.width - 5 * 155) / 2
       }
     },
     // 获取图像大小
@@ -312,6 +374,44 @@
           this.devList = []
           response.data.forEach(dev => {
             if (dev.x !== '' && dev.y !== '') {
+              dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+              if(dev.type===10){ //球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/camera-red.png")
+                }
+              }else if(dev.type===11){ //半球
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-green.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/half-camera-red.png")
+                }
+              }else if(dev.type===1){ //温湿度
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===2){ //烟感
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-temperature-checked.png")
+                }
+              }else if(dev.type===12){ //声光
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-unchecked.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-sound-checked.png")
+                }
+              }else {  //camera
+                if(dev.deviceStatus === 0){ //normal
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-point.png")
+                }else{ //alarm
+                  dev.imgUrl = require("../../assets/overview_images/icons/icon-camera-checked.png")
+                }
+              }
               that.devList.push(dev)
             }
           })
@@ -371,7 +471,7 @@
       }
 
       if (type === 'all') {
-        this.devListParams.deviceTypes = []
+        this.devListParams.deviceTypes = '4,9,10,11'
         this.checkDevType[0] = true
       } else if(type === '4'){
         this.devListParams.deviceTypes = '4'
@@ -416,15 +516,32 @@
         }
       })
 
-      // 弹窗显示设备详情
-      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
+      if(dev.deviceStatus===1){
+        alarmDetailbyCode(dev.devcode).then(response=>{
+          if(response.code === 200){
+            this.alarmForm = response.data
+          }
+        })
+        this.showDevDetail = false
+        this.showAlarmDetail = true
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+        top = top + 100
+        this.$refs['alarm-detail-block'].style.position = 'absolute'
+        this.$refs['alarm-detail-block'].style.top = top + 'px'
+        this.$refs['alarm-detail-block'].style.left = targetDev.style.left
+      }else{
+        this.showDevDetail = true
+        this.showAlarmDetail = false
+        // 弹窗显示设备详情
+        const targetDev = event.currentTarget // 取到点击到的设备图标div
+        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) {
@@ -432,6 +549,7 @@
     },
     // 清除设备详情
     resetDevDetail() {
+      this.alarmForm = {}
       this.dataForm = {
         id: '', // id
         name: '', // 设备名
@@ -516,7 +634,6 @@
     cursor: pointer;
   }
   .point-camera {
-    background: url("../../assets/overview_images/icons/icon-camera-point.png");
     background-size: contain;
     @extend .point;
   }
diff --git a/src/views/staff/staffDetail.vue b/src/views/staff/staffDetail.vue
index c07299b..a68be4c 100644
--- a/src/views/staff/staffDetail.vue
+++ b/src/views/staff/staffDetail.vue
@@ -16,13 +16,13 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="姓名">
-                <el-input v-model="dataForm.name" readonly type="text"/>
+                <el-input v-model="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="dataForm.idCard" readonly type="text"/>
+                <el-input v-model="dataForm.idCard" disabled type="text"/>
                 <!--<span>{{ dataForm.idCard }}</span>-->
               </el-form-item>
             </el-col>
@@ -31,19 +31,19 @@
           <el-row :gutter="20">
             <!--<el-col :span="12">-->
               <!--<el-form-item label="出生日期">-->
-                <!--<el-input v-model="dataForm.birthday" readonly type="text"/>-->
+                <!--<el-input v-model="dataForm.birthday" disabled type="text"/>-->
                 <!--&lt;!&ndash;<span>{{ dataForm.birthday }}</span>&ndash;&gt;-->
               <!--</el-form-item>-->
             <!--</el-col>-->
             <el-col :span="12">
               <el-form-item label="性别">
-                <el-input v-model="dataForm.sex" readonly type="text"/>
+                <el-input v-model="dataForm.sex" disabled type="text"/>
                 <!--<span>{{ dataForm.sex }}</span>-->
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="联系电话">
-                <el-input v-model="dataForm.phone" readonly type="text"/>
+                <el-input v-model="dataForm.phone" disabled type="text"/>
                 <!--<span>{{ dataForm.phone }}</span>-->
               </el-form-item>
             </el-col>
@@ -51,7 +51,7 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="所在部门">
-                <el-input v-model="dataForm.deptName" readonly type="text"/>
+                <el-input v-model="dataForm.deptName" disabled type="text"/>
                 <!--<span>{{ dataForm.deptName }}</span>-->
               </el-form-item>
             </el-col>
@@ -60,7 +60,7 @@
           <el-row>
             <el-col :span="24">
               <el-form-item label="住址">
-                <el-input v-model="dataForm.address" readonly type="text"/>
+                <el-input v-model="dataForm.address" disabled type="text"/>
                 <!--<span>{{ dataForm.address }}</span>-->
               </el-form-item>
             </el-col>
diff --git a/src/views/visitor/visitorAdd.vue b/src/views/visitor/visitorAdd.vue
index 8d458c6..87ec546 100644
--- a/src/views/visitor/visitorAdd.vue
+++ b/src/views/visitor/visitorAdd.vue
@@ -50,7 +50,7 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="接访部门" prop="deptid">
-              <el-select v-show="!isDetailMode" v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
+              <el-select v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
                 <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
               <!--<dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
diff --git a/src/views/visitor/visitorAddCar.vue b/src/views/visitor/visitorAddCar.vue
index f4de0fd..8513b4c 100644
--- a/src/views/visitor/visitorAddCar.vue
+++ b/src/views/visitor/visitorAddCar.vue
@@ -77,7 +77,7 @@
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="接访部门" prop="deptid">
-              <el-select v-show="!isDetailMode" v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
+              <el-select v-model="dataForm.deptid" placeholder="所属组织" filterable clearable @change="fetchStaffList">
                 <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
               <!--<dept-select ref="deptid" v-model="dataForm.deptid" :dept-show="true" :need-top="true" placeholder="所属组织" @change="fetchStaffList"/>-->
@@ -118,9 +118,9 @@
         </el-row>
 
         <el-row :gutter="20">
-          <el-col :span="4">
+          <el-col :span="12">
             <el-form-item label="剩余车位">
-              <el-input v-model.trim="carNum" readonly type="text" />
+              <el-input v-model.trim="carNum" disabled type="text" style="width: 80px" />
             </el-form-item>
           </el-col>
         </el-row>
diff --git a/theme/icon.css b/theme/icon.css
index 7b43b7c..cf2ff0c 100644
--- a/theme/icon.css
+++ b/theme/icon.css
@@ -295,7 +295,8 @@
   content: "\e6da"; }
 
 .el-icon-close:before {
-  content: "\e6db"; }
+  content: "\e6db";
+}
 
 .el-icon-d-arrow-right:before {
   content: "\e6dc"; }
diff --git a/theme/index.css b/theme/index.css
index 2f3df6b..76db49d 100644
--- a/theme/index.css
+++ b/theme/index.css
@@ -524,7 +524,11 @@
   content: "\e6da"; }
 
 .el-icon-close:before {
-  content: "\e6db"; }
+  content: "\e6db";
+  color: #00387b;
+  font-size: 23px;
+  font-weight: bold;
+}
 
 .el-icon-d-arrow-right:before {
   content: "\e6dc"; }