看看心通过华为手环连接到事实心率在线查看

2022 年 04 月 22 日

574 次浏览

6522字数

<!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>

看看心通过华为手环连接到事实心率在线查看