alarm websocket

src/main.js

@@ -11,7 +11,9 @@ import '@/icons' // icon
 import '@/permission' // permission control
 import performLoader from '@/utils/global_main_loader.js'
 
- 
+   
+ import WS from '@/utils/websocket'  
+   Vue.prototype.$ws = WS
 Vue.use(ElementUI, { locale })
 performLoader(Vue) // 所有的第三方插件性质的东西都放到这里面了
 Vue.config.productionTip = false

src/store/index.js

@@ -5,6 +5,7 @@ import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
 import depart from './modules/depart'
+import websocket from './modules/websocket'
 
 
 Vue.use(Vuex)
@@ -16,7 +17,7 @@ const store = new Vuex.Store({
     settings,
     user,
     depart,
-
+websocket
   },
   getters
 })

src/store/modules/websocket.js

+const state ={
+    webSocketMsg: ''
+  }
+ const mutations={
+    SET_WS_MSG(state, msg) {
+  state.webSocketMsg = msg
+ 
+}
+}
+
+const getters = {
+  webSocketMsg(state) {
+      return state.webSocketMsg
+  }
+}
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    getters
+  
+  }
\ No newline at end of file

src/utils/websocket.js

+import store from '../store'
+const WS = {
+    $ws: null,
+    type:"",
+    // webscoket实例  
+    wsUrl: 'ws://8.142.143.40:8885/websocket/1',
+    // websocket链接地址       
+    createWS: function (val) {
+      this.type=val;
+      console.log(this.type);
+        if ('WebSocket' in window) {
+            this.$ws = new WebSocket(this.wsUrl)
+            this.$ws.onopen = this.wsOpen
+            this.$ws.onmessage = this.wsMessage
+            this.$ws.onerror = this.wsError
+            this.$ws.onclose = this.wsClose
+        } else {
+            alert('当前浏览器不支持webSocket')
+        }
+    },
+    wsOpen: function () {
+        this.send(WS.type)
+        console.log('== websocket open ==',"传值为" + WS.type)
+        heartBeat.start()
+    },
+    wsMessage: function (msg) {
+        // console.log( msg.data)
+       
+        heartBeat.reset()
+        store.commit('websocket/SET_WS_MSG', msg.data)
+    },
+     wsError: function (err) { 
+         console.log('== websocket error ==', err)
+         }, 
+         wsClose: function (event) {
+              console.log('== websocket close ==', event)
+             }
+}
+const heartBeat = {
+    timeout: 30000, // 心跳重连时间  
+    timeoutObj: null, // 定时器  
+    reset: function () {
+        clearInterval(this.timeoutObj)
+        console.log('websocket 心跳')
+        heartBeat.start()
+    },
+    start: function () {
+        this.timeoutObj = setTimeout(function () {
+            if (WS.$ws.readyState === 1) {
+                WS.$ws.send('HeartBeat')
+            }
+        }, this.timeout)
+    }
+}
+export default WS
\ No newline at end of file

src/views/alarm/cableTime/index.vue

@@ -276,9 +276,33 @@ export default {
       });
     },
   },
+  computed: {
+     
+    getWsMsg:{
+      get(){
+      return this.$store.state.websocket.webSocketMsg
+      },
+      set(a){
+        this.$store.state.websocket.webSocketMsg=a
+      }
+    },
+   
+  },
+  watch: {
+    getWsMsg: {
+      handler(newVal) {
+        this.getWsMsg=!!newVal
+        console.log(newVal);
+        // alert("接收到webSocket推送" + newVal);
+      },
+    },
+  },
   mounted() {
     this.getTableData();
   },
+   created(){
+   this.$ws.createWS("2")
+  }
 };
 </script>
 

src/views/alarm/device/index.vue

@@ -16,6 +16,7 @@
         <el-button type="primary" @click="getTableData">刷新</el-button>
         <el-button type="primary" @click="isQuery = !isQuery">查询</el-button>
         <el-button type="primary" @click="exportList">导出</el-button>
+       
       </div>
     </div>
     <div v-if="isQuery">
@@ -124,10 +125,18 @@
       class="pagination"
       @pagination="handlePageChange"
     />
+     <audio controls="controls"  id="my_audio" src="../../../assets/audio/alarm.mp3" style="display:none;" hidden="hidden">
+        </audio>
+        <div class="tips" v-if="tflag==true">
+          <p>提示</p>
+          <span>有一条新告警</span>
+        </div>
+    
   </div>
 </template>
 
 <script>
+
 import { deviceList, deviceConfirm, deviceCancel } from "../api";
 import { exportConnet } from "@/api/export";
 import search from "@/views/monitor/equipment/components/search.vue";
@@ -135,6 +144,7 @@ import download from "@/utils/download";
 export default {
   data() {
     return {
+      alarmInfo:'',
       dialogInfo: [],
       centerDialogVisible: false,
       confirmStatus: 2,
@@ -158,11 +168,13 @@ export default {
           key: 0,
         },
       ],
+      tflag:false,
       isQuery: false,
       searchOption: {},
     };
   },
   components: { search },
+
   methods: {
     // 表格背景图颜色
     cellClassFn({ row, column, rowIndex, columnIndex }) {
@@ -200,7 +212,7 @@ export default {
         this.total = res.total;
       });
     },
-    confirm2(row) { 
+    confirm2(row) {
       this.centerDialogVisible = true;
       this.dialogInfo = row;
     },
@@ -209,9 +221,10 @@ export default {
       deviceConfirm({ id: id }).then((res) => {
         this.getTableData();
       });
-       this.centerDialogVisible = false
+      this.centerDialogVisible = false;
     },
     cancel2(row) {
+      console.log(row);
       this.centerDialogVisible = true;
       this.dialogInfo = row;
     },
@@ -224,7 +237,7 @@ export default {
         console.log(res);
         this.getTableData();
       });
-      this.centerDialogVisible = false
+      this.centerDialogVisible = false;
     },
 
     changeType(item) {
@@ -243,11 +256,46 @@ export default {
         download(res, "vnd.ms-excel", `设备连接告警.xls`);
       });
     },
+  
+  },
+  computed: {
+     
+    getWsMsg:{
+      get(){
+      return this.$store.state.websocket.webSocketMsg
+      },
+      set(){
+        // this.$store.state.websocket.webSocketMsg=a
+      }
+    },
+   
+  },
+  watch: {
+    getWsMsg: {
+      handler(newVal) { 
+      
+        this.getWsMsg=!!newVal
+        my_audio.play();
+        this.tflag=true
+    setTimeout(() => {
+      this.tflag=false
+    }, 3000);
+   
+        console.log(newVal);
+        
+        // alert("接收到webSocket推送" + newVal);
+      },
+    },
   },
   mounted() {
     this.getTableData();
+   
   },
+  created(){
+   this.$ws.createWS("1")
+  }
 };
+
 </script>
 
 <style lang="scss" scoped>
@@ -280,4 +328,16 @@ export default {
     }
   }
 }
+.tips{
+  width: 400px;
+  height: 80px;
+  background: #fff;
+  box-shadow: 0px 2px 14px #888888;
+  border-radius: 5px;
+  padding: 0 20px 20px 20px;
+  position: absolute; 
+  text-align: center;
+ top:calc(50% - 40px);
+ left:calc(50% - 200px)
+}
 </style>