diff --git a/config/dev.env.js b/config/dev.env.js
index 5cad7f4..53f67fb 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,5 +6,7 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  // BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  BASE_WS: '"ws://127.0.0.1:8080/pan-tilt/websocket/2"'
 })

diff --git a/config/dev.env.js b/config/dev.env.js
index 5cad7f4..53f67fb 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,5 +6,7 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  // BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  BASE_WS: '"ws://127.0.0.1:8080/pan-tilt/websocket/2"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index 6a9dcf4..e180f6e 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,8 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"',
+  BASE_WS: '"ws:///111.198.10.15:12210/pan-tilt/websocket/2"'
+  // BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  // BASE_WS: '"ws://192.168.10.200:8080/pan-tilt/websocket/2"'
 }

diff --git a/config/dev.env.js b/config/dev.env.js
index 5cad7f4..53f67fb 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,5 +6,7 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  // BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  BASE_WS: '"ws://127.0.0.1:8080/pan-tilt/websocket/2"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index 6a9dcf4..e180f6e 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,8 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"',
+  BASE_WS: '"ws:///111.198.10.15:12210/pan-tilt/websocket/2"'
+  // BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  // BASE_WS: '"ws://192.168.10.200:8080/pan-tilt/websocket/2"'
 }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 571db35..577a45b 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -29,15 +29,17 @@
 import { mapGetters } from 'vuex'
 import ResetPwd from '@/views/system/user/resetPwd'
 import { getProject } from '@/utils/baseConfig'
