fix: 健康档案管理,统计页面ui功能优化。
This commit is contained in:
@@ -57,8 +57,8 @@
|
||||
<div class="main-con" style="height: calc(100% - 1.45rem)">
|
||||
<div class="summary-con" style="height: 115px">
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#409EFF"><Calendar /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">用药天数</div>
|
||||
@@ -69,8 +69,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#67C23A"><Collection /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">用药种类</div>
|
||||
@@ -81,8 +81,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#E6A23C"><Collection /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">用药次数</div>
|
||||
@@ -94,8 +94,8 @@
|
||||
</div>
|
||||
|
||||
<div class="right-con" v-show="mar.top1 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#F56C6C"><Medal /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top1Name }}</div>
|
||||
@@ -106,8 +106,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.top2 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#E6A23C"><Medal /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top2Name }}</div>
|
||||
@@ -118,8 +118,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.top3 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#67C23A"><Medal /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top3Name }}</div>
|
||||
@@ -131,8 +131,8 @@
|
||||
</div>
|
||||
<div class="summary-con" v-show="mar.top4 > 0 || mar.top5 > 0 || mar.top6 > 0 || mar.top7 > 0 || mar.top8 > 0 || mar.top9 > 0" style="height: 115px">
|
||||
<div class="right-con" v-show="mar.top4 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><Memo /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top4Name }}</div>
|
||||
@@ -143,8 +143,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.top5 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><Memo /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top5Name }}</div>
|
||||
@@ -154,8 +154,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.top6 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><Memo /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top6Name }}</div>
|
||||
@@ -166,8 +166,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.top7 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><Memo /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top7Name }}</div>
|
||||
@@ -178,8 +178,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.top8 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><Memo /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top8Name }}</div>
|
||||
@@ -189,8 +189,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-con" v-show="mar.top9 > 0">
|
||||
<div class="img">
|
||||
<img src="@/assets/images/average.png" alt="" />
|
||||
<div class="icon-box">
|
||||
<el-icon :size="40" color="#909399"><Memo /></el-icon>
|
||||
</div>
|
||||
<div class="item-wrap">
|
||||
<div class="title">{{ mar.top9Name }}</div>
|
||||
@@ -260,6 +260,7 @@
|
||||
import dayjs from 'dayjs'
|
||||
import * as echarts from 'echarts'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Calendar, Collection, Medal, Memo } from '@element-plus/icons-vue'
|
||||
import yearPicker from '@/components/YearPicker/index.vue'
|
||||
import { getMarAnalysis } from '@/api/health/statisticAnalysis'
|
||||
import { listPerson, getPerson } from '@/api/health/person'
|
||||
@@ -567,6 +568,9 @@ const drawBar = (data) => {
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
setTimeout(() => {
|
||||
myChart.resize()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const drawLine = (data) => {
|
||||
@@ -673,21 +677,67 @@ const drawLine = (data) => {
|
||||
}
|
||||
|
||||
myChart.setOption(option)
|
||||
setTimeout(() => {
|
||||
myChart.resize()
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const currentType = ref('用药次数柱状图')
|
||||
const handleRadioChange = (type) => {
|
||||
currentType.value = type
|
||||
switch (type) {
|
||||
case '用药次数柱状图':
|
||||
drawBar(chartData.value)
|
||||
break
|
||||
case '用药次数折线图':
|
||||
drawLine(chartData.value)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
nextTick(() => {
|
||||
switch (type) {
|
||||
case '用药次数柱状图':
|
||||
drawBar(chartData.value)
|
||||
break
|
||||
case '用药次数折线图':
|
||||
drawLine(chartData.value)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
getPersonList()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.summary-con {
|
||||
.right-con {
|
||||
list-style: none !important;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrap {
|
||||
list-style: none !important;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
.num,
|
||||
.title {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user