修改指标检测
This commit is contained in:
shidongli
parent
e22c1c606c
commit
3f86ff53e5
@ -1,262 +1,283 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="leftheader">
|
<div class="leftheader">
|
||||||
<div class="item" v-for="(item, index) in categorylist" :key="item.id" @click="clickcategory(item, index)"
|
<div
|
||||||
:class="index == categoryindex ? 'selectitem' : ''">
|
class="item"
|
||||||
<div class="name">
|
v-for="(item, index) in categorylist"
|
||||||
{{ item.title }}
|
:key="item.id"
|
||||||
</div>
|
@click="clickcategory(item, index)"
|
||||||
</div>
|
:class="index == categoryindex ? 'selectitem' : ''"
|
||||||
</div>
|
>
|
||||||
<div class="rightheader">
|
<div class="name">
|
||||||
<div class="time">
|
{{ item.title }}
|
||||||
<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>
|
</div>
|
||||||
|
</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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import {
|
import {
|
||||||
curveStatistics
|
curveStatistics
|
||||||
} from '@/api/manage/indicatorMonitoring'
|
} from '@/api/manage/indicatorMonitoring'
|
||||||
export default {
|
export default {
|
||||||
name: "indicatorMonitoring",
|
name: "indicatorMonitoring",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pickerOptions: {
|
Height:'',
|
||||||
disabledDate(time) {
|
pickerOptions: {
|
||||||
return time.getTime() > Date.now(); //禁止选择今天以后的时间
|
disabledDate(time) {
|
||||||
},
|
return time.getTime() > Date.now(); //禁止选择今天以后的时间
|
||||||
},
|
},
|
||||||
measureTime: [],
|
},
|
||||||
//左侧类型选中
|
measureTime: [],
|
||||||
categoryindex: undefined,
|
//左侧类型选中
|
||||||
//左侧list
|
categoryindex: undefined,
|
||||||
categorylist: [{
|
//左侧list
|
||||||
id: 1,
|
categorylist: [{
|
||||||
title: '运动检测',
|
id: 1,
|
||||||
groupCode: 'sport'
|
title: '运动检测',
|
||||||
}, {
|
groupCode: 'sport'
|
||||||
id: 2,
|
}, {
|
||||||
title: '血压测量',
|
id: 2,
|
||||||
groupCode: 'bp'
|
title: '血压测量',
|
||||||
}, {
|
groupCode: 'bp'
|
||||||
id: 3,
|
}, {
|
||||||
title: '血糖测量',
|
id: 3,
|
||||||
groupCode: 'bg'
|
title: '血糖测量',
|
||||||
}],
|
groupCode: 'bg'
|
||||||
query: {}
|
}],
|
||||||
};
|
query: {}
|
||||||
},
|
};
|
||||||
created() {
|
},
|
||||||
},
|
created() {
|
||||||
mounted() {
|
},
|
||||||
this.categoryindex = 0
|
mounted() {
|
||||||
this.query.groupCode = this.categorylist[0].groupCode
|
this.categoryindex = 0
|
||||||
this.query.patientId = this.$route.query.patientId
|
this.query.groupCode = this.categorylist[0].groupCode
|
||||||
this.query.title = '运动检测'
|
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();
|
this.getinfo();
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
},
|
},
|
||||||
watch: {
|
},
|
||||||
'measureTime': {
|
methods: {
|
||||||
handler(newValue, oldValue) {
|
clickcategory(item, index) {
|
||||||
this.query.measureTimeStart = newValue[0]
|
this.categoryindex = index
|
||||||
this.query.measureTimeEnd = newValue[1]
|
this.query.groupCode = item.groupCode
|
||||||
this.getinfo();
|
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,
|
{
|
||||||
},
|
name: '平均心率',
|
||||||
},
|
type: 'line',
|
||||||
methods: {
|
data: row.ylist.平均心率
|
||||||
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.收缩压
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.header {
|
.header {
|
||||||
background-color: #fff !important;
|
background-color: #fff !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100vh - 84px);
|
height: calc(100vh - 84px);
|
||||||
|
|
||||||
|
.rightheader {
|
||||||
|
width: 75%;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-left: 3px solid #dfe4ed;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.rightheader {
|
.time {
|
||||||
width: 75%;
|
position: absolute;
|
||||||
padding-top: 20px;
|
right: 50px;
|
||||||
border-left: 3px solid #DFE4ED;
|
top: 30px;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.time {
|
|
||||||
position: absolute;
|
|
||||||
right: 50px;
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main {
|
|
||||||
width: 1000px;
|
|
||||||
height: 450px;
|
|
||||||
margin: 80px auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftheader {
|
#main {
|
||||||
|
width: 1000px;
|
||||||
|
height: 450px;
|
||||||
|
margin: 80px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftheader {
|
||||||
height: calc(100vh - 352px);
|
height: calc(100vh - 352px);
|
||||||
|
|
||||||
width: 20%;
|
width: 20%;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
// height: 450px;
|
// height: 450px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
// 隐藏表头的滚动条
|
// 隐藏表头的滚动条
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
|
|
||||||
.selectitem {
|
.selectitem {
|
||||||
background-color: #D2E9FC;
|
background-color: #d2e9fc;
|
||||||
border-left: 2px solid #1890ff !important;
|
border-left: 2px solid #1890ff !important;
|
||||||
border-bottom: 1px solid #fff !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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 25px 10px;
|
||||||
|
position: relative;
|
||||||
|
border-left: 2px solid #fff;
|
||||||
|
border-bottom: 1px solid #e7e7e7;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -7,14 +7,17 @@
|
|||||||
src="../../../assets/manage/touxiang.png"
|
src="../../../assets/manage/touxiang.png"
|
||||||
alt=""
|
alt=""
|
||||||
v-if="$route.query.sex == 'MALE'"
|
v-if="$route.query.sex == 'MALE'"
|
||||||
|
@click="shiftCollapsiable"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
class="headsculpture"
|
class="headsculpture"
|
||||||
src="../../../assets/manage/nvtouxiang.png"
|
src="../../../assets/manage/nvtouxiang.png"
|
||||||
alt=""
|
alt=""
|
||||||
v-if="$route.query.sex == 'FEMALE'"
|
v-if="$route.query.sex == 'FEMALE'"
|
||||||
|
@click="shiftCollapsiable"
|
||||||
|
|
||||||
/>
|
/>
|
||||||
<div class="name">
|
<div class="name" @click="shiftCollapsiable">
|
||||||
{{ $route.query.patientName }}
|
{{ $route.query.patientName }}
|
||||||
</div>
|
</div>
|
||||||
<div class="gender">
|
<div class="gender">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user