438 lines
9.3 KiB
Vue
438 lines
9.3 KiB
Vue
<template>
|
||
<view class="app" v-if="current == 2">
|
||
<view class="titletexts">
|
||
<view class="title">
|
||
— 正常范围 —
|
||
</view>
|
||
<!-- <view class="add" @click="addBloodFat">
|
||
＋ 添加数据
|
||
</view> -->
|
||
<view class="texts">
|
||
<view class="text">
|
||
<view class="p">
|
||
血清总胆固醇
|
||
</view>
|
||
<view class="ptwo">
|
||
3.0-5.7mmol/L
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
<view class="p">
|
||
甘油三酯
|
||
</view>
|
||
<view class="ptwo">
|
||
0.5-1.7mmol/L
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
<view class="p">
|
||
高密度脂蛋白胆固醇
|
||
</view>
|
||
<view class="ptwo">
|
||
0.9-1.8mmol/L
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
<view class="p">
|
||
低密度脂蛋白胆固醇
|
||
</view>
|
||
<view class="ptwo">
|
||
2.1-3.1mmol/L
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottomlist">
|
||
<view class="timelist">
|
||
<view class="item" v-for="(item,index) in timelist" :class="timeindex == index?'timeitem':''"
|
||
@tap='taptimeindex(index)'>
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
注:全部视图主要展示全部血脂数值的趋势曲线 单位:mmol/L
|
||
</view>
|
||
</view>
|
||
<view class="charts-box">
|
||
<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="datalist" />
|
||
</view>
|
||
<uni-table border stripe emptyText="暂无更多数据">
|
||
<uni-tr>
|
||
<uni-th align="center" width='70'>记录时间</uni-th>
|
||
<uni-th align="center" width='70'>血清总胆固醇</uni-th>
|
||
<uni-th align="center" width='70'>甘油三酯</uni-th>
|
||
<uni-th align="center" width='70'>高密度脂蛋白胆固醇</uni-th>
|
||
<uni-th align="center" width='70'>低密度脂蛋白胆固醇</uni-th>
|
||
</uni-tr>
|
||
<uni-tr v-for="item in tablelist">
|
||
<uni-td width='70' align="center">{{item.measureTime}}</uni-td>
|
||
<uni-td width='70' align="center">{{item.tc}}</uni-td>
|
||
<uni-td width='70' align="center">{{item.tg}}</uni-td>
|
||
<uni-td width='70' align="center">{{item.hdl}}</uni-td>
|
||
<uni-td width='70' align="center">{{item.ldl}}</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
current: {
|
||
type: Number,
|
||
require: true
|
||
},
|
||
echartData: {
|
||
type: Object,
|
||
require: true
|
||
},
|
||
tablelist: {
|
||
type: Object,
|
||
require: true
|
||
}
|
||
},
|
||
computed: {},
|
||
data() {
|
||
return {
|
||
timelist: [{
|
||
name: '全部',
|
||
id: 0
|
||
},
|
||
{
|
||
name: '周',
|
||
id: 1
|
||
}, {
|
||
name: '月',
|
||
id: 2
|
||
}, {
|
||
name: '年',
|
||
id: 3
|
||
},
|
||
],
|
||
timeindex: 0,
|
||
socketOpen: false,
|
||
timer: null,
|
||
datalist: null,
|
||
pie_opts: {
|
||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
"#ea7ccc"
|
||
],
|
||
padding: [5, 5, 5, 5],
|
||
enableScroll: false,
|
||
extra: {
|
||
pie: {
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: false,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
},
|
||
},
|
||
},
|
||
line_opts: {
|
||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
"#ea7ccc"
|
||
],
|
||
dataLabel: true,
|
||
enableScroll: true,
|
||
touchMoveLimit: 24,
|
||
padding: [15, 10, 0, 15],
|
||
xAxis: {
|
||
lineHeight: 40,
|
||
disableGrid: true,
|
||
boundaryGap: "center",
|
||
fontSize: 10,
|
||
type: 'grid',
|
||
gridType: 'dash',
|
||
itemCount: 4, //x轴单屏显示数据的数量，默认为5个
|
||
scrollShow: true, //新增是否显示滚动条，默认false
|
||
scrollAlign: 'left', //滚动条初始位置
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2
|
||
},
|
||
legend: {
|
||
show: true,
|
||
position: "top",
|
||
lineHeight: 25
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: "straight",
|
||
width: 2,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
},
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
// if (this.current ==2) {
|
||
// this.scoket()
|
||
// }
|
||
this.getServerData()
|
||
},
|
||
destroyed() {
|
||
clearInterval(this.timer);
|
||
// if (this.socketOpen == true) {
|
||
// uni.closeSocket();
|
||
// }
|
||
},
|
||
watch: {
|
||
echartData: {
|
||
handler() {
|
||
this.getServerData()
|
||
},
|
||
deep: true
|
||
},
|
||
current(newValue, oldValue) {
|
||
if (newValue != 2) {
|
||
clearInterval(this.timer);
|
||
if (this.socketOpen == true) {
|
||
// uni.closeSocket();
|
||
}
|
||
} else {
|
||
setTimeout(() => {
|
||
// this.scoket()
|
||
}, 800)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
taptimeindex(index) {
|
||
this.timeindex = index
|
||
this.$emit('taptimeindex', index);
|
||
},
|
||
addBloodFat() {
|
||
uni.navigateTo({
|
||
url: "/pagesC/addBloodFat/addBloodFat"
|
||
})
|
||
},
|
||
getServerData() {
|
||
if (this.echartData) {
|
||
setTimeout(() => {
|
||
let res = {
|
||
categories: [],
|
||
series: [{
|
||
name: "血清总胆固醇",
|
||
data: []
|
||
},
|
||
{
|
||
name: "甘油三酯",
|
||
data: []
|
||
}, {
|
||
name: "高密度脂蛋白胆固醇",
|
||
data: []
|
||
}, {
|
||
name: "低密度脂蛋白胆固醇",
|
||
data: []
|
||
}
|
||
]
|
||
};
|
||
res.series[0].data = this.echartData.list.map(e => e.tc)
|
||
res.series[1].data = this.echartData.list.map(e => e.tg)
|
||
res.series[2].data = this.echartData.list.map(e => e.hdl)
|
||
res.series[3].data = this.echartData.list.map(e => e.ldl)
|
||
res.categories = this.echartData.list.map(e => e.measureTime)
|
||
this.datalist = res
|
||
}, 500)
|
||
}
|
||
},
|
||
scoket() {
|
||
var SOCKETURL = 'ws://112.7.50.34:9002/webSocket/' + uni.getStorageSync('userinfo').cardNo
|
||
const that = this
|
||
// uni.closeSocket()
|
||
this.socketOpen = false
|
||
try {
|
||
uni.connectSocket({
|
||
url: SOCKETURL
|
||
})
|
||
uni.onSocketOpen(res => {
|
||
console.log('webScoket连接已打开', res);
|
||
that.socketOpen = true
|
||
that.reset()
|
||
})
|
||
|
||
uni.onSocketError(err => {
|
||
console.log('webScoket连接打开失败', err);
|
||
if (err && err.code != 1000) {
|
||
setTimeout(() => {
|
||
that.socketOpen = true
|
||
uni.connectSocket({
|
||
url: SOCKETURL
|
||
})
|
||
}, 3 * 1000)
|
||
}
|
||
})
|
||
|
||
uni.onSocketClose(err => {
|
||
console.log('webScoket连接关闭', err);
|
||
if (err && err.code !== 1000) {
|
||
setTimeout(() => {
|
||
that.socketOpen = true
|
||
uni.connectSocket({
|
||
url: SOCKETURL
|
||
})
|
||
}, 3 * 1000)
|
||
}
|
||
})
|
||
uni.onSocketMessage(res => {
|
||
console.log("webScoket监听收到的信息", res);
|
||
// that.newsList.push({
|
||
// senderName: that.currentItem.senderName,
|
||
// content: JSON.parse(res.data).message
|
||
// })
|
||
this.$emit('websocket-message');
|
||
this.$forceUpdate()
|
||
})
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
},
|
||
// 心跳响应
|
||
reset() {
|
||
let that = this
|
||
var SOCKETURL = 'ws://112.7.50.34:9002/webSocket/' + uni.getStorageSync('userInfo').cardNo
|
||
clearInterval(that.timer);
|
||
that.timer = setInterval(() => {
|
||
uni.sendSocketMessage({
|
||
data: 'ping',
|
||
success(res) {
|
||
console.log('正在发送心跳');
|
||
},
|
||
fail(err) {
|
||
console.log('心跳发送失败，重新连接...');
|
||
_socketOpen = true
|
||
uni.connectSocket({
|
||
url: SOCKETURL
|
||
})
|
||
}
|
||
})
|
||
}, 60000)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F7F5F5;
|
||
}
|
||
|
||
.app {
|
||
width: 96%;
|
||
margin: 0 auto;
|
||
padding-bottom: 20rpx;
|
||
|
||
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
||
.charts-box {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.bottomlist {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
margin-top: 17rpx;
|
||
padding-bottom: 100rpx;
|
||
|
||
.text {
|
||
width: 90%;
|
||
margin: 20rpx auto 30rpx;
|
||
font-size: 18rpx;
|
||
font-weight: 400;
|
||
color: #595959;
|
||
}
|
||
|
||
.timelist {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
padding-top: 25rpx;
|
||
|
||
.item {
|
||
width: 25%;
|
||
height: 56rpx;
|
||
border-radius: 5rpx 0rpx 0rpx 5rpx;
|
||
text-align: center;
|
||
line-height: 56rpx;
|
||
background: #FFFFFF;
|
||
border: 2rpx solid #26A888;
|
||
border-radius: 0rpx 5rpx 5rpx 0rpx;
|
||
color: #26A888;
|
||
}
|
||
|
||
.timeitem {
|
||
background: #26A888;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.titletexts {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
border-radius: 5rpx;
|
||
position: relative;
|
||
|
||
.texts {
|
||
width: 100%;
|
||
display: flex;
|
||
position: absolute;
|
||
top: 130rpx;
|
||
flex-wrap: wrap;
|
||
|
||
.text {
|
||
width: 50%;
|
||
margin-bottom: 40rpx;
|
||
|
||
.p {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
}
|
||
|
||
.ptwo {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #26A888;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.add {
|
||
width: 205rpx;
|
||
height: 64rpx;
|
||
background: #26A888;
|
||
border-radius: 32rpx 0rpx 0rpx 32rpx;
|
||
line-height: 64rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
right: 0%;
|
||
color: #fff;
|
||
top: 25rpx;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #26A888;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 46rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |