347 lines
7.0 KiB
Vue
347 lines
7.0 KiB
Vue
<template>
|
||
<view class="app" v-if="current==0">
|
||
<view class="titletexts">
|
||
<view class="title">
|
||
— 正常范围 —
|
||
</view>
|
||
<view class="add" @click="addSuger">
|
||
＋ 添加数据
|
||
</view>
|
||
<view class="texts">
|
||
<view class="text">
|
||
<view class="p">
|
||
餐前血糖
|
||
</view>
|
||
<view class="ptwo">
|
||
4.4-7.0mmol/L
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
<view class="p">
|
||
餐后/凌晨/睡前/随机
|
||
</view>
|
||
<view class="ptwo">
|
||
4.4-10.0mmol/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>
|
||
<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.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>
|
||
<!-- <qiun-data-charts type="pie" :opts="opts" :chartData="chartData" /> -->
|
||
</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,
|
||
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: 3, //x轴单屏显示数据的数量，默认为5个
|
||
scrollShow: true, //新增是否显示滚动条，默认false
|
||
scrollAlign: 'left', //滚动条初始位置
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: "straight",
|
||
width: 2,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
},
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
// if (this.current == 0) {
|
||
// this.scoket()
|
||
// }
|
||
this.getServerData()
|
||
},
|
||
watch: {
|
||
echartData: {
|
||
handler() {
|
||
this.getServerData()
|
||
},
|
||
deep: true
|
||
},
|
||
},
|
||
methods: {
|
||
taptimeindex(index) {
|
||
this.timeindex = index
|
||
this.$emit('taptimeindex', index);
|
||
},
|
||
addSuger() {
|
||
uni.navigateTo({
|
||
url: "/pagesC/addsugar/addsugar"
|
||
})
|
||
},
|
||
getServerData() {
|
||
if (this.echartData) {
|
||
setTimeout(() => {
|
||
this.echartData.list.forEach(e => {
|
||
e.bucket == '1' ? e.timename = '凌晨' : ''
|
||
e.bucket == '2' ? e.timename = '早餐前' : ''
|
||
e.bucket == '3' ? e.timename = '早晨后' : ''
|
||
e.bucket == '4' ? e.timename = '午餐前' : ''
|
||
e.bucket == '5' ? e.timename = '午餐后' : ''
|
||
e.bucket == '6' ? e.timename = '晚餐前' : ''
|
||
e.bucket == '7' ? e.timename = '晚餐后' : ''
|
||
e.bucket == '8' ? e.timename = '睡前' : ''
|
||
})
|
||
let res = {
|
||
categories: [],
|
||
series: [{
|
||
name: "血糖值",
|
||
data: []
|
||
}]
|
||
}
|
||
res.series[0].data = this.echartData.list.map(e => e.bg)
|
||
res.categories = this.echartData.list.map(e => e.timename + e.measureTime)
|
||
this.datalist = res
|
||
let restwo = {
|
||
series: [{
|
||
data: [{
|
||
"name": "偏低" + this.echartData.calc.lowerNum + "次",
|
||
"value": this.echartData.calc.lowerNum
|
||
}, {
|
||
"name": "正常" + this.echartData.calc.normalNum + "次",
|
||
"value": this.echartData.calc.normalNum
|
||
}, {
|
||
"name": "偏高" + this.echartData.calc.higherNum + "次",
|
||
"value": this.echartData.calc.higherNum
|
||
}]
|
||
}]
|
||
};
|
||
this.datalisttwo = restwo
|
||
}, 500)
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</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;
|
||
|
||
.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: 250rpx;
|
||
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;
|
||
|
||
.text {
|
||
width: 50%;
|
||
|
||
.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>
|