+import { Notification } from 'element-ui'
 
 export default {
   name: 'AppHeader',
   components: { ResetPwd },
   data() {
     return {
+      wsPath: process.env.BASE_WS,
       title: getProject().title,
       name: this.$store.getters.name,
-      showSetPwd: false,
+      showSetPwd: false
       // headerUrl: require('../../../assets/global_images/header.png')// 头部图片
     }
   },
@@ -47,7 +49,66 @@
       'avatar'
     ])
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initWebSocket()
+    })
+  },
   methods: {
+    initWebSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.wsPath
+        console.log(socketUrl, '*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          if (data.type === 'gasAlarm') {
+            const message = data.monitorName + '设备报警甲烷值：' + data.concentration + '，报警位置：' + data.alarmDirection + ',' + data.alarmPitch
+            Notification({
+              title: '甲烷超标报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          } else if (data.type === 'strengthAlarm') {
+            const message = data.monitorName + '设备报警遮挡'
+            Notification({
+              title: '遮挡报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          }
+        }
+      }
+      // 监听socket错误
+      that.socket.onerror = function() {
+        Notification({
+          title: '服务器错误',
+          message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+          type: 'error',
+          duration: 0
+        })
+      }
+      // 监听socket关闭
+      that.socket.onclose = function() {
+        console.log('WebSocket已关闭')
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
     },

diff --git a/config/dev.env.js b/config/dev.env.js
index 5cad7f4..53f67fb 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,5 +6,7 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  // BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  BASE_WS: '"ws://127.0.0.1:8080/pan-tilt/websocket/2"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index 6a9dcf4..e180f6e 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,8 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"',
+  BASE_WS: '"ws:///111.198.10.15:12210/pan-tilt/websocket/2"'
+  // BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  // BASE_WS: '"ws://192.168.10.200:8080/pan-tilt/websocket/2"'
 }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 571db35..577a45b 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -29,15 +29,17 @@
 import { mapGetters } from 'vuex'
 import ResetPwd from '@/views/system/user/resetPwd'
 import { getProject } from '@/utils/baseConfig'
+import { Notification } from 'element-ui'
 
 export default {
   name: 'AppHeader',
   components: { ResetPwd },
   data() {
     return {
+      wsPath: process.env.BASE_WS,
       title: getProject().title,
       name: this.$store.getters.name,
-      showSetPwd: false,
+      showSetPwd: false
       // headerUrl: require('../../../assets/global_images/header.png')// 头部图片
     }
   },
@@ -47,7 +49,66 @@
       'avatar'
     ])
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initWebSocket()
+    })
+  },
   methods: {
+    initWebSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.wsPath
+        console.log(socketUrl, '*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          if (data.type === 'gasAlarm') {
+            const message = data.monitorName + '设备报警甲烷值：' + data.concentration + '，报警位置：' + data.alarmDirection + ',' + data.alarmPitch
+            Notification({
+              title: '甲烷超标报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          } else if (data.type === 'strengthAlarm') {
+            const message = data.monitorName + '设备报警遮挡'
+            Notification({
+              title: '遮挡报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          }
+        }
+      }
+      // 监听socket错误
+      that.socket.onerror = function() {
+        Notification({
+          title: '服务器错误',
+          message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+          type: 'error',
+          duration: 0
+        })
+      }
+      // 监听socket关闭
+      that.socket.onclose = function() {
+        console.log('WebSocket已关闭')
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
     },
diff --git a/src/views/alarmManage/alarmDetail.vue b/src/views/alarmManage/alarmDetail.vue
index 57d601c..2911e71 100644
--- a/src/views/alarmManage/alarmDetail.vue
+++ b/src/views/alarmManage/alarmDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="报警详情" :visible.sync="dialogFormVisible">
+  <el-dialog :visible.sync="dialogFormVisible" title="报警详情">
     <el-form v-loading="loading" ref="dataForm" :model="alarmForm" label-well-code="right" label-width="100px">
       <el-row type="flex" justify="center">
         <el-col :span="12">
@@ -88,7 +88,7 @@
       }
       var arr1 = this.alarmForm.alarmTime.split(' ')
       var sdate = arr1[0].split('-')
-      var date = new Date(sdate[0], sdate[1]-1, sdate[2])
+      var date = new Date(sdate[0], sdate[1] - 1, sdate[2])
       var startTime = getDayTime(date.getTime() - 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       var endTime = getDayTime(date.getTime() + 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       console.log(startTime)
@@ -109,9 +109,9 @@
       }
     },
     receiveParamsFromHtml(res) {
-      if(res.indexOf('0') > -1)this.$message.success(res.replace('0',''))
-      else if(res.indexOf('-1') > -1) this.$message.error(res.replace('-1',''))
-      else this.$message.info(res.replace('1',''))
+      if (res.indexOf('0') > -1) this.$message.success(res.replace('0', ''))
+      else if (res.indexOf('-1') > -1) this.$message.error(res.replace('-1', ''))
+      else this.$message.info(res.replace('1', ''))
     }
   }
 }

diff --git a/config/dev.env.js b/config/dev.env.js
index 5cad7f4..53f67fb 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,5 +6,7 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  // BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  BASE_WS: '"ws://127.0.0.1:8080/pan-tilt/websocket/2"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index 6a9dcf4..e180f6e 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,8 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"',
+  BASE_WS: '"ws:///111.198.10.15:12210/pan-tilt/websocket/2"'
+  // BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  // BASE_WS: '"ws://192.168.10.200:8080/pan-tilt/websocket/2"'
 }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 571db35..577a45b 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -29,15 +29,17 @@
 import { mapGetters } from 'vuex'
 import ResetPwd from '@/views/system/user/resetPwd'
 import { getProject } from '@/utils/baseConfig'
