fix: 健康档案管理,统计页面ui功能优化。

This commit is contained in:
tianyongbao
2025-11-06 13:47:14 +08:00
parent 616bcbe190
commit 630e4dc184
6 changed files with 900 additions and 374 deletions

View File

@@ -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>