Javascript实现的智能消防栓状态监测画面
Posted liujiabing
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript实现的智能消防栓状态监测画面相关的知识,希望对你有一定的参考价值。
系统需要添加智能消防栓模块。集成了一家采用NbIOT通讯的智能消防栓产品。由第厂家平台对接NbIot特联网平台,我们平台提供一个api从第三方平台接收消防栓状态,用SignlaR把状态推送到前端。需要写一个状态实时同步界面,包括倾斜报警、盖子打开报警、出水告警等。
先看下测试效果图。
附Vue源码
<template> <div style="color:white;height:100%;"> <div id="todetail"> <router-link :to="`/admin/stand/commondevice?sid=$$route.query.sid`">this.$t("详情")</router-link> </div> <div class="detailview"> <div class="detailview_1"> <div> <box style="position:relative"> <div id="centerTop" style="position:absolute;top:20px;left:20px"> <!-- <div style="font-size:1.5rem">this.$t("消防栓检测")</div> --> <div style="font-size:1.5rem">测试</div> <div>盖子打开<input v-model="animate.cap.angel" /> 盖子角度animate.cap.currentAngel</div> <div> 栓柱倾斜<input v-model="animate.bolt.angel" /> 倾斜角度animate.bolt.currentAngel</div> <div> <b-form-checkbox switch size="lg" v-model="animate.water.action">放水</b-form-checkbox> </div> </div> <div id="leftTop" style="width:100%;height:100%"></div> </box> </div> </div> <div class="detailview_1"> <div> <box id="canvas_box" style="position:relative"> <div :style="canvasStyle"> <canvas ref="canvas_bolt" style="position:absolute;left:0;bottom:0;"></canvas> <canvas ref="canvas_cap" style="position:absolute;left:0;bottom:0;"></canvas> <canvas ref="canvas_water" style="position:absolute;left:0;bottom:0;"></canvas> <canvas ref="canvas_wall" style="position:absolute;left:0;bottom:0;"></canvas> </div> </box> </div> </div> <div class="detailview_1"> <div> <box> </box> </div> </div> <div class="detailview_2"> <div> <box> </box> </div> </div> </div> <img :src="boltData.pic" id="boltPic" @load="drawBolt(false)" hidden/> <img :src="capData.pic" id="capPic" @load="drawCap(false)" hidden/> <img :src="wallData.pic" id="wallPic" @load="drawWall" hidden/> </div> </template> <script> import box from "@/components/box.vue"; import alarm from "@/components/alarm"; export default components: box, alarm , data: function() return /* 动画参数配置 */ animate: /* 盖子动画参数配置 */ cap: thread: null,//保存定时器 angel: 0,//盖子角度 currentAngel: 0,//当前角度 speed: 20 //盖子角度变化的速度 , bolt: thread: null, angel: 0, currentAngel: 0, speed: 20 , water: thread: null, rate: 0, speed: 0, action: false , /**画布父元素的css */ canvasStyle: position: "absolute", left: 0, bottom: 0, width: "100%", height: "100%" , /**画布初始化参数 */ initData: /**原图尺寸 */ size: width: 340, height: 380 , /**渲染尺寸 */ rendSize: width: 0, height: 0 , /**底部墙渲染数据 */ wallData: //画片 pic: require("@/assets/img/hr/ic_di.png"), //canvas上下文 ctx: null, //原图尺寸 size: width: 340, height: 166 , //渲染尺寸 rendSize: width: 0, height: 0 , //起点坐标 startPos: x: 0, y: 0 , //栓柱渲染数据 boltData: pic: require("@/assets/img/hr/ic_xfx.png"), //图片 ctx: null,//canvas上下文 offsetX: 45,//X轴偏移量 RBX: 160,//栓柱右下角X轴偏移量 offsetRBX: 160,//栓柱右下角X轴渲染后偏移量 //原图尺寸 size: width: 127, height: 216 , //渲染尺寸 rendSize: width: 0, height: 0 , //起点坐标 startPos: x: 0, y: 0 , //盖子渲染数据 capData: pic: require("@/assets/img/hr/ic_xfx_gz.png"),//图片 ctx: null,//canvas上下文 offsetX: 172,//x轴偏移量 offsetY: 72,//y軕偏移量 //原图尺寸 size: width: 20, height: 46 , //渲染尺寸 rendSize: width: 0, height: 0 , //起点坐标 startPos: x: 0, y: 0 , //水滴渲染数据 waterData: ctx: null,//canvas上下文 //渲染尺寸 rendSize: width: 0, height: 0 ; , mounted: function() this.$nextTick(() => //初始化 this.initCanvas(); window.addEventListener("resize", () => //浏览器尺寸大小改变后重新渲染 this.initCanvas(true); ); ); , watch: //监控盖子的角度 "animate.cap.angel": function() this.startCapAnimate(); , //监控栓柱的角度 "animate.bolt.angel": function() this.startBoltAnimate(); , //监控是否放水 "animate.water.action": function() //把柱子立正 this.animate.bolt.currentAngel = 0; this.animate.bolt.angel = 0; //开盖子 this.animate.cap.currentAngel = 90; this.animate.cap.angel = 90; if (this.animate.water.action) //放水 this.startWater(); else //停水 window.clearInterval(this.animate.water.thread); this.waterData.ctx.clearRect( 0, 0, this.initData.rendSize.width, this.initData.rendSize.height ); //关盖子 this.animate.cap.angel = 0; , methods: initCanvas(isDraw) //调整画布位置及大小 //父元素大小 var parentWidth = document.getElementById("canvas_box").clientWidth; var parentHeight = document.getElementById("canvas_box").clientHeight; //画布宽度最大值为父元素宽度 this.initData.rendSize.width = this.initData.size.width > parentWidth ? parentWidth : this.initData.size.width; //根据比率设置画布高度 var rate = this.initData.size.width / this.initData.size.height; this.initData.rendSize.height = this.initData.size.height / rate; //画面高度最大值为父元素高度 if (this.initData.rendSize.height > parentHeight) this.initData.rendSize.height = parentHeight; //再次调整宽度 this.initData.rendSize.width = this.initData.rendSize.height * rate; //设置画布大小 this.canvasStyle.width = `$this.initData.rendSize.widthpx`; this.canvasStyle.height = `$this.initData.rendSize.height`; if (this.initData.rendSize.width < parentWidth) //画布居中 var diff = parentWidth - this.initData.rendSize.width; this.canvasStyle.left = `$diff / 2px`; //设置最底部墙的渲染数据 var rateWall = this.wallData.size.width / this.wallData.size.height; this.wallData.rendSize.width = this.initData.rendSize.width; this.wallData.rendSize.height = this.initData.rendSize.width / rateWall; this.wallData.startPos.x = 0; this.wallData.startPos.y = this.initData.rendSize.height - this.wallData.rendSize.height; this.$refs.canvas_wall.width = this.initData.rendSize.width; this.$refs.canvas_wall.height = this.initData.rendSize.height; this.wallData.ctx = this.$refs.canvas_wall.getContext("2d"); //设置消防栓的渲染数据 var rateBolt = this.boltData.size.width / this.boltData.size.height; var rateBoltWidth = this.boltData.size.width / this.initData.size.width; this.boltData.rendSize.width = this.initData.rendSize.width * rateBoltWidth; this.boltData.rendSize.height = this.boltData.rendSize.width / rateBolt; var rateBoltOffset = this.initData.size.width / this.initData.rendSize.width; this.boltData.startPos.x = this.boltData.offsetX / rateBoltOffset; this.boltData.offsetRBX = this.boltData.RBX / rateBoltOffset; this.boltData.startPos.y = this.initData.rendSize.height - (this.wallData.rendSize.height + this.boltData.rendSize.height); this.$refs.canvas_bolt.width = this.initData.rendSize.width; this.$refs.canvas_bolt.height = this.initData.rendSize.height; this.boltData.ctx = this.$refs.canvas_bolt.getContext("2d"); //设置盖子的渲染数据 var rateCap = this.capData.size.width / this.capData.size.height; var rateCapWidth = this.capData.size.width / this.initData.size.width; this.capData.rendSize.width = this.initData.rendSize.width * rateCapWidth; this.capData.rendSize.height = this.capData.rendSize.width / rateCap; this.capData.startPos.x = this.capData.offsetX / rateBoltOffset; this.capData.startPos.y = this.capData.offsetY / (this.boltData.size.height / this.boltData.rendSize.height) + this.boltData.startPos.y; this.$refs.canvas_cap.width = this.initData.rendSize.width; this.$refs.canvas_cap.height = this.initData.rendSize.height; this.capData.ctx = this.$refs.canvas_cap.getContext("2d"); //设置水滴渲染数据 this.$refs.canvas_water.width = this.waterData.rendSize.width = this.initData.rendSize.width; this.$refs.canvas_water.height = this.waterData.rendSize.height = this.initData.rendSize.height; this.waterData.ctx = this.$refs.canvas_water.getContext("2d"); //页面加载初始化不能画,因为可能图片还没有加载出来。 //浏览器大小调整时可以画,因为图片已经加载完毕 if (isDraw) this.drawWall(); this.drawBolt(); this.drawCap(); , /* 画底部的墙 */ drawWall() this.wallData.ctx.drawImage( document.getElementById("wallPic"), this.wallData.startPos.x, this.wallData.startPos.y, this.wallData.rendSize.width, this.wallData.rendSize.height ); , /* 盏栓柱 angel:栓柱倾斜角度 */ drawBolt(angel) angel = angel || this.animate.bolt.angel; this.boltData.ctx.clearRect( 0, 0, this.initData.rendSize.width, this.initData.rendSize.height ); this.boltData.ctx.save(); //以栓柱右下角为旋转基点 this.boltData.ctx.translate( this.boltData.offsetRBX, this.initData.rendSize.height - this.wallData.rendSize.height ); this.boltData.ctx.rotate(angel * Math.PI / 180); //以栓柱右下角为中心点,原来的起点坐标灰新坐标系中的位置 var cx = -(this.boltData.offsetRBX - this.boltData.startPos.x); var cy = -this.boltData.rendSize.height; this.boltData.ctx.drawImage( document.getElementById("boltPic"), cx, cy, this.boltData.rendSize.width, this.boltData.rendSize.height ); this.boltData.ctx.restore(); //第次还要调整一下盖子的位置,让盖子跟栓柱一起倾斜 this.drawCap(null, this.animate.bolt.currentAngel); , /* 画盖子 angel:盖子角度 boltAngel:栓柱角度,用于计算盖子的起点位置 */ drawCap(angel, boltAngel) angel = angel || this.animate.cap.angel; boltAngel = boltAngel || this.animate.bolt.angel; this.capData.ctx.save(); //清空内容 this.capData.ctx.clearRect( 0, 0, this.initData.rendSize.width, this.initData.rendSize.height ); //把控制点放到栓柱的右下角 this.capData.ctx.translate( this.boltData.offsetRBX, this.initData.rendSize.height - this.wallData.rendSize.height ); //以栓柱右下角为旋转基点,旋转和栓柱一样的角度,这样不管栓柱倾斜到什么角度,盖子也能找到他的起点应该在的位置 this.capData.ctx.rotate(boltAngel * Math.PI / 180); //旋转完后控制中心点坐标加到原来的位置 this.capData.ctx.translate( -this.boltData.offsetRBX, -this.initData.rendSize.height + this.wallData.rendSize.height ); //再把中心点放点盖子的起点位置 this.capData.ctx.translate( this.capData.startPos.x, this.capData.startPos.y ); //盖子的角度 var rotage = angel * Math.PI / 180 * -1; this.capData.ctx.rotate(rotage); this.capData.ctx.drawImage( document.getElementById("capPic"), 0, 0, this.capData.rendSize.width, this.capData.rendSize.height ); //画完后回到保存前的状态 this.capData.ctx.restore(); , /* 栓柱倾斜效果 */ startBoltAnimate() if (this.animate.bolt.thread) window.clearInterval(this.animate.bolt.thread); this.animate.bolt.thread = window.setInterval(() => var exit = false; //变化currentAngel,直到等于angel if (this.animate.bolt.angel > this.animate.bolt.currentAngel) this.animate.bolt.currentAngel += 1; if (this.animate.bolt.currentAngel > this.animate.bolt.angel) exit = true; else this.animate.bolt.currentAngel -= 1; if (this.animate.bolt.currentAngel < this.animate.bolt.angel) exit = true; if (exit) this.animate.bolt.currentAngel = this.animate.bolt.angel * 1; //画栓柱,角度为currentAngel。每次角度累加或累减1 this.drawBolt(this.animate.bolt.currentAngel); if (exit) window.clearInterval(this.animate.bolt.thread); this.animate.bolt.thread = null; , this.animate.bolt.speed); , /* 盖子角度变化效果。 callBack:完成后的回调 */ startCapAnimate(callBack) if (this.animate.cap.thread) window.clearInterval(this.animate.cap.thread); this.animate.cap.thread = window.setInterval(() => var exit = false; //变化currentAngel,直到等于angel if (this.animate.cap.angel > this.animate.cap.currentAngel) this.animate.cap.currentAngel += 1; if (this.animate.cap.currentAngel > this.animate.cap.angel) exit = true; else this.animate.cap.currentAngel -= 1; if (this.animate.cap.currentAngel < this.animate.cap.angel) exit = true; if (exit) this.animate.cap.currentAngel = this.animate.cap.angel * 1; //画盖子,角度为currentAngel。每次角度累加或累减1 this.drawCap(this.animate.cap.currentAngel); if (exit) window.clearInterval(this.animate.cap.thread); this.animate.cap.thread = null; if (callBack) callBack(); , this.animate.cap.speed); , /* 开始放水 */ startWater() if (this.animate.water.thread) window.clearInterval(this.animate.water.thread); this.animate.water.thread = window.setInterval(() => //控制变量累加,最大值为1 this.animate.water.rate += 0.03; if (this.animate.water.rate >= 1) this.animate.water.rate = 0; //画水流 this.drawPullWater(this.animate.water.rate); ); , /* 画水流 rate:控制变量 */ drawPullWater(rate) //先清除画布 this.waterData.ctx.clearRect( 0, 0, this.initData.rendSize.width, this.initData.rendSize.height ); //填充水流颜色 this.waterData.ctx.strokeStyle = "rgba(2,180,245,0.8)"; this.waterData.ctx.fillStyle = "rgba(2,180,245,0.8)"; this.waterData.ctx.beginPath(); //一次画4个水滴,水滴从盖口按二次贝塞尔曲线到终点 for (var i = 0; i < 4; i++) //起点坐标,盖口,每个水滴往下移一点,免点重叠 var start = x: this.capData.startPos.x + this.capData.startPos.x * 0.05, y: this.capData.startPos.y + this.capData.startPos.y * (i + 1) * 0.15 ; //终点坐标,画面右下角,每个水滴往下移一点,免点重叠 var end = x: this.initData.rendSize.width, y: start.y + start.y * 0.5 + i * (start.y * 0.1) ; //获取二次贝塞尔曲线控制点 var control = this.getSecControl(start.x, start.y, end.x, end.y); //水滴的水平角度依次加5度,直线公式:y=5x-5; var angel = 5 * i - 5; //获取当前要画的位置 var point = this.getCurpoint(start, end, control, rate); //画水滴 this.drawCur( this.waterData.ctx, 60, angel, 15 + 0.15 * rate * 100, point.x, point.y ); this.waterData.ctx.closePath(); this.waterData.ctx.fill(); , /* 根据贝塞尔公式获取在指定贝塞尔曲线上的点 start:曲线起点 end:曲线终点 c:曲线控制点 t:控制变量,为0时是起点,为1时是终点 */ getCurpoint(start, end, c, t) var x = (1 - t) * (1 - t) * start.x + 2 * t * (1 - t) * c.x + t * t * end.x; var y = (1 - t) * (1 - t) * start.y + 2 * t * (1 - t) * c.y + t * t * end.y; return x: x, y: y ; , /* 获取二次贝塞尔曲线的控制点,X坐票取中点,Y坐标取起点Y坐标稍下。 startx:起点x坐标 starty:起点y坐标 endx:终点x坐标 endy:终点y坐标 */ getSecControl(startx, starty, endx, endy) return x: startx + (endx - startx) / 2, y: starty - endy * 0.1 ; , /* 画水滴,由二条三次贝塞尔曲线组成 ctx:Canvas Context angel:夹角大小(水滴大小) hangel:水平角度(水滴方向) line:从起点到水滴终点的距离长度(像素))))),决定了水滴长度 startx:起点x坐标 starty:起点y坐标 */ drawCur(ctx, angel, hangle, line, startx, starty) angel = angel * Math.PI / 180; hangle = hangle * Math.PI / 180; var p1 = []; var p2 = []; p1[0] = Math.cos(hangle) * line + startx; p1[1] = Math.sin(hangle) * line + starty; p2[0] = startx + Math.cos(angel + hangle) * line; p2[1] = starty + Math.sin(angel + hangle) * line; ctx.moveTo(startx, starty); var p = p1: p1, p2: p2 ; var c1 = [(startx + p.p1[0]) / 2, (starty + p.p1[1]) / 2]; var c2 = [(p.p1[0] + p.p2[0]) / 2, (p.p1[1] + p.p2[1]) / 2]; ctx.bezierCurveTo(c1[0], c1[1], p.p1[0], p.p1[1], c2[0], c2[1]); var c3 = [(p.p2[0] + startx) / 2, (p.p2[1] + starty) / 2]; ctx.bezierCurveTo(p.p2[0], p.p2[1], c3[0], c3[1], startx, starty); ctx.stroke(); ; </script>
以上是关于Javascript实现的智能消防栓状态监测画面的主要内容,如果未能解决你的问题,请参考以下文章