+import { Notification } from 'element-ui'
 
 export default {
   name: 'AppHeader',
   components: { ResetPwd },
   data() {
     return {
+      wsPath: process.env.BASE_WS,
       title: getProject().title,
       name: this.$store.getters.name,
-      showSetPwd: false,
+      showSetPwd: false
       // headerUrl: require('../../../assets/global_images/header.png')// 头部图片
     }
   },
@@ -47,7 +49,66 @@
       'avatar'
     ])
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initWebSocket()
+    })
+  },
   methods: {
+    initWebSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.wsPath
+        console.log(socketUrl, '*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          if (data.type === 'gasAlarm') {
+            const message = data.monitorName + '设备报警甲烷值：' + data.concentration + '，报警位置：' + data.alarmDirection + ',' + data.alarmPitch
+            Notification({
+              title: '甲烷超标报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          } else if (data.type === 'strengthAlarm') {
+            const message = data.monitorName + '设备报警遮挡'
+            Notification({
+              title: '遮挡报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          }
+        }
+      }
+      // 监听socket错误
+      that.socket.onerror = function() {
+        Notification({
+          title: '服务器错误',
+          message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+          type: 'error',
+          duration: 0
+        })
+      }
+      // 监听socket关闭
+      that.socket.onclose = function() {
+        console.log('WebSocket已关闭')
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
     },
diff --git a/src/views/alarmManage/alarmDetail.vue b/src/views/alarmManage/alarmDetail.vue
index 57d601c..2911e71 100644
--- a/src/views/alarmManage/alarmDetail.vue
+++ b/src/views/alarmManage/alarmDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="报警详情" :visible.sync="dialogFormVisible">
+  <el-dialog :visible.sync="dialogFormVisible" title="报警详情">
     <el-form v-loading="loading" ref="dataForm" :model="alarmForm" label-well-code="right" label-width="100px">
       <el-row type="flex" justify="center">
         <el-col :span="12">
@@ -88,7 +88,7 @@
       }
       var arr1 = this.alarmForm.alarmTime.split(' ')
       var sdate = arr1[0].split('-')
-      var date = new Date(sdate[0], sdate[1]-1, sdate[2])
+      var date = new Date(sdate[0], sdate[1] - 1, sdate[2])
       var startTime = getDayTime(date.getTime() - 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       var endTime = getDayTime(date.getTime() + 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       console.log(startTime)
@@ -109,9 +109,9 @@
       }
     },
     receiveParamsFromHtml(res) {
-      if(res.indexOf('0') > -1)this.$message.success(res.replace('0',''))
-      else if(res.indexOf('-1') > -1) this.$message.error(res.replace('-1',''))
-      else this.$message.info(res.replace('1',''))
+      if (res.indexOf('0') > -1) this.$message.success(res.replace('0', ''))
+      else if (res.indexOf('-1') > -1) this.$message.error(res.replace('-1', ''))
+      else this.$message.info(res.replace('1', ''))
     }
   }
 }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 4ef0255..a7ef0d1 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -22,10 +22,15 @@
 import { mapGetters } from 'vuex'
 import Calendar from '@/components/Calendar/calendar'
 import Clock from '@/components/Clock/clock'
-
+import { Notification } from 'element-ui'
 export default {
   name: 'Dashboard',
   components: { Clock, Calendar },
+  data() {
+    return {
+
+    }
+  },
   computed: {
     ...mapGetters([
       'name',

diff --git a/config/dev.env.js b/config/dev.env.js
index 5cad7f4..53f67fb 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,5 +6,7 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  // BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  BASE_WS: '"ws://127.0.0.1:8080/pan-tilt/websocket/2"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index 6a9dcf4..e180f6e 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,8 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"',
+  BASE_WS: '"ws:///111.198.10.15:12210/pan-tilt/websocket/2"'
+  // BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  // BASE_WS: '"ws://192.168.10.200:8080/pan-tilt/websocket/2"'
 }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 571db35..577a45b 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -29,15 +29,17 @@
 import { mapGetters } from 'vuex'
 import ResetPwd from '@/views/system/user/resetPwd'
 import { getProject } from '@/utils/baseConfig'
+import { Notification } from 'element-ui'
 
 export default {
   name: 'AppHeader',
   components: { ResetPwd },
   data() {
     return {
+      wsPath: process.env.BASE_WS,
       title: getProject().title,
       name: this.$store.getters.name,
-      showSetPwd: false,
+      showSetPwd: false
       // headerUrl: require('../../../assets/global_images/header.png')// 头部图片
     }
   },
@@ -47,7 +49,66 @@
       'avatar'
     ])
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initWebSocket()
+    })
+  },
   methods: {
+    initWebSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.wsPath
+        console.log(socketUrl, '*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          if (data.type === 'gasAlarm') {
+            const message = data.monitorName + '设备报警甲烷值：' + data.concentration + '，报警位置：' + data.alarmDirection + ',' + data.alarmPitch
+            Notification({
+              title: '甲烷超标报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          } else if (data.type === 'strengthAlarm') {
+            const message = data.monitorName + '设备报警遮挡'
+            Notification({
+              title: '遮挡报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          }
+        }
+      }
+      // 监听socket错误
+      that.socket.onerror = function() {
+        Notification({
+          title: '服务器错误',
+          message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+          type: 'error',
+          duration: 0
+        })
+      }
+      // 监听socket关闭
+      that.socket.onclose = function() {
+        console.log('WebSocket已关闭')
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
     },
diff --git a/src/views/alarmManage/alarmDetail.vue b/src/views/alarmManage/alarmDetail.vue
index 57d601c..2911e71 100644
--- a/src/views/alarmManage/alarmDetail.vue
+++ b/src/views/alarmManage/alarmDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="报警详情" :visible.sync="dialogFormVisible">
+  <el-dialog :visible.sync="dialogFormVisible" title="报警详情">
     <el-form v-loading="loading" ref="dataForm" :model="alarmForm" label-well-code="right" label-width="100px">
       <el-row type="flex" justify="center">
         <el-col :span="12">
@@ -88,7 +88,7 @@
       }
       var arr1 = this.alarmForm.alarmTime.split(' ')
       var sdate = arr1[0].split('-')
-      var date = new Date(sdate[0], sdate[1]-1, sdate[2])
+      var date = new Date(sdate[0], sdate[1] - 1, sdate[2])
       var startTime = getDayTime(date.getTime() - 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       var endTime = getDayTime(date.getTime() + 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       console.log(startTime)
@@ -109,9 +109,9 @@
       }
     },
     receiveParamsFromHtml(res) {
-      if(res.indexOf('0') > -1)this.$message.success(res.replace('0',''))
-      else if(res.indexOf('-1') > -1) this.$message.error(res.replace('-1',''))
-      else this.$message.info(res.replace('1',''))
+      if (res.indexOf('0') > -1) this.$message.success(res.replace('0', ''))
+      else if (res.indexOf('-1') > -1) this.$message.error(res.replace('-1', ''))
+      else this.$message.info(res.replace('1', ''))
     }
   }
 }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 4ef0255..a7ef0d1 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -22,10 +22,15 @@
 import { mapGetters } from 'vuex'
 import Calendar from '@/components/Calendar/calendar'
 import Clock from '@/components/Clock/clock'
-
+import { Notification } from 'element-ui'
 export default {
   name: 'Dashboard',
   components: { Clock, Calendar },
+  data() {
+    return {
+
+    }
+  },
   computed: {
     ...mapGetters([
       'name',
diff --git a/src/views/stationManage/components/editMonitor.vue b/src/views/stationManage/components/editMonitor.vue
index 270005c..893dbf4 100644
--- a/src/views/stationManage/components/editMonitor.vue
+++ b/src/views/stationManage/components/editMonitor.vue
@@ -111,7 +111,7 @@
         location: '',
         deviceCode: '',
         setupDate: '',
-        deviceIp:'',
+        deviceIp: '',
         devicePort: '',
         deviceUser: '',
         devicePassword: ''

diff --git a/config/dev.env.js b/config/dev.env.js
index 5cad7f4..53f67fb 100644
--- a/config/dev.env.js
+++ b/config/dev.env.js
@@ -6,5 +6,7 @@
 // 将两个配置对象合并，最终结果是 NODE_ENV：‘"development"'
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  // BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  BASE_WS: '"ws://127.0.0.1:8080/pan-tilt/websocket/2"'
 })
diff --git a/config/prod.env.js b/config/prod.env.js
index 6a9dcf4..e180f6e 100644
--- a/config/prod.env.js
+++ b/config/prod.env.js
@@ -1,5 +1,8 @@
 'use strict'
 module.exports = {
   NODE_ENV: '"production"',
-  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"'
+  BASE_API: '"http://111.198.10.15:12210/pan-tilt/"',
+  BASE_WS: '"ws:///111.198.10.15:12210/pan-tilt/websocket/2"'
+  // BASE_API: '"http://127.0.0.1:8080/pan-tilt/"',
+  // BASE_WS: '"ws://192.168.10.200:8080/pan-tilt/websocket/2"'
 }
diff --git a/src/layout/components/AppHeader.vue b/src/layout/components/AppHeader.vue
index 571db35..577a45b 100644
--- a/src/layout/components/AppHeader.vue
+++ b/src/layout/components/AppHeader.vue
@@ -29,15 +29,17 @@
 import { mapGetters } from 'vuex'
 import ResetPwd from '@/views/system/user/resetPwd'
 import { getProject } from '@/utils/baseConfig'
+import { Notification } from 'element-ui'
 
 export default {
   name: 'AppHeader',
   components: { ResetPwd },
   data() {
     return {
+      wsPath: process.env.BASE_WS,
       title: getProject().title,
       name: this.$store.getters.name,
-      showSetPwd: false,
+      showSetPwd: false
       // headerUrl: require('../../../assets/global_images/header.png')// 头部图片
     }
   },
@@ -47,7 +49,66 @@
       'avatar'
     ])
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.initWebSocket()
+    })
+  },
   methods: {
+    initWebSocket() {
+      const that = this
+      if (typeof (WebSocket) === 'undefined') {
+        Notification({
+          title: '提示',
+          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器或360浏览器极速模式！',
+          type: 'warning',
+          duration: 0
+        })
+      } else {
+        const socketUrl = this.wsPath
+        console.log(socketUrl, '*********************')
+        that.socket = new WebSocket(socketUrl)
+        // 监听socket打开
+        that.socket.onopen = function() {
+          console.log('浏览器WebSocket已打开')
+        }
+        // 监听socket消息接收
+        that.socket.onmessage = function(msg) {
+          // 转换为json对象
+          const data = JSON.parse(msg.data)
+          if (data.type === 'gasAlarm') {
+            const message = data.monitorName + '设备报警甲烷值：' + data.concentration + '，报警位置：' + data.alarmDirection + ',' + data.alarmPitch
+            Notification({
+              title: '甲烷超标报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          } else if (data.type === 'strengthAlarm') {
+            const message = data.monitorName + '设备报警遮挡'
+            Notification({
+              title: '遮挡报警',
+              // 这里也可以把返回信息加入到message中显示
+              message: message,
+              type: 'warning'
+            })
+          }
+        }
+      }
+      // 监听socket错误
+      that.socket.onerror = function() {
+        Notification({
+          title: '服务器错误',
+          message: '无法接收实时报警信息,请检查服务器后重新刷新页面',
+          type: 'error',
+          duration: 0
+        })
+      }
+      // 监听socket关闭
+      that.socket.onclose = function() {
+        console.log('WebSocket已关闭')
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
     },
diff --git a/src/views/alarmManage/alarmDetail.vue b/src/views/alarmManage/alarmDetail.vue
index 57d601c..2911e71 100644
--- a/src/views/alarmManage/alarmDetail.vue
+++ b/src/views/alarmManage/alarmDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="报警详情" :visible.sync="dialogFormVisible">
+  <el-dialog :visible.sync="dialogFormVisible" title="报警详情">
     <el-form v-loading="loading" ref="dataForm" :model="alarmForm" label-well-code="right" label-width="100px">
       <el-row type="flex" justify="center">
         <el-col :span="12">
@@ -88,7 +88,7 @@
       }
       var arr1 = this.alarmForm.alarmTime.split(' ')
       var sdate = arr1[0].split('-')
-      var date = new Date(sdate[0], sdate[1]-1, sdate[2])
+      var date = new Date(sdate[0], sdate[1] - 1, sdate[2])
       var startTime = getDayTime(date.getTime() - 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       var endTime = getDayTime(date.getTime() + 60 * 1000 * 5).Format('yyyy-MM-dd HH:mm:ss')
       console.log(startTime)
@@ -109,9 +109,9 @@
       }
     },
     receiveParamsFromHtml(res) {
-      if(res.indexOf('0') > -1)this.$message.success(res.replace('0',''))
-      else if(res.indexOf('-1') > -1) this.$message.error(res.replace('-1',''))
-      else this.$message.info(res.replace('1',''))
+      if (res.indexOf('0') > -1) this.$message.success(res.replace('0', ''))
+      else if (res.indexOf('-1') > -1) this.$message.error(res.replace('-1', ''))
+      else this.$message.info(res.replace('1', ''))
     }
   }
 }
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 4ef0255..a7ef0d1 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -22,10 +22,15 @@
 import { mapGetters } from 'vuex'
 import Calendar from '@/components/Calendar/calendar'
 import Clock from '@/components/Clock/clock'
