344 lines
7.0 KiB
Vue
344 lines
7.0 KiB
Vue
<template>
|
||
<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" v-if="tabscurrent==0">
|
||
<healthindex></healthindex>
|
||
</view>
|
||
|
||
<!-- 疾病预警 -->
|
||
<view class="disease">
|
||
</view>
|
||
<!-- 健康处方 -->
|
||
<view class="" v-if="tabscurrent==2">
|
||
<Precords></Precords>
|
||
</view>
|
||
<!-- 健康指数弹出层 -->
|
||
<u-popup v-model="showhealth" mode="center" border-radius="14" closeable width="80%" height="550rpx">
|
||
<view class="toppopup">
|
||
<view class="rightpopup">
|
||
1
|
||
</view>
|
||
<view class="numbers">
|
||
680
|
||
</view>
|
||
</view>
|
||
<view class="text">
|
||
说明
|
||
</view>
|
||
<view class="words">
|
||
85分以上为绿色，
|
||
85分以上为绿色，
|
||
85分以上为绿色，85分以上为绿色，
|
||
85分以上为绿色，
|
||
85分以上为绿色，85分以上为绿色，
|
||
85分以上为绿色，
|
||
85分以上为绿色，85分以上为绿色，
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
riskWarning,
|
||
} from '@/api/pagesB/threeHundredAndSixty/threeHundredAndSixty.js'
|
||
import Precords from '../Precords/Precords.vue'
|
||
import Healthindex from '../Healthindex/Healthindex.vue'
|
||
export default {
|
||
components: {
|
||
Precords,
|
||
Healthindex
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
lookopen: false,
|
||
open: false,
|
||
openfeiai: false,
|
||
lookopenck: false,
|
||
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,
|
||
identity: '370522196411282177',
|
||
cvdEvaRecord: {},
|
||
lcdEvaRecord: {},
|
||
ckdEvaRecord: {},
|
||
lucaEvaRecord: {},
|
||
};
|
||
},
|
||
onReady() {
|
||
},
|
||
|
||
methods: {
|
||
goodsOrderinfo() {
|
||
// this.identity=uni.getStorageSync('userinfo').cardNo
|
||
// console.log(this.identity)
|
||
riskWarning(this.identity).then(res => {
|
||
console.log(res)
|
||
this.cvdEvaRecord = res.data.cvdEvaRecord
|
||
this.lucaEvaRecord = res.data.lucaEvaRecord
|
||
this.lcdEvaRecord = res.data.lcdEvaRecord
|
||
this.ckdEvaRecord = res.data.ckdEvaRecord
|
||
})
|
||
},
|
||
// 脑
|
||
diseasecv() {
|
||
this.open = true
|
||
},
|
||
// 心
|
||
diseaselc() {
|
||
this.lookopen = true
|
||
},
|
||
// 肺癌
|
||
diseaselu() {
|
||
this.openfeiai = true
|
||
},
|
||
diseaseck() {
|
||
this.lookopenck = true
|
||
},
|
||
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) {
|
||
console.log(index)
|
||
this.tabscurrent = index;
|
||
if (this.tabscurrent == 1) {
|
||
this.goodsOrderinfo();
|
||
}
|
||
// this.orderTypeList.orderStatus = this.tabslist[index].orderStatus
|
||
},
|
||
|
||
|
||
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
// padding: 100rpx 40rpx;
|
||
text-align: center;
|
||
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;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.disease {}
|
||
|
||
.healths {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.health_body {
|
||
width: 100%;
|
||
|
||
.healthitem {
|
||
text-align: left;
|
||
padding: 0 0 40rpx 62rpx;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.zx {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
// background: red;
|
||
}
|
||
|
||
}
|
||
|
||
.disease {
|
||
width: 100%;
|
||
position: relative;
|
||
background-color: #fff;
|
||
|
||
.btnleftalls {
|
||
display: flex;
|
||
width: 100%;
|
||
}
|
||
|
||
.btnleftall {
|
||
width: 30%;
|
||
}
|
||
|
||
.btnleft {
|
||
margin-top: 27%;
|
||
margin-left: 2%;
|
||
line-height: 100rpx;
|
||
text-align: center;
|
||
height: 100rpx;
|
||
font-size: 22rpx;
|
||
background-color: #F2F2F2;
|
||
}
|
||
|
||
.btnright {
|
||
// position: absolute;
|
||
// left: 5%;
|
||
width: 70%;
|
||
|
||
// height: 100rpx;
|
||
// background-color: yellow;
|
||
image {
|
||
height: 362px;
|
||
// position: absolute;
|
||
display: inline-block;
|
||
// left: 21%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|