更新前端异常功能处理

imcs-ui/src/layout/index.vue

@@ -56,10 +56,66 @@ export default {
       }
     }
   },
+  watch: {
+	  	websocketMsg(curVal, oldVal) {
+	      	let obj = JSON.parse(curVal)
+	      	this.openMessageTips(obj)
+	    }
+	},
+  mounted() {
+    // 判断长连接，是否已经开启
+	  	if(this.$store.state.websocket.websock == null){
+	  		// 页面刚进入时开启长连接
+    		this.$store.dispatch('STAFF_WEBSOCKET')			
+	  	}
+      this.$nextTick(()=> {
+        //let obj = JSON.parse(this.$store.getters.STAFF_UPDATE.msg);
+        //this.openMessageTips(obj);
+      });
+  },
+  // 销毁
+	destroyed() {
+	    this.websocketClose()
+	},
   methods: {
     handleClickOutside() {
       this.$store.commit('setting/closeSidebar', { withoutAnimation: false })
-    }
+    },
+    websocketMsg() {		  
+	      return this.$store.getters.STAFF_UPDATE.msg
+	  },
+    openMessageTips(data){      //排除数字大屏
+      
+      if(this.$route.fullPath.indexOf("/largeScreen/twoDatasModel")<0){
+        console.log("接收websocket的推送信息 == ", data)        
+        if(data!=null && data.type == 'PUSH_TYPE_DATA_SCREEN'){
+          this.$nextTick(()=> {
+              let datas = data.data.warnMap.warnData.records
+              let that = this
+              datas.map((data)=>{
+                  let msg = data.feedback ? data.feedback : " 响应超时 ";
+                  let content = "["+ data.resourceName +"] "+data.procedureName+"("+data.instructionName+")" + msg;
+                  this.$notification.error(content, { timer: 10, title:"异常警报", showCloseIcn:true });
+              })
+          });
+        }
+      }
+    },
+    // 组件销毁的时候，关闭websocket连接
+	  websocketClose() { 
+	      this.$store.getters.STAFF_UPDATE.lockReconnect = true
+	      this.$store.getters.STAFF_UPDATE.websock.close() // 离开路由之后断开websocket连接
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.reconnectData) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.timeoutObj) // 离开清除 timeout
+	      clearTimeout(this.$store.getters.STAFF_UPDATE.serverTimeoutObj) // 离开清除 timeout
+	    },
+	  	// websocket信息变更
+	  onmessage() {
+	      this.$store.getters.STAFF_UPDATE.websock.onmessage = function(evt) {
+	        console.log(evt)
+		     	console.log("websocket获取数据==="+evt)
+	      }
+	  },
   }
 }
 </script>
@@ -106,4 +162,17 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+
+  .dialog-notice{
+    position: fixed;
+    bottom: 85px;
+    display: inline-block;
+    max-width: 300px;
+    left: 0;
+    right: 0;
+    margin: 0 auto 10px auto;
+    background-color: #000;
+    text-align: center;
+    z-index: 9999;
+}
 </style>

imcs-ui/src/main.js

@@ -70,6 +70,19 @@ Object.keys(filters).forEach(key => {
 // 注册打印
 Vue.use(Print) 
 
+//注册全局弹框
+//import Notice from "@/components/Notice/index.js"
+//Vue.use(Notice)
+import VueNotification from "@kugatsu/vuenotification"; 
+Vue.use(VueNotification, {
+  timer: 20,
+  error:{
+    background: "white",
+    color: "red"
+  },
+  position: "bottomRight",
+});
+
 Vue.config.productionTip = false
 
 new Vue({

imcs-ui/src/views/zuihou/largeScreen/twoDatasModel/Index.vue

@@ -582,6 +582,29 @@
 						 this.mashingOneList.data = this.mashingOneList.data.concat(this.mashingTwoList.data)	
 						
 						 //this.$ref.runningTime.innerHmtl =  ((allDatas[0] + 5/360)/60).toFixed(1)
+                         
+						 let datas = data.data.warnMap.warnData.records
+						 let that = this
+						 this.yujingList = datas.map((data)=>{						    
+						    let msg = data.feedback ? data.feedback : " 响应超时 ";
+							let arr = data.createTime;                            							 
+							let time = arr[0] + "-" + arr[1] + "-" + arr[2] + "\t" + arr[3] + ":" + arr[4];	
+                            let itemname = "["+ data.resourceName +"] "+data.procedureName+"("+data.instructionName+")" + msg; 	
+                            if(data.status == '0'){
+							    setTimeout(function(){
+								    that.$notify({
+								    title: '预警提示',
+									message: itemname + "\t" + "请管理人员去产线查看",
+									type: 'warning',
+									position: 'bottom-right',									
+									duration: 5000,
+									customClass:'notifyStyle', 
+								   });								
+								},8000);							    
+							}						
+						    return {itemname:itemname , time: time}
+						 });
+
 
 					})
 			    }	
@@ -717,6 +740,15 @@
 	.timeprogress .el-progress-bar__inner {
 	  text-align:center;
 	}
+	.notifyStyle {
+	  background-color:#000088 !important;	  
+	}
+	.notifyStyle .el-notification__content{
+	   color: #fff !important;
+	}
+	.notifyStyle .el-notification__title {
+	   color: #fff !important;
+	}
 </style>
 <!-- 本组件样式 -->
 <style lang="scss" scoped>