<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<style>
@font-face {
font-family: 'Neon Tubes 2';
src: url('https://pulsoid-magi.nyc3.cdn.digitaloceanspaces.com/widget-source/fonts/NeonTubes2.otf')
}
:root {
--aie546b: #0090ffff;
--a45ugyb: #ff2727ff;
}
.asery7b {
animation: a3aaqnfb 4000ms ease-in infinite;
}
@-webkit-keyframes a3aaqnfb {
0%,
9% {
fill: white;
opacity: 1;
}
10%,
12% {
fill: var(--a45ugyb);
opacity: 0.3;
}
11%,
13% {
fill: white;
opacity: 1;
}
100% {
fill: white
}
}
.aqyspphb {
top: 140px;
left: 90px;
position: absolute;
filter:
drop-shadow(0 0 4px #FFF) drop-shadow(-1px -1px 3px var(--a45ugyb)) drop-shadow(-3px 0 8px var(--a45ugyb)) drop-shadow(0 0 15px var(--a45ugyb));
}
#heart {
top: 90px;
left: 140px;
z-index: 75px;
position: absolute;
color: rgb(194, 122, 122);
font-size: 45px;
font-family: "Neon Tubes 2";
text-shadow: 0 0 4px rgb(240, 136, 136), -12px -8px 10px var(--aie546b), 9px 10px 10px var(--aie546b), -1px -1px 5px var(--aie546b), 0 0 20px var(--aie546b), 0 0 40px var(--aie546b), 0 0 80px var(--aie546b), 0 0 28px #FFF, 0 0 8px #FFF;
}
#main {
height: 250px;
width: 280px;
top: 0px;
}
</style>
</head>
<body>
<div id="app">
<div id="main"></svg>
<p id="heart" v-text="heartnum">123</p>
</div>
<svg class="aqyspphb" width="50px" viewBox="0 0 320 250">
<g transform="translate(0,300) scale(0.05,-0.05)" stroke="none">
<path class="asery7b"
d="M1870 4966 c-870 -115 -1341 -1224 -802 -1888 425 -523 1404 -1674 1578 -1854 252 -263 465 -268 708 -18 90 92 881 1022 1066 1253 39 48 176 214 306 369 279 334 341 436 394 643 300 1174 -1093 1988 -1995 1166 -46 -42 -103 -77 -125 -77 -22 0 -79 35 -125 77 -298 271 -628 379 -1005 329z m374 -268 c159 -34 291 -104 442 -235 134 -117 270 -177 351 -156 18 5 57 15 87 21 30 7 116 67 190 133 625 556 1586 143 1586 -681 0 -364 -18 -390 -1367 -1978 -485 -571 -504 -584 -655 -448 -75 68 -554 615 -758 866 -49 61 -94 115 -100 120 -6 6 -51 60 -100 120 -49 61 -212 254 -361 430 -332 391 -370 446 -420 607 -212 685 399 1349 1105 1201z">
</path>
</g>
</svg>
<p id="heart" v-text="heartnum">123</p>
<!-- 卡片视图区域 -->
<div ref="seller" style="height: 0; width: 0; background: rgb(255, 255, 255)" id="msg"></div>
</div>
<div>
</body>
<!-- import Vue before Element -->
<script>
var app = new Vue({
el: "#app",
data: {
xAxisList: [],
yAxisList: [],
heartnum: 0,
},
mounted() {
this.initWebSocket();
this.initChart();
this.updateChart();
},
methods: {
// 初始化图表对象
initChart() {
this.chart = echarts.init(document.getElementById("main"));
},
// 更新图表
updateChart() {
const option = {
visualMap: [//颜色渐变
{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 70,
max: 120
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
xAxis: {
type: "category",
data: this.xAxisList,
},
yAxis: {
type: "value"
},
series: [
{
type: 'line',
showSymbol: true,
data: this.yAxisList
},
{
type: 'line',
showSymbol: false,
data: [120]
}
],
};
this.chart.setOption(option);
},
initWebSocket() {
//初始化websocket
let wsuri = "ws://ramiel.pulsoid.net/listen/726fc089-3bab-4a3b-998d-efaac7ad2349";
this.ws = new WebSocket(wsuri);
this.ws.onmessage = this.websocketonmessage;
this.ws.onopen = this.websocketonopen;
this.ws.onerror = this.websocketonerror;
this.ws.onclose = this.websocketclose;
this.yAxisList = [];
this.yAxisList = [];
},
websocketonopen() {
console.log("连接 websocket 成功");
// 连接成功后发送消息给服务,避免服务收不到消息导致阻塞
this.ws.send("test");
},
websocketonmessage(e) {
//获取websocket推送的数据
let msg = eval("(" + e.data + ")");
console.log(msg);
if (this.yAxisList.length >= 20) {
this.yAxisList.shift();
this.yAxisList.push(msg.data.heartRate);
this.xAxisList.shift();
this.xAxisList.push(this.getdate(msg.timestamp));
} else {
this.yAxisList.push(msg.data.heartRate);
this.xAxisList.push(this.getdate(msg.timestamp));
}
this.updateChart();
this.heartnum = msg.data.heartRate;
// 每次接收到数据后发送消息给服务,避免服务收不到消息导致阻塞
this.ws.send("test");
// 判断不存在图表元素则断开连接
if (!document.getElementById("msg")) {
this.websocketautoclose();
alert("服务已断开,请保持在图表页面");
}
},
// 连接失败时重新连接
websocketonerror() {
this.initWebSocket();
},
// 断开连接后报错
websocketclose(e) {
console.log("断开连接", e);
//this.initWebSocket() //断开后重新连接
},
// 主动断开连接
websocketautoclose() {
this.ws.close();
},
getdate() {
var now = new Date(),
// y = now.getFullYear(),
m = now.getMonth() + 1,
d = now.getDate();
return (
// y +
// "-" +
(m < 10 ? "0" + m : m) +
"-" +
(d < 10 ? "0" + d : d) +
" " +
now.toTimeString().substr(0, 8)
);
},
},
});
</script>
</html>
最后修改:2022 年 11 月 24 日
© 允许规范转载