vue 实时监听数据实现报警功能

作者:神秘网友 发布时间:2020-10-29 00:41:44

vue 实时监听数据实现报警功能

vue 实时监听数据实现报警功能

项目需求:

项目中需要实时监听数据变化达到预定值后,会触发报警功能(报警弹窗提示)


问题描述:

1.前台在不断获取数据时候数据传输过程中,要避免数据一直积累,页面越来越卡;
2.该报警功能需要在所有页面中进行监听;


解决方案:

1.先做出弹框页面的组件

<template>
	<span>
		<el-dialog title="提示"
				   :visible.sync="dialogVisible"
				   :close-on-click-modal="false"
				   :append-to-body="true"
				   width="500px"
				   :before-close="close"
				   custom-class="custom-dialog">
			<div class="alarm-dlg-body">
<!--				<ul>-->
<!--        		<li><span>产生报警:</span><span>{{warning.deviceName}}</span></li>-->
<!--        		<li><span>报警原因:</span><span>{{warning.warningDesc}}</span></li>-->
<!--      			</ul>-->

				<el-table
						:data="alarmList"
						class="alarm-table"
						stripe
						:header-cell-style="{background:'#83959E',color: 'rgba(255, 0, 0, 0.6)'}" >
          			<el-table-column align="center" label="报警名称" prop="deviceName" show-overflow-tooltip></el-table-column>
					<el-table-column align="center" label="报警原因" prop="warningDesc" show-overflow-tooltip></el-table-column>
					<el-table-column align="center" label="产生时间" prop="createTime" show-overflow-tooltip></el-table-column>
        		</el-table>

			</div>

			<div slot="footer" class="dialog-footer">
				<el-button class="alarm-dlg-btn-close" type="primary" size="mini" @click="close">确 定</el-button>
			</div>
		</el-dialog>
	</span>
</template>
<script>

import {
	HTTP_PATH
} from '@/network/httpConfig';

export default {
  name: "common",
  data() {
	  return {
		  dialogVisible: false,

		  alarmList: [],
		  wsConnect: null,

		  guardInterval: null,
		  guardTimer: 15000
	  };
  },
  computed: {

  },
  methods: {

    close(){
      this.dialogVisible = false;
      this.alarmList = [];
    },

	  // 创建websocket
	  createWsConnect() {
		  this.wsConnect = new WebSocket(HTTP_PATH.alarmWsUrl);

		  this.wsConnect.onopen = () =>
		  {
			  console.log("websocket已经连接");
		  };

		  this.wsConnect.onmessage = (evt) =>
		  {
			  console.log(evt.data);

			  if (!evt.data) {
			  	return;
			  }

			  let tableItem = JSON.parse(evt.data);

			  if (this.dialogVisible) {

			  	this.alarmList.push(tableItem);

			  } else {

			  	this.dialogVisible = true;
			  	this.$nextTick(() => {
					this.alarmList.push(tableItem);
				});

			  }


		  };

		  this.wsConnect.onclose = () =>
		  {
			  console.log("websocket已经关闭");
		  };

		  this.wsConnect.onerror = () =>
		  {
			  console.log("websocket连接异常!");
		  };
	  },

	  // 判断websocket是否在工作中
	  wsIsWorking() {
		  return this.wsConnect && this.wsConnect.readyState === 1;
	  }


  },
  watch:{

  },
  mounted() {

	  setTimeout(() => {
		  this.createWsConnect();

		  // 创建守护定时任务
		  this.guardInterval = setInterval(() => {
			  if (!this.wsIsWorking()) {
				  this.createWsConnect();
			  }
		  }, this.guardTimer);
	  }, 1000);

  },

	destroyed() {

  		if (this.guardInterval) {
  			clearInterval(this.guardInterval);
		}

	}
};
</script>
<style scoped>
  ul li{
    margin-bottom: 10px;
  }
  ul li span {
    font-size: 16px;
  }
  ul li span:nth-child(1){
    margin-right: 5px;
    color: red;
  }

 .alarm-dlg-body {
	 width: 100%;

	 padding: 20px 15px;

 }

 .alarm-dlg-btn-close {
	 margin-right: 5px;
	 margin-bottom: 5px;
 }

	.alarm-table {
		width: 100%;
		max-height: 360px;
		overflow-y: auto;
	}
</style>

这里WebSocket的路径由于项目优化需求统一封装过,这里再次创建定时器个人觉得更友好一点

2.再在页面结构层直接引入
vue 实时监听数据实现报警功能

总结

这里使用WebSocket,而没用定时任务发送接口,具体原因自行百度;

一般有这样的需求,肯定会有报警规则管理,报警数据展示等,这里需要注意接口之间的联调

vue 实时监听数据实现报警功能相关教程

  1. Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74)

    Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74) 1.搭建VUE项目 使用vue-cli工具创建一个vue项目:( 确保已安装node.js ) vue init webpack cesiumtest 2.用webstrom打开项目(其他编码工具也可以) 3.安装cesium 在配置文件package.json,中新加ce

  2. vue项目配置环境变量

    vue项目配置环境变量 配置环境变量官方文档 配置环境变量的两种方式 1.在根目录创建.env文件并创建变量 环境变量的命名必须是:VUE_APP_XXX 环境变量声明方式:“键=值”对 2.配置文件作用范围 3.配置配置文件 1.html中使用环境变量 2.组件中使用环境变量 //.

  3. Vue echarts4 热力图

    Vue echarts4 热力图 下面图1为echarts官网上的一个实例,简单的利用点坐标进行热力图渲染,略显粗糙,不是很符合项目要求,图2为在echarts gallery上找到的一个热力图实例。 下面为图2的配置项: var axisdata = [];for (var i = -5; i 5; i++) { axisdata.p

  4. vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记

    vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记录】 目前实现了两点: 1. 根据准备好的数据生成树形图 2. 根据数据数值改变节点以及节点文本颜色 百度上关于g6树形图的文章挺少的,因为g6功能很齐全非常庞大 (非常用心的在做图表,真的好用)

  5. 前端vue excel导出数据流

    前端vue excel导出数据流 项目中有一个导出功能的实现,用博客来记录一下。因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Exce

  6. vue组件

    vue组件 Vue组件 组件构造器和注册 全局组件和局部组件 父组件和子组件 注册组件的语法糖 注册全局组件的语法糖 注册局部组件的语法糖 组件模板抽离 组件构造器和注册 vue组件的基本使用步骤和实现: 组件的使用分为三个步骤: 1.创建组件构造器 2.注册组件 3

  7. Vue报错Cannot find module ‘webpack-cli/bin/config-yargs‘

    Vue报错Cannot find module ‘webpack-cli/bin/config-yargs‘ npm i webpack-dev-server -D 把这个工具安装到项目本地开发依赖 注意:webpack-dev-server 这个工具依赖 webpack,必须在本地(项目中)安装 webpack 安装完成后,执行命令 npm run dev 发现报错

  8. 锚点双向定位滚动功能-升级版(vue)

    锚点双向定位滚动功能-升级版(vue) 对上一文章中的功能进行进一步的优化升级:锚点双向定位滚动功能(Vue实现) 效果1(窗口大于菜单): 效果2(窗口小于菜单): 效果3(点击事件): 代码实现: template div ref=sliderBody class=slider-main div class