384 lines
8.5 KiB
Vue
384 lines
8.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="">
|
||
<view class="dxxl">
|
||
<!-- <view class="">
|
||
窦性心律
|
||
</view> -->
|
||
<scroll-view class="myScoll" scroll-x :show-scrollbar="true">
|
||
<view class="box1">
|
||
<canvas canvas-id="ecg" style="width: 3000px; height: 300px;"></canvas>
|
||
</view>
|
||
<view class="box2" :style="{'left': pLeft + 'px'}">
|
||
<canvas canvas-id="myCanvas" style="width: 3000px; height: 300px;"></canvas>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="flx flx_ac ">
|
||
<view class="" style="margin-top: 10rpx;margin-right: 10rpx;">
|
||
<image src="../../static/icon/xinlv-small.png" style="width: 40rpx;" mode="widthFix"></image>
|
||
</view>
|
||
<view class="" style="color: red;">
|
||
心率
|
||
</view>
|
||
</view>
|
||
<view class="flx flx_sb sl_box flx_wp">
|
||
<view class="all" v-for="(item,index) in xinlv.jisuan">
|
||
<view class="">
|
||
<span class="sl_box_wz">{{item.times?item.times:0}}</span>
|
||
<span class="sl_box_unit">{{item.unit}}</span>
|
||
</view>
|
||
<view class="sl_box_desc">
|
||
{{item.desc}}
|
||
</view>
|
||
<view class="sl_box_cankao" v-if="item.cankao">
|
||
{{item.cankao}}
|
||
</view>
|
||
</view>
|
||
<view class="all" v-for="(item,index) in xinlv.cankao">
|
||
<view class="">
|
||
<span class="sl_box_wz">{{item.times.toFixed(2)}}</span>
|
||
<span class="sl_box_unit">{{item.unit}}</span>
|
||
</view>
|
||
<view class="sl_box_desc">
|
||
{{item.desc}}
|
||
</view>
|
||
<view class="sl_box_cankao" v-if="item.cankao">
|
||
{{item.cankao}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="flx flx_ac ">
|
||
<view class="" style="margin-top: 10rpx;margin-right: 10rpx;">
|
||
<image src="../../static/icon/xinlv-small.png" style="width: 40rpx;" mode="widthFix"></image>
|
||
</view>
|
||
<view class="" style="color: red;">
|
||
心率变异性
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<xdt :datas="ybx.hrv"></xdt>
|
||
<!-- <xdt :datas="ybx.sdnn"></xdt>
|
||
<xdt :datas="ybx.rmssd"></xdt> -->
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="flx flx_ac ">
|
||
<view class="" style="margin-top: 10rpx;margin-right: 10rpx;">
|
||
<image src="../../static/icon/xinlv-small.png" style="width: 40rpx;" mode="widthFix"></image>
|
||
</view>
|
||
<view class="" style="color: red;">
|
||
心电图
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<!-- <xdt :datas="xdt.pwv"></xdt> -->
|
||
<xdt :datas="xdt.qtc"></xdt>
|
||
<!-- <xdt :datas="xdt.qsrf"></xdt>
|
||
<xdt :datas="xdt.qsrx"></xdt>
|
||
<xdt :datas="xdt.qsrfx"></xdt>
|
||
<xdt :datas="xdt.st"></xdt> -->
|
||
</view>
|
||
</view>
|
||
<view class="" style="height: 20rpx;">
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
list:[],
|
||
height: 300,
|
||
width: 3000,
|
||
centerY: 200,
|
||
pLeft:'0',
|
||
dataInfo:{},
|
||
xinlv:{
|
||
jisuan:[
|
||
{
|
||
times:0,
|
||
unit:'次/分',
|
||
desc:'平均心率',
|
||
cankao:''
|
||
},
|
||
{
|
||
times:0,
|
||
unit:'次/分',
|
||
desc:'最高心率',
|
||
cankao:''
|
||
},
|
||
{
|
||
times:0,
|
||
unit:'次/分',
|
||
desc:'最低心率',
|
||
cankao:''
|
||
}
|
||
],
|
||
cankao:[
|
||
{
|
||
times:0,
|
||
unit:'%',
|
||
desc:'正常',
|
||
cankao:'(60~100次/分)'
|
||
},
|
||
{
|
||
times:0,
|
||
unit:'%',
|
||
desc:'心率偏快',
|
||
cankao:'>100次/分)'
|
||
},
|
||
{
|
||
times:0,
|
||
unit:'%',
|
||
desc:'心率偏慢',
|
||
cankao:'(<60次/分)'
|
||
},
|
||
|
||
],
|
||
},
|
||
// 心率异变性
|
||
ybx:{
|
||
hrv:{
|
||
name:'HRV',
|
||
max:210,
|
||
unit:'毫秒',
|
||
min:0,
|
||
val:0
|
||
},
|
||
sdnn:{
|
||
name:'SDNN',
|
||
max:180,
|
||
unit:'毫秒',
|
||
min:102,
|
||
val:0
|
||
},
|
||
rmssd:{
|
||
name:'RMSSD',
|
||
max:39,
|
||
unit:'毫秒',
|
||
min:15,
|
||
val:0
|
||
}
|
||
},
|
||
xdt:{
|
||
pwv:{
|
||
name:'PWV',
|
||
max:15,
|
||
unit:'m/s',
|
||
min:6,
|
||
val:0
|
||
},
|
||
qtc:{
|
||
name:'QTc',
|
||
max:400,
|
||
unit:'毫秒',
|
||
min:260,
|
||
val:0
|
||
},
|
||
qsrf:{
|
||
name:'QRS 波振幅',
|
||
max:1.5,
|
||
unit:'mV',
|
||
min:0.05,
|
||
val:0
|
||
},
|
||
qsrx:{
|
||
name:'QRS 波时限',
|
||
max:120,
|
||
unit:'毫秒',
|
||
min:80,
|
||
val:0
|
||
},
|
||
qsrfx:{
|
||
name:'QRS 主波方向',
|
||
max:0,
|
||
unit:'向上，向下',
|
||
min:0,
|
||
val:'向上'
|
||
},
|
||
st:{
|
||
name:'ST 段振幅',
|
||
max:0.1,
|
||
unit:'mV',
|
||
min:-0.05,
|
||
val:0
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
const dataKey = 'infoData'; // 同上面设置的key
|
||
let get = uni.getStorageSync(dataKey)
|
||
|
||
if(!get){
|
||
uni.showToast({
|
||
title:"读取数据失败"
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack({
|
||
delta:-1
|
||
})
|
||
},2000)
|
||
return
|
||
}
|
||
const data = JSON.parse(get);
|
||
this.dataInfo = data;
|
||
this.changeData(this.dataInfo)
|
||
this.list = this.dataInfo.data_msg.list
|
||
// uni.removeStorageSync(dataKey);
|
||
},
|
||
onReady() {
|
||
this.list = this.list.filter(val => val !== 0)
|
||
const ctx = uni.createCanvasContext('ecg', this);
|
||
ctx.setStrokeStyle('#d5d5d5') //
|
||
ctx.setLineWidth(1) // 线条宽度
|
||
for (var x = 0.5; x < 3000; x += 15) {
|
||
ctx.moveTo(x, 0)
|
||
// 结束点
|
||
ctx.lineTo(x, 3000)
|
||
// 描边，不调用stroke则看不到画的内容
|
||
ctx.stroke()
|
||
}
|
||
for (var y = 0.5; y < 3000; y += 15) {
|
||
ctx.moveTo(0, y)
|
||
// 结束点
|
||
ctx.lineTo(3000, y)
|
||
// 描边，不调用stroke则看不到画的内容
|
||
ctx.stroke()
|
||
}
|
||
// ctx.fill();
|
||
ctx.draw()
|
||
this.drawCurve()
|
||
},
|
||
methods: {
|
||
drawCurve () {
|
||
let ctx = uni.createCanvasContext('myCanvas', this)
|
||
let list = this.list;
|
||
let centerY = this.centerY;
|
||
let width = this.width;
|
||
let xScale = width / (list.length - 1); // 计算每个数据点占据的宽度
|
||
let yScale = centerY / (Math.max(...list) - Math.min(...list))
|
||
// yScale *= 3
|
||
let x = 0;
|
||
let y = centerY / 2 - (list[0] * yScale)
|
||
ctx.beginPath();// 开始绘制
|
||
ctx.moveTo(x, y);
|
||
ctx.setStrokeStyle('#c96d79'); // 设置线条颜色
|
||
ctx.setLineWidth(2); // 设置线条宽度
|
||
for (let i = 1; i < list.length; i++) {
|
||
let x = i * xScale;
|
||
let y = centerY / 2 - ((list[i] / 2) * yScale); // 负数在中心下方，正数在中心上方
|
||
ctx.lineTo(x, y);
|
||
|
||
}
|
||
ctx.stroke()// 绘制线条
|
||
// ctx.fill();
|
||
ctx.draw(false);
|
||
|
||
// 绘制到canvas上，不需要等待上一步绘制完成
|
||
},
|
||
changeData(data){
|
||
let HRV = []
|
||
let QT = []
|
||
let heart = []
|
||
let pwv = []
|
||
let resRate = []
|
||
this.xinlv.jisuan[0].times = data.data_msg.meanHeartRate
|
||
if(data.data_msg.wavefrom == undefined){
|
||
return
|
||
}
|
||
data.data_msg.wavefrom.map((v,i) => {
|
||
if(v.HRV != 0){
|
||
HRV.push(v.HRV)
|
||
}
|
||
if(v.QT != 0){
|
||
QT.push(v.QT)
|
||
}
|
||
if(v.heart != 0){
|
||
heart.push(v.heart)
|
||
}
|
||
if(v.pwv != 0){
|
||
pwv.push(v.pwv)
|
||
}
|
||
if(v.resRate != 0){
|
||
resRate.push(v.resRate)
|
||
}
|
||
})
|
||
this.xinlv.jisuan[1].times = Math.max(...heart)
|
||
this.xinlv.jisuan[2].times = Math.min(...heart)
|
||
// 获取心率每个区间的数据数量
|
||
let heart_zc = heart.filter(value => (value >= 60 && value<= 100)).length;
|
||
let heart_fast = heart.filter(value => value > 100).length;
|
||
let heart_slow = heart.filter(value => value < 60).length;
|
||
let heart_length = heart.length
|
||
this.xinlv.cankao[0].times = (heart_zc / heart_length).toFixed(2) * 100
|
||
this.xinlv.cankao[1].times = (heart_fast / heart_length).toFixed(2) * 100
|
||
this.xinlv.cankao[2].times = (heart_slow / heart_length).toFixed(2) * 100
|
||
this.ybx.hrv.val = data.data_msg.averageHRV
|
||
this.xdt.qtc.val = data.data_msg.averageTimeInterval
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box1 {
|
||
position: absolute;
|
||
left: 0px;
|
||
width: 3000rpx;
|
||
}
|
||
|
||
.box2 {
|
||
position: absolute;
|
||
left: 0px;
|
||
width: 3000rpx;
|
||
}
|
||
|
||
.myScoll {
|
||
width: 100%;
|
||
height: 396rpx;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
}
|
||
.list{
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
padding: 30rpx;
|
||
margin: 30rpx 30rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
.dxxl{
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
padding-top: 40rpx;
|
||
}
|
||
.sl_box{
|
||
text-align: center;
|
||
|
||
.all{
|
||
width: calc(100% / 3);
|
||
margin-top:40rpx;
|
||
}
|
||
.sl_box_cankao,.sl_box_desc{
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
.sl_box_unit{
|
||
font-size: 26rpx;
|
||
}
|
||
.sl_box_wz{
|
||
margin-right: 10rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
</style>
|