360
This commit is contained in:
shidongli
parent
b633603389
commit
e1f691ff1e
@ -1,6 +1,51 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="app">
|
<view class="app">
|
||||||
功能开发中
|
<!-- 功能开发中 -->
|
||||||
|
<view class="top">
|
||||||
|
<u-tabs ref="tabs" :scrollable="false" :list="tabslist" bar-height="6" bar-width="60" active-color="#fff"
|
||||||
|
inactive-color="#A09F9F" :active-item-style="activebgk" :is-scroll="false" :current="tabscurrent"
|
||||||
|
gutter="50" @change="tabschange"></u-tabs>
|
||||||
|
</view>
|
||||||
|
<!-- 健康指数 -->
|
||||||
|
<view class="health">
|
||||||
|
<view class="health_top">
|
||||||
|
<view class="right">
|
||||||
|
1
|
||||||
|
</view>
|
||||||
|
<image :src="require('../images/red.png')" image>
|
||||||
|
<view class="count">
|
||||||
|
<view class="numbers">680</view>
|
||||||
|
<view class="healths">健康指数</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="health_body">
|
||||||
|
<view class="healthitem">
|
||||||
|
血压（mmHg)：收缩压/舒张压
|
||||||
|
</view>
|
||||||
|
<view class="healthitem">
|
||||||
|
空腹血糖（mmol/L)：5.6
|
||||||
|
</view>
|
||||||
|
<view class="healthitem">
|
||||||
|
血脂（TC/LDL-C)：5.6
|
||||||
|
</view>
|
||||||
|
<view class="healthitem">
|
||||||
|
体质指数（BMI)：5.6
|
||||||
|
</view>
|
||||||
|
<view class="healthitem">
|
||||||
|
腰围（cm）：5.6
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 折线图 -->
|
||||||
|
<view class="zx">
|
||||||
|
<qiun-data-charts type="line" loadingType="0" :opts="line_opts" :ontouch="true" :chartData="chartData" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 疾病预警 -->
|
||||||
|
<view class="disease">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -8,9 +53,164 @@
|
|||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
chartData: {},
|
||||||
|
opts: {
|
||||||
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
||||||
|
padding: [15,10,0,15],
|
||||||
|
enableScroll: false,
|
||||||
|
legend: {},
|
||||||
|
xAxis: {
|
||||||
|
disableGrid: true
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
gridType: "dash",
|
||||||
|
dashLength: 2
|
||||||
|
},
|
||||||
|
extra: {
|
||||||
|
line: {
|
||||||
|
type: "straight",
|
||||||
|
width: 2,
|
||||||
|
activeType: "hollow"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tabscurrent: 0,
|
||||||
|
tabslist: [{
|
||||||
|
name: '健康指数',
|
||||||
|
orderStatus: '',
|
||||||
|
}, {
|
||||||
|
name: '疾病预警',
|
||||||
|
orderStatus: 'WAIT_PAY',
|
||||||
|
}, {
|
||||||
|
name: '健康处方',
|
||||||
|
orderStatus: 'WAIT_RECEIVED_GOODS',
|
||||||
|
}],
|
||||||
|
activebgk: {
|
||||||
|
background: "#00B4CC"
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
backgroundColor: '#26A888',
|
||||||
|
},
|
||||||
|
datalist: null,
|
||||||
|
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
|
onReady() {
|
||||||
|
this.getServerData();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// if (this.current == 0) {
|
||||||
|
// this.scoket()
|
||||||
|
// }
|
||||||
|
// this.getServerData()
|
||||||
|
},
|
||||||
|
// watch: {
|
||||||
|
// echartData: {
|
||||||
|
// handler() {
|
||||||
|
// this.getServerData()
|
||||||
|
// },
|
||||||
|
// deep: true
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
methods: {
|
||||||
|
getServerData() {
|
||||||
|
//模拟从服务器获取数据时的延时
|
||||||
|
setTimeout(() => {
|
||||||
|
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||||||
|
let res = {
|
||||||
|
categories: ["2018","2019","2020","2021","2022","2023"],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "成交量A",
|
||||||
|
data: [35,8,25,37,4,20]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "成交量B",
|
||||||
|
data: [70,40,65,100,44,68]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "成交量C",
|
||||||
|
data: [100,80,95,150,112,132]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chartData = JSON.parse(JSON.stringify(res));
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
|
||||||
|
getServerData1() {
|
||||||
|
if (this.echartData) {
|
||||||
|
setTimeout(() => {
|
||||||
|
// 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)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//点击tabs
|
||||||
|
tabschange(index) {
|
||||||
|
this.tabscurrent = index;
|
||||||
|
// this.orderTypeList.orderStatus = this.tabslist[index].orderStatus
|
||||||
|
// this.goodsOrderinfo();
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -18,8 +218,98 @@
|
|||||||
.app {
|
.app {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 100rpx 40rpx;
|
// padding: 100rpx 40rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 100rpx;
|
||||||
|
|
||||||
|
::v-deep .u-tabs {
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .u-tabs-scroll-flex {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .u-tabs__wrapper__nav__item {
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 健康
|
||||||
|
.health {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
// background: red;
|
||||||
|
.health_top {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
// height: 100%;
|
||||||
|
// background: #FBDA81;
|
||||||
|
.right {
|
||||||
|
position: relative;
|
||||||
|
font-size: 20rpx;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: red;
|
||||||
|
top: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
left: 471rpx;
|
||||||
|
// left: 288rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 230rpx;
|
||||||
|
height: 230rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
position: relative;
|
||||||
|
top: -158rpx;
|
||||||
|
|
||||||
|
.numbers {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 25rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.healths {
|
||||||
|
font-size: 22rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.health_body {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.healthitem {
|
||||||
|
text-align: left;
|
||||||
|
padding: 0 0 40rpx 62rpx;
|
||||||
|
|
||||||
|
// padding-bottom: 40rpx;
|
||||||
|
// position: relative;
|
||||||
|
// left: -53rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.zx{
|
||||||
|
width: 100%;
|
||||||
|
height: 300rpx;
|
||||||
|
// background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.disease{
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user