修改指标检测
This commit is contained in:
shidongli
parent
e22c1c606c
commit
3f86ff53e5
@ -1,262 +1,283 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="leftheader">
|
||||
<div class="item" v-for="(item, index) in categorylist" :key="item.id" @click="clickcategory(item, index)"
|
||||
:class="index == categoryindex ? 'selectitem' : ''">
|
||||
<div class="name">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightheader">
|
||||
<div class="time">
|
||||
<el-date-picker v-model="measureTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
:clearable="false" value-format="yyyy-MM-dd" :picker-options="pickerOptions" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div id="main"></div>
|
||||
<div class="header">
|
||||
<div class="leftheader">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in categorylist"
|
||||
:key="item.id"
|
||||
@click="clickcategory(item, index)"
|
||||
:class="index == categoryindex ? 'selectitem' : ''"
|
||||
>
|
||||
<div class="name">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightheader">
|
||||
<div class="time">
|
||||
<el-date-picker
|
||||
v-model="measureTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
:clearable="false"
|
||||
value-format="yyyy-MM-dd"
|
||||
:picker-options="pickerOptions"
|
||||
end-placeholder="结束日期"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<div id="main" style="height:50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import {
|
||||
curveStatistics
|
||||
curveStatistics
|
||||
} from '@/api/manage/indicatorMonitoring'
|
||||
export default {
|
||||
name: "indicatorMonitoring",
|
||||
data() {
|
||||
return {
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now(); //禁止选择今天以后的时间
|
||||
},
|
||||
},
|
||||
measureTime: [],
|
||||
//左侧类型选中
|
||||
categoryindex: undefined,
|
||||
//左侧list
|
||||
categorylist: [{
|
||||
id: 1,
|
||||
title: '运动检测',
|
||||
groupCode: 'sport'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '血压测量',
|
||||
groupCode: 'bp'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '血糖测量',
|
||||
groupCode: 'bg'
|
||||
}],
|
||||
query: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.categoryindex = 0
|
||||
this.query.groupCode = this.categorylist[0].groupCode
|
||||
this.query.patientId = this.$route.query.patientId
|
||||
this.query.title = '运动检测'
|
||||
name: "indicatorMonitoring",
|
||||
data() {
|
||||
return {
|
||||
Height:'',
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now(); //禁止选择今天以后的时间
|
||||
},
|
||||
},
|
||||
measureTime: [],
|
||||
//左侧类型选中
|
||||
categoryindex: undefined,
|
||||
//左侧list
|
||||
categorylist: [{
|
||||
id: 1,
|
||||
title: '运动检测',
|
||||
groupCode: 'sport'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '血压测量',
|
||||
groupCode: 'bp'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '血糖测量',
|
||||
groupCode: 'bg'
|
||||
}],
|
||||
query: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.categoryindex = 0
|
||||
this.query.groupCode = this.categorylist[0].groupCode
|
||||
this.query.patientId = this.$route.query.patientId
|
||||
this.query.title = '运动检测'
|
||||
this.getinfo();
|
||||
},
|
||||
watch: {
|
||||
'measureTime': {
|
||||
handler(newValue, oldValue) {
|
||||
this.query.measureTimeStart = newValue[0]
|
||||
this.query.measureTimeEnd = newValue[1]
|
||||
this.getinfo();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
watch: {
|
||||
'measureTime': {
|
||||
handler(newValue, oldValue) {
|
||||
this.query.measureTimeStart = newValue[0]
|
||||
this.query.measureTimeEnd = newValue[1]
|
||||
this.getinfo();
|
||||
},
|
||||
methods: {
|
||||
clickcategory(item, index) {
|
||||
this.categoryindex = index
|
||||
this.query.groupCode = item.groupCode
|
||||
this.query.title = item.title
|
||||
this.query.patientId = this.$route.query.patientId
|
||||
this.getinfo();
|
||||
},
|
||||
getinfo() {
|
||||
curveStatistics(this.query).then(res => {
|
||||
this.info(res.data);
|
||||
})
|
||||
},
|
||||
info(row) {
|
||||
console.log(row, 'row')
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var chartDom = document.getElementById('main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
if (this.query.title == '运动检测') {
|
||||
option = {
|
||||
|
||||
title: {
|
||||
text: this.query.title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: row.xlist
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '运动时长',
|
||||
type: 'line',
|
||||
data: row.ylist.运动时长
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickcategory(item, index) {
|
||||
this.categoryindex = index
|
||||
this.query.groupCode = item.groupCode
|
||||
this.query.title = item.title
|
||||
this.query.patientId = this.$route.query.patientId
|
||||
this.getinfo();
|
||||
},
|
||||
getinfo() {
|
||||
curveStatistics(this.query).then(res => {
|
||||
this.info(res.data);
|
||||
})
|
||||
},
|
||||
info(row) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var chartDom = document.getElementById('main');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
if (this.query.title == '运动检测') {
|
||||
option = {
|
||||
title: {
|
||||
text: this.query.title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: row.xlist
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '运动时长',
|
||||
type: 'line',
|
||||
data: row.ylist.运动时长
|
||||
},
|
||||
{
|
||||
name: '平均心率',
|
||||
type: 'line',
|
||||
data: row.ylist.平均心率
|
||||
}
|
||||
]
|
||||
};
|
||||
} else if (this.query.title == '血压测量') {
|
||||
option = {
|
||||
title: {
|
||||
text: this.query.title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: row.xlist
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '收缩压',
|
||||
type: 'line',
|
||||
data: row.ylist.收缩压
|
||||
},
|
||||
{
|
||||
name: '舒张压',
|
||||
type: 'line',
|
||||
data: row.ylist.舒张压
|
||||
}
|
||||
]
|
||||
};
|
||||
} else if (this.query.title == '血糖测量') {
|
||||
option = {
|
||||
title: {
|
||||
text: this.query.title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: row.xlist
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '空腹血糖',
|
||||
type: 'line',
|
||||
data: row.ylist.收缩压
|
||||
}
|
||||
]
|
||||
};
|
||||
{
|
||||
name: '平均心率',
|
||||
type: 'line',
|
||||
data: row.ylist.平均心率
|
||||
}
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
} else if (this.query.title == '血压测量') {
|
||||
option = {
|
||||
title: {
|
||||
text: this.query.title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: row.xlist
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '收缩压',
|
||||
type: 'line',
|
||||
data: row.ylist.收缩压
|
||||
},
|
||||
{
|
||||
name: '舒张压',
|
||||
type: 'line',
|
||||
data: row.ylist.舒张压
|
||||
}
|
||||
]
|
||||
};
|
||||
} else if (this.query.title == '血糖测量') {
|
||||
option = {
|
||||
title: {
|
||||
text: this.query.title
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: row.xlist
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '空腹血糖',
|
||||
type: 'line',
|
||||
data: row.ylist.收缩压
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
background-color: #fff !important;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
background-color: #fff !important;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
height: calc(100vh - 84px);
|
||||
|
||||
.rightheader {
|
||||
width: 75%;
|
||||
padding-top: 20px;
|
||||
border-left: 3px solid #dfe4ed;
|
||||
position: relative;
|
||||
|
||||
.rightheader {
|
||||
width: 75%;
|
||||
padding-top: 20px;
|
||||
border-left: 3px solid #DFE4ED;
|
||||
position: relative;
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 1000px;
|
||||
height: 450px;
|
||||
margin: 80px auto;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
.leftheader {
|
||||
#main {
|
||||
width: 1000px;
|
||||
height: 450px;
|
||||
margin: 80px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.leftheader {
|
||||
height: calc(100vh - 352px);
|
||||
|
||||
width: 20%;
|
||||
margin-top: 20px;
|
||||
// height: 450px;
|
||||
overflow: auto;
|
||||
// 隐藏表头的滚动条
|
||||
overflow-x: hidden !important;
|
||||
width: 20%;
|
||||
margin-top: 20px;
|
||||
// height: 450px;
|
||||
overflow: auto;
|
||||
// 隐藏表头的滚动条
|
||||
overflow-x: hidden !important;
|
||||
|
||||
.selectitem {
|
||||
background-color: #D2E9FC;
|
||||
border-left: 2px solid #1890ff !important;
|
||||
border-bottom: 1px solid #fff !important;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 25px 10px;
|
||||
position: relative;
|
||||
border-left: 2px solid #fff;
|
||||
border-bottom: 1px solid #E7E7E7;
|
||||
|
||||
.name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.selectitem {
|
||||
background-color: #d2e9fc;
|
||||
border-left: 2px solid #1890ff !important;
|
||||
border-bottom: 1px solid #fff !important;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 25px 10px;
|
||||
position: relative;
|
||||
border-left: 2px solid #fff;
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
|
||||
.name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,14 +7,17 @@
|
||||
src="../../../assets/manage/touxiang.png"
|
||||
alt=""
|
||||
v-if="$route.query.sex == 'MALE'"
|
||||
@click="shiftCollapsiable"
|
||||
/>
|
||||
<img
|
||||
class="headsculpture"
|
||||
src="../../../assets/manage/nvtouxiang.png"
|
||||
alt=""
|
||||
v-if="$route.query.sex == 'FEMALE'"
|
||||
@click="shiftCollapsiable"
|
||||
|
||||
/>
|
||||
<div class="name">
|
||||
<div class="name" @click="shiftCollapsiable">
|
||||
{{ $route.query.patientName }}
|
||||
</div>
|
||||
<div class="gender">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user