You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
319 lines
8.8 KiB
319 lines
8.8 KiB
3 years ago
|
<template>
|
||
|
|
<div class="component-container indicators">
|
||
|
|
<el-tabs v-model="activeTab" class="tabs-key-wrapper">
|
||
|
|
<el-tab-pane v-for="(item,index) in kpilist" :key="index" :label="item.desc" :name="item.id" style="height: 100%">
|
||
|
|
<div class="scroll-father-head">
|
||
|
|
<el-scrollbar style="height:100%">
|
||
|
|
<el-checkbox-group v-model="checkList">
|
||
|
|
<el-checkbox
|
||
|
|
v-for="(item2,index2) in item.children"
|
||
|
|
:key="index2"
|
||
|
|
:label="item2.id"
|
||
|
|
@change="checkboxChange(item,item2,$event)"
|
||
|
|
>{{ item2.desc }}</el-checkbox>
|
||
|
|
</el-checkbox-group>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<!-- <div :style="{height:` calc(100% - 5px - ${patientInfoHeadHeight}px)`}" class="scroll-father-echeats">-->
|
||
|
|
<div :style="{height:` calc(100% - 240px)`}" class="scroll-father-echeats">
|
||
|
|
<el-scrollbar class="scrollbar-wrapper" style="height:100%">
|
||
|
|
<echarts-yanya
|
||
|
|
:id-name="'key-indicators-shili'"
|
||
|
|
:chart-data="shiliAndYanya.shili"
|
||
|
|
desc="视力"
|
||
|
|
class="scroll-echearts"
|
||
|
|
/>
|
||
|
|
<echarts-yanya
|
||
|
|
:id-name="'key-indicators-yanzhou'"
|
||
|
|
:chart-data="shiliAndYanya.yanZhouList"
|
||
|
|
desc="眼轴"
|
||
|
|
class="scroll-echearts"
|
||
|
|
/>
|
||
|
|
<!-- 加type三层过滤 -->
|
||
|
|
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">
|
||
|
|
<el-tab-pane v-for="(item,index) in shiliAndYanya.shiLiList" :key="index" :label="item.type" :name="index">
|
||
|
|
<template v-if="activeName==index">
|
||
|
|
<echarts-shili
|
||
|
|
:id-name="'key-indicators-shili'"
|
||
|
|
:chart-data="item.echartsVo"
|
||
|
|
desc="视力"
|
||
|
|
class="scroll-echearts"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs> -->
|
||
|
|
<echarts-yanya
|
||
|
|
:id-name="'key-indicators-shili'"
|
||
|
|
:chart-data="shiliAndYanya.yanya"
|
||
|
|
desc="眼压"
|
||
|
|
class="scroll-echearts"
|
||
|
|
/>
|
||
|
|
<echarts-line
|
||
|
|
v-for="(item,index) in kpiValEchartsList"
|
||
|
|
:key="index"
|
||
|
|
class="scroll-echearts"
|
||
|
|
:id-name="'key-indicators-' + item.tableName + item.columnName"
|
||
|
|
:chart-data="item.data"
|
||
|
|
:desc="item.desc"
|
||
|
|
/>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import echartsShili from '@/components/echarts/shili'
|
||
|
|
import echartsLine from '@/components/echarts/line'
|
||
|
|
import echartsYanya from '@/components/echarts/yanya'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { echartsShili, echartsYanya, echartsLine },
|
||
|
|
props: {
|
||
|
|
patientId: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
activeName: 0,
|
||
|
|
flagAdmin: '',
|
||
|
|
checkList: [],
|
||
|
|
kpilist: [],
|
||
|
|
shiliAndYanya: {},
|
||
|
|
activeTab: '',
|
||
|
|
kpiValEchartsList: [], // 根据指标获取过来的echarts数据
|
||
|
|
patientInfoHeadHeight: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
kpilist(val) {
|
||
|
|
if (val && val.length > 0) {
|
||
|
|
// this.patientInfoHeadHeight = document.querySelector('.tabs-key-wrapper') ? document.querySelector('.tabs-key-wrapper').offsetHeight : ''
|
||
|
|
this.activeTab = val[0].id
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 获取视力和眼压图标的值
|
||
|
|
this.init()
|
||
|
|
// 获取关键指标--右侧获取筛选的具体值
|
||
|
|
// const sysUserDTO = JSON.parse(window.localStorage.getItem('yzk-sysUserDTO'))
|
||
|
|
// this.flagAdmin = sysUserDTO ? sysUserDTO.flagAdmin : ''
|
||
|
|
// this.$nextTick(() => {
|
||
|
|
// window.onresize = () => {
|
||
|
|
// return (() => {
|
||
|
|
// this.patientInfoHeadHeight = document.querySelector('.tabs-key-wrapper') ? document.querySelector('.tabs-key-wrapper').offsetHeight : ''
|
||
|
|
// })()
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
this.checkList = []
|
||
|
|
this.kpiValEchartsList = []
|
||
|
|
this.getShiLiAndYanYaData()
|
||
|
|
this.getKPI()
|
||
|
|
// this.patientInfoHeadHeight = document.querySelector('.tabs-key-wrapper').offsetHeight
|
||
|
|
// const parent = document.getElementById('drawerKey')
|
||
|
|
// parent.style.width = '380px'
|
||
|
|
},
|
||
|
|
synchronData() {
|
||
|
|
this.$http.post('/table/dict/updateTableDict').then(({ data: res }) => {
|
||
|
|
if (res.code !== 0) {
|
||
|
|
return this.$message.error(res.msg)
|
||
|
|
} else {
|
||
|
|
return this.$message.success('数据同步成功!')
|
||
|
|
}
|
||
|
|
}).catch(() => {})
|
||
|
|
},
|
||
|
|
// 复选框改变时
|
||
|
|
checkboxChange(item, item2, e) {
|
||
|
|
if (e === true) {
|
||
|
|
this.getKPIValue(item2)
|
||
|
|
} else {
|
||
|
|
this.kpiValEchartsList = this.kpiValEchartsList.filter(kpiItem => kpiItem.columnId !== item2.id)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async getShiLiAndYanYaData() {
|
||
|
|
const { data: res } = await this.$http.get('/patient/view/getYanZouAndYanYaData', {
|
||
|
|
params: {
|
||
|
|
patientId: '200203836'
|
||
|
|
// patientId: this.patientId
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.shiliAndYanya = res.data
|
||
|
|
} else {
|
||
|
|
this.shiliAndYanya = []
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取关键指标--右侧获取筛选的具体值
|
||
|
|
async getKPI() {
|
||
|
|
const { data: res } = await this.$http.get(`/patient/view/getKPI?patientId=${this.patientId}`)
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.kpilist = res.data
|
||
|
|
if (res.data.length) {
|
||
|
|
this.activeTab = this.kpilist[0].id
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 获取关键指标的值--右侧根据关键指标中的具体值获取echarts图
|
||
|
|
async getKPIValue(obj) {
|
||
|
|
const { data: res } = await this.$http.get('/patient/view/getKPIValue', {
|
||
|
|
params: {
|
||
|
|
id: obj.id,
|
||
|
|
patientId: this.patientId
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if (res.code === 0) {
|
||
|
|
this.kpiValEchartsList.push({
|
||
|
|
tableName: this.activeTab,
|
||
|
|
tableid: this.activeTab,
|
||
|
|
columnName: obj.name,
|
||
|
|
columnId: obj.id,
|
||
|
|
desc: obj.desc,
|
||
|
|
data: res.data
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// echarts切换
|
||
|
|
handleClick(tab, event) {
|
||
|
|
console.log(tab, event)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.indicators {
|
||
|
|
width: 600px;
|
||
|
|
padding: 12px 8px;
|
||
|
|
height: 100%;
|
||
|
|
background-color: white;
|
||
|
|
position: relative;
|
||
|
|
.tabs-key-wrapper {
|
||
|
|
.scroll-father-head {
|
||
|
|
//height: 100%;
|
||
|
|
max-height: 240px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.el-checkbox {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.scroll-father-echeats {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
// 折线图滚动容器
|
||
|
|
.scrollbar-wrapper {
|
||
|
|
padding-right: 0;
|
||
|
|
.echarts-shili,
|
||
|
|
.echarts-yanya {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.scroll-echearts {
|
||
|
|
padding: 5px 0;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
//background: #171515;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
.indicators {
|
||
|
|
.el-button--mini, .el-button--mini.is-round{
|
||
|
|
padding: 7px;
|
||
|
|
}
|
||
|
|
.el-icon-refresh:before{
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.el-checkbox-group {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
.el-tabs__nav,.el-tabs__content{
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
.el-tabs__item{
|
||
|
|
//color: rgba(255,255,255,0.45);
|
||
|
|
}
|
||
|
|
.el-tabs__item.is-active{
|
||
|
|
//color: #FFFFFF;
|
||
|
|
}
|
||
|
|
.el-tabs__nav-wrap::after{
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
||
|
|
width: 200px;
|
||
|
|
min-height: 400px;
|
||
|
|
}
|
||
|
|
.el-tabs__header {
|
||
|
|
margin: 0 0 5px;
|
||
|
|
padding-left: 16px;
|
||
|
|
//background: #2A2D32 !important;
|
||
|
|
}
|
||
|
|
.el-scrollbar__view {
|
||
|
|
// background-color: #fff;
|
||
|
|
}
|
||
|
|
.el-scrollbar__bar.is-vertical {
|
||
|
|
background: #eee;
|
||
|
|
}
|
||
|
|
.el-tabs__nav-scroll {
|
||
|
|
margin-right: 32px;
|
||
|
|
}
|
||
|
|
.tabs-key-wrapper {
|
||
|
|
//max-height: 200px;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 4px;
|
||
|
|
background-color: white;
|
||
|
|
padding: 13px 2px 8px 0;
|
||
|
|
margin-bottom: 16px ;
|
||
|
|
.el-tabs__nav-next,
|
||
|
|
.el-tabs__nav-prev {
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
.el-tabs__item {
|
||
|
|
height: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// .tabs-key-wrapper .el-tabs__content {
|
||
|
|
// padding: 0 5px;
|
||
|
|
// height: 160px;
|
||
|
|
// overflow-y: auto;
|
||
|
|
// }
|
||
|
|
|
||
|
|
.myGroup-enter,
|
||
|
|
.myGroup-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(80px);
|
||
|
|
}
|
||
|
|
.myGroup-enter-active,
|
||
|
|
.myGroup-leave-active {
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* v-move和v-leave-active实现删除一行，后面元素移位的动画效果 */
|
||
|
|
.myGroup-move {
|
||
|
|
transition: all 0.5s ease;
|
||
|
|
}
|
||
|
|
.myGroup-leave-active {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|