448 lines
9.0 KiB
Vue
448 lines
9.0 KiB
Vue
<template>
|
||
<view class="app" v-if="current == 3">
|
||
<view class="titletexts">
|
||
<view class="title">
|
||
— 正常范围 —
|
||
</view>
|
||
<view class="add" @click="addBMI">
|
||
＋ 添加数据
|
||
</view>
|
||
<view class="texts">
|
||
<view class="text">
|
||
<view class="p">
|
||
过轻
|
||
</view>
|
||
<view class="ptwo" style="color:#FFA115">
|
||
18.5
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
<view class="p">
|
||
正常
|
||
</view>
|
||
<view class="ptwo">
|
||
18.5~23.9
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
<view class="p">
|
||
肥胖
|
||
</view>
|
||
<view class="ptwo">
|
||
≥28
|
||
</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">
|
||
注:全部视图主要展示全部BMI数值的趋势曲线 单位:kg/m^2
|
||
</view>
|
||
<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="datalist" />
|
||
</view>
|
||
<view class="bottomtexts">
|
||
<view class="lefttext">
|
||
<view class="pone">
|
||
平均
|
||
</view>
|
||
<view class="ptwo">
|
||
{{echartData.calc.avgVal?echartData.calc.avgVal:'暂无'}}
|
||
</view>
|
||
</view>
|
||
<view class="lefttext">
|
||
<view class="pone">
|
||
最大
|
||
</view>
|
||
<view class="ptwo">
|
||
{{echartData.calc.maxVal?echartData.calc.maxVal:'暂无'}}
|
||
</view>
|
||
</view>
|
||
<view class="righttext">
|
||
<view class="pone">
|
||
最小
|
||
</view>
|
||
<view class="ptwo">
|
||
{{echartData.calc.minVal?echartData.calc.minVal:'暂无'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="charts-box">
|
||
<qiun-data-charts type="pie" :opts="pie_opts" :chartData="datalisttwo" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
current: {
|
||
type: Number,
|
||
require: true
|
||
},
|
||
echartData: {
|
||
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,
|
||
datalisttwo: 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 ==3) {
|
||
// 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 != 3) {
|
||
clearInterval(this.timer);
|
||
if (this.socketOpen == true) {
|
||
uni.closeSocket();
|
||
}
|
||
} else {
|
||
setTimeout(() => {
|
||
this.scoket()
|
||
}, 800)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
taptimeindex(index) {
|
||
this.timeindex = index
|
||
this.$emit('taptimeindex', index);
|
||
},
|
||
addBMI() {
|
||
uni.navigateTo({
|
||
url: "/pagesC/addBMI/addBMI"
|
||
})
|
||
},
|
||
getServerData() {
|
||
if (this.echartData) {
|
||
setTimeout(() => {
|
||
let res = {
|
||
categories: [],
|
||
series: [{
|
||
name: "BMI",
|
||
data: []
|
||
}, ]
|
||
};
|
||
res.series[0].data = this.echartData.list.map(e => e.bmi)
|
||
res.categories = this.echartData.list.map(e => e.measureTime)
|
||
this.datalist = res
|
||
let restwo = {
|
||
series: [{
|
||
data: [{
|
||
"name": "正常" + this.echartData.calc.normalNum + "次",
|
||
"value": this.echartData.calc.normalNum
|
||
}, {
|
||
"name": "超标" + this.echartData.calc.overNum + "次",
|
||
"value": this.echartData.calc.overNum
|
||
}]
|
||
}]
|
||
};
|
||
this.datalisttwo = restwo
|
||
}, 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: 60rpx;
|
||
|
||
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
||
.charts-box {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.bottomtexts {
|
||
width: 100%;
|
||
display: flex;
|
||
background-color: #fff;
|
||
padding: 20rpx 0 40rpx;
|
||
|
||
.lefttext,
|
||
.righttext {
|
||
width: 50%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.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: 300rpx;
|
||
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: 33%;
|
||
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> |