|
实现理由是公司项目要求在网页上增加对病人呼吸、体温、脉搏等数据进行监控，通过网页的三测单类似，本来打算用echarts，但是考虑echarts的封装效果之后，还是选择Zrendjs；
一、封装Zrendjs
import * as zrender from "zrender";
//线段
export const createLine = (x1,y1,x2,y2,style)=>{
return new zrender.Line({
shape:{
x1:x1,
y1:y1,
x2:x2,
y2:y2
},
style:style,
});
};
// cx 横坐标 cy纵坐标 r半径 空心圆
export const createCircle = (cx,cy,r,style)=>{
return new zrender.Circle({
shape:{
cx:cx,
cy:cy,
r:r
},
style:style,
zlevel:4
})
}
//添加horver事件 el 元素对象 config 一些配置项 x x轴坐标 y y轴坐标 shapeOn鼠标移入一些属性配置 shapeOn鼠标移出一些属性配置 shape配置项看官网
export const addHover = (el,config,x,y,shapeOn,shapeOut) => {
const domTips = document.getElementsByClassName("tips")
el.on('mouseover',function(){
domTips[0].innerHTML = config.tips
domTips[0].setAttribute("style",`position:absolute;top:${y-13}px;left:${x}px;display:block;font-size:20px;background-color:rgba(0,0,0,.7);padding:3px;border-radius:3px;color:#fff`)
el.animateTo({
shape:shapeOn
},100,0)
}).on('mouseout',function () {
domTips[0].setAttribute("style",`display:none`)
el.animateTo({
shape:shapeOut
},100,0)
})
}
//添加click事件 el 元素对象 config 一些配置项 x x轴坐标 y y轴坐标 shapeOn鼠标移入一些属性配置 shapeOn鼠标移出一些属性配置 shape配置项看官网
export const addClick = (el,jsonparam) => {
el.on('dblclick',function(){
console.log("jsonparam==",jsonparam)
pb.host.$uf_call_pb(jsonparam);
})
}
//多边形
export const createPolygon = (points,style) => {
return new zrender.Polyline({
shape:{
points:points,
},
style:style
})
}
二、组件中引用
import * as zrendjs from '../../utils/render'
三、根据X/Y轴编写三测单线板
Yline() {
//横坐标 最底部横坐标
let Xline = new zrender.Line({
shape:{
x1:0,
y1:this.canavsHeight,
x2:this.canavsWidth,
y2:this.canavsHeight
}
})
this.zr.add(Xline)
const yWidth = this.canavsWidth/this.xLineLen.day
//循环显示竖线格子 红色竖线
for (let i = 0; i < this.xLineLen.day; i++) {
//纵坐标
let Yline = new zrender.Line({
shape:{
x1:yWidth*i,
y1:0,
x2:yWidth*i,
y2:this.canavsHeight
},
style:{
opacity:1,
lineWidth:1,
stroke:"#7c7c7c"
}
})
this.zr.add(Yline)
}
let yLinAll = this.xLineLen.day*this.xLineLen.time
for (let i = 0; i < yLinAll; i++) {
let Yline = new zrender.Line({
shape:{
x1:yWidth/this.xLineLen.time*i,
y1:0,
x2:yWidth/this.xLineLen.time*i,
y2:this.canavsHeight
},
style:{
opacity:1,
lineWidth:0.5,
stroke:"#7c7c7c"
}
})
this.zr.add(Yline)
}
},
Xline(){
let xHeight = this.canavsHeight/this.yLineLen.XRegion
let XShareAll = this.yLineLen.XRegion*this.yLineLen.XShare
for (let i = 0; i < this.yLineLen.XRegion; i++) {
let color = "#7c7c7c"
this.yLineLen.XLineArr.forEach(el => {
if (el == i) {
color = "#7c7c7c"
}
});
//横坐标 加粗
let Xline = new zrender.Line({
shape:{
x1:0,
y1:xHeight*i,
x2:this.canavsWidth,
y2:xHeight*i
},
style:{
opacity:1,
lineWidth:2,
stroke:color
}
})
this.zr.add(Xline)
for (let a = 0; a < XShareAll; a++) {
//横坐标
let Xline = new zrender.Line({
shape:{
x1:0,
y1:xHeight/this.yLineLen.XShare*a,
x2:this.canavsWidth,
y2:xHeight/this.yLineLen.XShare*a
},
style:{
opacity:1,
lineWidth:0.4,
stroke:"#7c7c7c"
}
})
this.zr.add(Xline)
}
}
},
四、画呼吸、体温、脉搏线条
//画体温折线线条
zrLinetw(){
let twlist=this.tMsitemList.tw;
let twdwidth= this.$refs.init.offsetWidth;
//循环点
for (let i = 0; i < twlist.length; i++) {
let y1 = twlist[i].nscxx04;
let y = (40 - y1) * 43 + 43;
let start = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end = twlist[i].dscxx01;
let time=this.dateLocalFormat1(new Date(twlist[i].dscxx01));
let xday = this.gettimefornum(start, end);
console.log("xday=====",xday)
let x = (xday * twdwidth) ;
var div = document.createElement("div")
div.classList.add("tips")
document.getElementById("main").append(div)
let Circle = zrendjs.createCircle(x, y, 5, {
text: 'X',
fill: "blue",
stroke: "blue",
textVerticalAlign: "middle",
textAlign: "center",
});
this.zr.add(Circle);
zrendjs.addHover(Circle, {
tips: time + ' 体温' + y1 + '℃',
}, x, y, {
r: 8,
}, {
r: 5,
});
zrendjs.addClick(Circle,jsonparam);
}
//循环线条
for (let i = 0; i < twlist.length - 1; i++) {
let y1 = twlist[i].nscxx04;
let y = (40 - y1) * 43 + 43;
let start = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end = twlist[i].dscxx01;
let xday = this.gettimefornum(start, end);
let x = (xday * twdwidth);
let y2 = twlist[i + 1].nscxx04;
let yy = (40 - y2) * 43 + 43;
let start1 = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end1 = twlist[i + 1].dscxx01;
let xday1 = this.gettimefornum(start1, end1);
let x1 = (xday1 * twdwidth);
let line = zrendjs.createLine(x, y, x1, yy, {
stroke: 'blue',
lineWidth: 2,
});
this.zr.add(line);
}
},
//画呼吸折线线条
zrLinehx(){
let hxist=this.tMsitemList.hxz;
let twdwidth= this.$refs.init.offsetWidth;
//循环点
for (let i = 0; i < hxist.length; i++) {
let y1 = hxist[i].sscxx06;
let y = (6 - (y1*0.1)) * 43 + 43;
let start = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end = hxist[i].dscxx01;
let time=this.dateLocalFormat1(new Date(hxist[i].dscxx01));
let xday = this.gettimefornum(start, end);
let x = (xday * twdwidth);
var div = document.createElement("div")
div.classList.add("tips")
document.getElementById("main").append(div)
let Circle = zrendjs.createCircle(x, y, 5, {
text: 'X',
fill: "#FF8A48",
stroke: "#FF8A48",
textAlign: "center",
});
this.zr.add(Circle);
zrendjs.addHover(Circle, {
tips: time + ' 呼吸' + y1 + '次',
}, x, y, {
r: 8,
}, {
r: 5,
});
zrendjs.addClick(Circle,jsonparam);
}
//循环线条
for (let i = 0; i < hxist.length - 1; i++) {
let y1 = hxist[i].sscxx06;
let y = (6 - (y1*0.1)) * 43 + 43;
let start = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end = hxist[i].dscxx01;
let xday = this.gettimefornum(start, end);
let x = (xday * twdwidth);
let y2 = hxist[i + 1].sscxx06;
let yy = (6 - (y2*0.1)) * 43 + 43;
let start1 = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end1 = hxist[i + 1].dscxx01;
let xday1 = this.gettimefornum(start1, end1);
let x1 = (xday1 * twdwidth);
let line = zrendjs.createLine(x, y, x1, yy, {
stroke: '#FF8A48',
lineWidth: 2,
});
this.zr.add(line);
}
},
//画脉搏折线线条
zrLinemb(){
let twdwidth= this.$refs.init.offsetWidth;
let mbist=this.tMsitemList.mb;
//循环点
for (let i = 0; i < mbist.length; i++) {
let y1 = mbist[i].nscxx05;
let y = (7.5 - (y1*0.05)) * 43 + 43;
let start = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end = mbist[i].dscxx01;
let time=this.dateLocalFormat1(new Date(mbist[i].dscxx01));
let xday = this.gettimefornum(start, end);
let x = (xday * twdwidth);
var div = document.createElement("div")
div.classList.add("tips")
document.getElementById("main").append(div)
let Circle = zrendjs.createCircle(x, y, 5, {
text: 'X',
fill: "red",
stroke: "red",
textAlign: "center",
});
this.zr.add(Circle);
zrendjs.addHover(Circle, {
tips: time + ' 脉搏' + y1 + '次',
}, x, y, {
r: 8,
}, {
r: 5,
});
zrendjs.addClick(Circle,jsonparam);
}
//循环线条
for (let i = 0; i < mbist.length - 1; i++) {
let y1 = mbist[i].nscxx05;
let y = (7.5 - (y1*0.05)) * 43 + 43;
let start = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end = mbist[i].dscxx01;
let xday = this.gettimefornum(start, end);
let x = (xday * twdwidth);
let y2 = mbist[i + 1].nscxx05;
let yy = (7.5 - (y2*0.05)) * 43 + 43;
let start1 = this.initDateTime(0).substring(0, 10)+' 00:00:00';
let end1 = mbist[i + 1].dscxx01;
let xday1 = this.gettimefornum(start1, end1);
let x1 = (xday1 * twdwidth);
let line = zrendjs.createLine(x, y, x1, yy, {
stroke: 'red',
lineWidth: 2,
});
this.zr.add(line);
}
},
|