-
+import { Notification } from 'element-ui'
 export default {
   name: 'Dashboard',
   components: { Clock, Calendar },
+  data() {
+    return {
+
+    }
+  },
   computed: {
     ...mapGetters([
       'name',
diff --git a/src/views/stationManage/components/editMonitor.vue b/src/views/stationManage/components/editMonitor.vue
index 270005c..893dbf4 100644
--- a/src/views/stationManage/components/editMonitor.vue
+++ b/src/views/stationManage/components/editMonitor.vue
@@ -111,7 +111,7 @@
         location: '',
         deviceCode: '',
         setupDate: '',
-        deviceIp:'',
+        deviceIp: '',
         devicePort: '',
         deviceUser: '',
         devicePassword: ''
diff --git a/src/views/stationManage/listStation.vue b/src/views/stationManage/listStation.vue
index 88e745f..f21a900 100644
--- a/src/views/stationManage/listStation.vue
+++ b/src/views/stationManage/listStation.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="app-container">
-    <div>
+  <div class="app-container" style="padding-top:0px;overflow-y: hidden">
+    <div style="overflow-y: hidden">
       <!--左半部分-->
       <el-col :span="6">
         <div style="width:90%;">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
-              <el-input v-model.trim="listQuery.keyword" placeholder="场站名称/监控点" clearable @change="fetchData"/>
+              <el-input v-model.trim="listQuery.keyword" placeholder="场站名称/监控点" clearable size="small" @change="fetchData"/>
             </div>
             <el-tree
               ref="tree"
@@ -15,6 +15,7 @@
               :expand-on-click-node="true"
               node-key="monitorPointId"
               default-expand-all
+              style="height: calc(100vh - 265px);"
               @node-click="nodeClick">
               <span slot-scope="{ node, data }" class="custom-tree-node">
                 <span v-if="data.deptId">{{ data.stationName }}</span>
@@ -44,89 +45,86 @@
         <div class="search-div">
           <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
             <el-row>
-              <el-button class="filter-item" type="primary" @click="addStation">新增场站</el-button>
-              <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="addMonitor">新增监控点</el-button>
-              <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="editMonitor">编辑监控点</el-button>
-              <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="delMonitor">删除监控点</el-button>
-              <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="setThresh">设置报警阈值</el-button>
+              <el-button class="filter-item" type="primary" size="small" @click="addStation">新增场站</el-button>
+              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="addMonitor">新增监控点</el-button>
+              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="editMonitor">编辑监控点</el-button>
+              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="delMonitor">删除监控点</el-button>
+              <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="setThresh">设置报警阈值</el-button>
             </el-row>
           </el-form>
         </div>
-        <el-card class="box-card">
-          <div class="body-right">
-            <el-row>
-              <el-col :span="7">
-                <div class="item-div">
-                  <span class="item-title">监控点名称：</span>
-                  <span class="item-value">{{ monitorInfo.monitorPointName }}</span>
-                </div>
-              </el-col>
-              <el-col :span="7">
-                <div class="item-div">
-                  <span class="item-title">安装位置：</span>
-                  <span class="item-value">{{ monitorInfo.location }}</span>
-                </div>
-              </el-col>
-              <el-col :span="5">
-                <div class="item-div">
-                  <span class="item-title">设备IP：</span>
-                  <span class="item-value">{{ monitorInfo.deviceIp }}</span>
-                </div>
-              </el-col>
-              <el-col :span="5">
-                <div class="item-div">
-                  <span class="item-title">设备用户名：</span>
-                  <span class="item-value">{{ monitorInfo.deviceUser }}</span>
-                </div>
-              </el-col>
-            </el-row>
-            <el-row style="margin-top: 20px">
-              <el-col :span="7">
-                <div class="item-div">
-                  <span class="item-title">设备编号：</span>
-                  <span class="item-value">{{ monitorInfo.devcode }}</span>
-                </div>
-              </el-col>
-              <el-col :span="7">
-                <div class="item-div">
-                  <span class="item-title">安装时间：</span>
-                  <span class="item-value">{{ monitorInfo.setupDate }}</span>
-                </div>
-              </el-col>
-              <el-col :span="5">
-                <div class="item-div">
-                  <span class="item-title">设备端口号：</span>
-                  <span class="item-value">{{ monitorInfo.devicePort }}</span>
-                </div>
-              </el-col>
-              <el-col :span="5">
-                <div class="item-div">
-                  <span class="item-title">设备密码：</span>
-                  <span class="item-value">{{ monitorInfo.devicePassword }}</span>
-                </div>
-              </el-col>
-            </el-row>
-            <el-row class="play-window-block">
-              <el-col :span="12">
-                <div v-show="videoShow">
-                  <iframe name="play" scrolling="no" border="0" height="420px" width="100%" vspale="0" frameBorder="0" src="/static/webCtrl/demo-easy.html?wmode=opaque"/>
-                </div>
-              </el-col>
-              <el-col :span="8" :offset="3" style="margin-top: 20px">
-                <el-row class="table-title" style="margin-bottom: 15px">
-                  <span>预置点列表</span>
-                </el-row>
-                <el-table :data="list" class="table" size="small" border>
-                  <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
-                    <template slot-scope="scope">
-                      <span :class="column.class">{{ scope.row[column.value] }}</span>
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-col>
-            </el-row>
-          </div>
-        </el-card>
+        <div class="body-right">
+          <el-row>
+            <el-col :span="7">
+              <div class="item-div">
+                <span class="item-title">监控点名称：</span>
+                <span class="item-value">{{ monitorInfo.monitorPointName }}</span>
+              </div>
+            </el-col>
+            <el-col :span="7">
+              <div class="item-div">
+                <span class="item-title">安装位置：</span>
+                <span class="item-value">{{ monitorInfo.location }}</span>
+              </div>
+            </el-col>
+            <el-col :span="5">
+              <div class="item-div">
+                <span class="item-title">设备IP：</span>
+                <span class="item-value">{{ monitorInfo.deviceIp }}</span>
+              </div>
+            </el-col>
+            <el-col :span="5">
+              <div class="item-div">
+                <span class="item-title">设备用户名：</span>
+                <span class="item-value">{{ monitorInfo.deviceUser }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row style="margin-top: 10px">
+            <el-col :span="7">
+              <div class="item-div">
+                <span class="item-title">设备编号：</span>
+                <span class="item-value">{{ monitorInfo.devcode }}</span>
+              </div>
+            </el-col>
+            <el-col :span="7">
+              <div class="item-div">
+                <span class="item-title">安装时间：</span>
+                <span class="item-value">{{ monitorInfo.setupDate }}</span>
+              </div>
+            </el-col>
+            <el-col :span="5">
+              <div class="item-div">
+                <span class="item-title">设备端口号：</span>
+                <span class="item-value">{{ monitorInfo.devicePort }}</span>
+              </div>
+            </el-col>
+            <el-col :span="5">
+              <div class="item-div">
+                <span class="item-title">设备密码：</span>
+                <span class="item-value">{{ monitorInfo.devicePassword }}</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row class="play-window-block">
+            <el-col :span="12" style="padding-top: 15px;padding-left: 15px">
+              <!--v-show="videoShow"-->
+              <iframe name="play" scrolling="no" border="0" height="460px" width="600px" vspale="0" frameBorder="0" src="/static/webCtrl/demo-easy.html"/>
+            </el-col>
+            <el-col :span="8" :offset="4" style="margin-top: 10px;padding-right: 10px" class="table-prelist">
+              <el-row class="table-title" style="margin-bottom: 10px">
+                <span>预置点列表</span>
+              </el-row>
+              <el-table :data="list" class="table-prelist" size="small" border height="calc(100vh - 320px)">
+                <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+                  <template slot-scope="scope">
+                    <span :class="column.class">{{ scope.row[column.value] }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+        </div>
       </el-col>
     </div>
     <!--编辑用户的对话框-->
@@ -175,10 +173,16 @@
       list: [],
       columns: [
         {
-          text: '编号',
+          text: '巡航线',
+          value: 'lineNum',
+          align: 'center',
+          width: 60
+        },
+        {
+          text: '巡航点',
           value: 'serialNum',
           align: 'center',
-          width: 55
+          width: 60
         },
         {
           text: '水平角',
@@ -190,6 +194,12 @@
           value: 'pitch',
           align: 'center'
         }
+        // {
+        //   text: '停留时间',
+        //   value: 'stopTime',
+        //   align: 'center',
+        //   width: 80
+        // }
       ],
       data: [],
       listLoading: false,
@@ -219,6 +229,9 @@
       }
     }
   },
+  beforeCreate: function() { // 从后台获取系统配置，根据配置判断是否加载验证码控件
+
+  },
   created() {
     // this.fetchData()
   },
@@ -351,8 +364,12 @@
               // this.nodeClick(this.data[j].children[0])
               // 获取预置点列表
               getPresetList(this.data[j].children[0].monitorPointId).then(response => {
-                debugger
-                this.list = response.data
+                const compare = function (x,y) {
+                  if(x.lineNum<y.lineNum) return -1
+                  else if(x.lineNum>y.lineNum) return 1
+                  else return 0
+                }
+                this.list = response.data.sort(compare)
                 this.listLoading = false
               })
               break
@@ -364,6 +381,7 @@
           console.log(jsonArray)
           console.log(this.data)
           this.listLoading = false
+          window.frames['play'].login()
         }
       })
     }
@@ -371,14 +389,17 @@
 }
 </script>
 
+<style rel="stylesheet/scss" lang="scss" >
+  .table-prelist {
+    .el-table td {
+      padding: 2px 0px !important;
+    }
+  }
+</style>
 <style rel="stylesheet/scss" lang="scss" scoped>
   .form-container{
     margin-bottom: 20px;
   }
-
-  .table{
-    margin-bottom: 20px;
-  }
   .pagination-container{
     margin-bottom: 50px;
   }
@@ -401,6 +422,6 @@
   .play-window-block {
     margin: 15px 15px 15px 0px;
     box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
-    height: calc(100vh - 175px);
+    height: calc(100vh - 270px);
   }
 </style>