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

src/views/health/doctorStatistic/index.vue

@@ -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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><Document /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">就医次数</div>
@@ -69,8 +69,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">就医费用</div>
@@ -82,8 +82,8 @@
         </div>
 
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><OfficeBuilding /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">常去医院</div>
@@ -93,8 +93,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><DataBoard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">常去科室</div>
@@ -104,8 +104,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><User /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">常看大夫</div>
@@ -117,8 +117,8 @@
       </div>
       <div class="summary-con" style="height: 115px">
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><FirstAidKit /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">门诊次数</div>
@@ -129,8 +129,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Notification /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">急诊次数</div>
@@ -141,8 +141,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><FirstAidKit /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">输液次数</div>
@@ -154,8 +154,8 @@
         </div>
 
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#909399"><House /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">住院次数</div>
@@ -166,8 +166,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><ChatDotRound /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">线上问诊次数</div>
@@ -248,6 +248,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { Document, Money, OfficeBuilding, DataBoard, User, FirstAidKit, Notification, House, ChatDotRound } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getDoctorAnalysis } from '@/api/health/statisticAnalysis'
 import { listPerson, getPerson } from '@/api/health/person'
@@ -550,6 +551,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -645,21 +649,67 @@ const drawLine = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const currentType = ref('就医费用柱状图')
 const handleRadioChange = (type) => {
   currentType.value = type
-  switch (type) {
+  nextTick(() => {
-    case '就医费用柱状图':
+    switch (type) {
-      drawBar(chartData.value)
+      case '就医费用柱状图':
-      break
+        drawBar(chartData.value)
-    case '就医费用折线图':
+        break
-      drawLine(chartData.value)
+      case '就医费用折线图':
-      break
+        drawLine(chartData.value)
-    default:
+        break
-      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>

src/views/health/healthAnalysis/index.vue

@@ -1,195 +1,291 @@
 <template>
-  <div class="app-container" style="overflow: auto">
+  <div class="app-container">
-    <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;健康档案数据总览</div>
+    <div class="content-wrapper">
-    <div class="header-con" ref="searchHeightRef">
+      <!-- 健康档案数据总览 -->
-      <div class="item">
+      <div class="section-title">
-        <img src="./assets/one.png" alt="" />
+        <span>健康档案数据总览</span>
-        <div class="info-sum">
-          <div class="title">成员总数</div>
-          <div class="num">{{ personCount }}<span>人</span></div>
-        </div>
       </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">档案数量</div>
-          <div class="num">{{ healthRecordCount }}<span>份</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">活动次数</div>
-          <div class="num">{{ activityCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">活动费用</div>
-          <div class="num">{{ activityCost }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">就医医院</div>
-          <div class="num">{{ hospitalCount }}<span>个</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">就诊大夫</div>
-          <div class="num">{{ doctorTotalCount }}<span>个</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">就医次数</div>
-          <div class="num">{{ doctorCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">就医费用</div>
-          <div class="num">{{ doctorCost }}<span>元</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">用药天数</div>
-          <div class="num">{{ marDayCount }}<span>天</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">用药次数</div>
-          <div class="num">{{ marCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">用药种类</div>
-          <div class="num">{{ medicalTypeCount }}<span>种</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">测量体温次数</div>
-          <div class="num">{{ temperatureTotalCount }}<span>次</span></div>
-        </div>
-      </div>
-    </div>
-    <div class="header-con" ref="searchHeightRef">
-      <div class="item">
-        <img src="./assets/one.png" alt="" />
-        <div class="info-sum">
-          <div class="title">发烧天数（>=37℃）</div>
-          <div class="num">{{ feverDayCount }}<span>天</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/ticketSum.png" alt="" />
-        <div class="info-sum">
-          <div class="title">低烧次数（36.9~37.5℃）</div>
-          <div class="num">{{ lowerTempCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTickets.png" alt="" />
-        <div class="info-sum">
-          <div class="title">中烧次数（37.5~38.5℃）</div>
-          <div class="num">{{ middleTempCount }}<span>次</span></div>
-        </div>
-      </div>
-      <div class="item">
-        <img src="./assets/completionTime.png" alt="" />
-        <div class="info-sum">
-          <div class="title">高烧次数（>=38.5℃）</div>
-          <div class="num">{{ higherTempCount }}<span>次</span></div>
-        </div>
-      </div>
-    </div>
-    <div v-for="(item, index) in personList" :key="index">
-      <div class="header-title" ref="searchHeightRef">&nbsp;&nbsp;&nbsp;&nbsp;{{ item.personName + '-健康档案概览' }}</div>
-      <div class="header-con" ref="searchHeightRef">
-        <div class="item">
-          <img src="./assets/one.png" alt="" />
-          <div class="info-sum">
-            <div class="title">档案数量</div>
-            <div class="num">{{ item.healthRecordCount }}<span>份</span></div>
-          </div>
-        </div>
-        <div class="item">
-          <img src="./assets/ticketSum.png" alt="" />
-          <div class="info-sum">
-            <div class="title">就医医院</div>
-            <div class="num">{{ item.hospitalCount }}<span>个</span></div>
-          </div>
-        </div>
-        <div class="item">
-          <img src="./assets/completionTickets.png" alt="" />
-          <div class="info-sum">
-            <div class="title">就诊大夫</div>
-            <div class="num">{{ item.doctorTotalCount }}<span>个</span></div>
-          </div>
-        </div>
-        <div class="item">
-          <img src="./assets/completionTime.png" alt="" />
-          <div class="info-sum">
-            <div class="title">就医次数</div>
-            <div class="num">{{ item.doctorCount }}<span>次</span></div>
-          </div>
-        </div>
-      </div>
-      <div class="header-con" ref="searchHeightRef">
-        <div class="item">
-          <img src="./assets/one.png" alt="" />
-          <div class="info-sum">
-            <div class="title">就医费用</div>
-            <div class="num">{{ item.doctorCost }}<span>元</span></div>
-          </div>
-        </div>
-        <div class="item">
-          <img src="./assets/ticketSum.png" alt="" />
-          <div class="info-sum">
-            <div class="title">用药天数</div>
-            <div class="num">{{ item.marDayCount }}<span>天</span></div>
-          </div>
-        </div>
-        <div class="item">
-          <img src="./assets/completionTickets.png" alt="" />
-          <div class="info-sum">
-            <div class="title">用药次数</div>
-            <div class="num">{{ item.marCount }}<span>次</span></div>
-          </div>
-        </div>
-        <div class="item">
-          <img src="./assets/completionTime.png" alt="" />
-          <div class="info-sum">
-            <div class="title">发烧天数（>=37℃）</div>
-            <div class="num">{{ item.feverDayCount }}<span>天</span></div>
-          </div>
-        </div>
-      </div>
-    </div>
 
-    <div></div>
+      <div class="summary-grid">
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><User /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">成员总数</div>
+            <div class="value">{{ personCount }}<span class="unit">人</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><FolderOpened /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">档案数量</div>
+            <div class="value">{{ healthRecordCount }}<span class="unit">份</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><TrophyBase /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">活动次数</div>
+            <div class="value">{{ activityCount }}<span class="unit">次</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Money /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">活动费用</div>
+            <div class="value">{{ activityCost }}<span class="unit">元</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="summary-grid">
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><OfficeBuilding /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">就医医院</div>
+            <div class="value">{{ hospitalCount }}<span class="unit">个</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Avatar /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">就诊大夫</div>
+            <div class="value">{{ doctorTotalCount }}<span class="unit">个</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><FirstAidKit /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">就医次数</div>
+            <div class="value">{{ doctorCount }}<span class="unit">次</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Wallet /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">就医费用</div>
+            <div class="value">{{ doctorCost }}<span class="unit">元</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="summary-grid">
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#409EFF"><Calendar /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">用药天数</div>
+            <div class="value">{{ marDayCount }}<span class="unit">天</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#67C23A"><Histogram /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">用药次数</div>
+            <div class="value">{{ marCount }}<span class="unit">次</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Collection /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">用药种类</div>
+            <div class="value">{{ medicalTypeCount }}<span class="unit">种</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><DataLine /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">测量体温次数</div>
+            <div class="value">{{ temperatureTotalCount }}<span class="unit">次</span></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="summary-grid">
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Sunny /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">发烧天数（>=37℃）</div>
+            <div class="value">{{ feverDayCount }}<span class="unit">天</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#E6A23C"><Warning /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">低烧次数（36.9~37.5℃）</div>
+            <div class="value">{{ lowerTempCount }}<span class="unit">次</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Warning /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">中烧次数（37.5~38.5℃）</div>
+            <div class="value">{{ middleTempCount }}<span class="unit">次</span></div>
+          </div>
+        </div>
+
+        <div class="summary-card">
+          <div class="icon-box">
+            <el-icon :size="40" color="#F56C6C"><Warning /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="title">高烧次数（>=38.5℃）</div>
+            <div class="value">{{ higherTempCount }}<span class="unit">次</span></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 个人健康档案概览 -->
+      <div v-for="(item, index) in personList" :key="index" class="person-section">
+        <div class="section-title">
+          <span>{{ item.personName }} - 健康档案概览</span>
+        </div>
+
+        <div class="summary-grid">
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#409EFF"><Document /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">档案数量</div>
+              <div class="value">{{ item.healthRecordCount }}<span class="unit">份</span></div>
+            </div>
+          </div>
+
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#67C23A"><OfficeBuilding /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">就医医院</div>
+              <div class="value">{{ item.hospitalCount }}<span class="unit">个</span></div>
+            </div>
+          </div>
+
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#E6A23C"><Avatar /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">就诊大夫</div>
+              <div class="value">{{ item.doctorTotalCount }}<span class="unit">个</span></div>
+            </div>
+          </div>
+
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#F56C6C"><FirstAidKit /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">就医次数</div>
+              <div class="value">{{ item.doctorCount }}<span class="unit">次</span></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="summary-grid">
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#409EFF"><Money /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">就医费用</div>
+              <div class="value">{{ item.doctorCost }}<span class="unit">元</span></div>
+            </div>
+          </div>
+
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#67C23A"><Calendar /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">用药天数</div>
+              <div class="value">{{ item.marDayCount }}<span class="unit">天</span></div>
+            </div>
+          </div>
+
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#E6A23C"><Histogram /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">用药次数</div>
+              <div class="value">{{ item.marCount }}<span class="unit">次</span></div>
+            </div>
+          </div>
+
+          <div class="summary-card">
+            <div class="icon-box">
+              <el-icon :size="40" color="#F56C6C"><Sunny /></el-icon>
+            </div>
+            <div class="card-content">
+              <div class="title">发烧天数（>=37℃）</div>
+              <div class="value">{{ item.feverDayCount }}<span class="unit">天</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-<script setup name="facilityType">
+<script setup name="HealthAnalysis">
 import { getHealthAnalysis } from '@/api/health/statisticAnalysis.js'
+import {
+  User,
+  FolderOpened,
+  TrophyBase,
+  Money,
+  OfficeBuilding,
+  Avatar,
+  FirstAidKit,
+  Wallet,
+  Calendar,
+  Histogram,
+  Collection,
+  DataLine,
+  Sunny,
+  Warning,
+  Document
+} from '@element-plus/icons-vue'
 
 //信息
 const personCount = ref(0) //成员总数
@@ -236,46 +332,226 @@ onMounted(() => {
   getHealthAnalysisData()
 })
 </script>
+
 <style lang="scss" scoped>
 .app-container {
-  .header-con {
+  padding: 20px;
-    width: 100%;
+  background-color: #f1f5f7;
-    height: 120px;
+  height: 100vh;
-    background-color: #ffffff;
+  overflow: hidden;
-    margin-bottom: 10px;
+  display: flex;
-    display: flex;
+  flex-direction: column;
-    justify-content: space-between;
+}
-    align-items: center;
+
-    .item {
+.content-wrapper {
-      width: 20%;
+  flex: 1;
-      height: 100%;
+  overflow-y: auto;
-      display: flex;
+  overflow-x: hidden;
-      position: relative;
+  padding-right: 10px;
-      align-items: center;
+
-      margin: 30px 60px 30px 60px;
+  &::-webkit-scrollbar {
-      .title {
+    width: 8px;
-        margin-left: 20px;
+  }
-        color: rgb(133, 133, 148);
+
-        margin-bottom: 8px;
+  &::-webkit-scrollbar-track {
-      }
+    background: rgba(0, 0, 0, 0.05);
-      .num {
+    border-radius: 4px;
-        margin-left: 20px;
+  }
-        font-weight: bold;
+
-      }
+  &::-webkit-scrollbar-thumb {
-    }
+    background: rgba(102, 126, 234, 0.3);
-    img {
+    border-radius: 4px;
-      height: 50px;
+    transition: background 0.3s;
-      width: 50px;
+
+    &:hover {
+      background: rgba(102, 126, 234, 0.5);
     }
   }
-  .header-title {
+}
-    width: 100%;
+
-    height: 30px;
+.section-title {
-    background-color: #ffffff;
+  font-size: 18px;
-    margin-bottom: 3px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 20px;
+  padding-left: 12px;
+  border-left: 4px solid #667eea;
+  display: flex;
+  align-items: center;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
+  padding: 16px 20px;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(102, 126, 234, 0.08);
+}
+
+.person-section {
+  margin-top: 40px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.summary-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
+  border-radius: 16px;
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08), 0 0 0 1px rgba(102, 126, 234, 0.05);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  list-style: none !important;
+
+  &::before,
+  &::after {
+    display: none !important;
+    content: none !important;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    display: block !important;
+  }
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15), 0 0 0 1px rgba(102, 126, 234, 0.1);
+
+    &::before {
+      opacity: 1;
+    }
+
+    .icon-box {
+      transform: scale(1.08);
+
+      .el-icon {
+        transform: rotate(8deg);
+      }
+    }
+  }
+}
+
+.icon-box {
+  width: 70px;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.05) 100%);
+  border-radius: 12px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+  border: 1px solid rgba(102, 126, 234, 0.1);
+
+  &::before,
+  &::after {
+    display: none !important;
+    content: none !important;
+  }
+
+  .el-icon {
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+
+  &::before,
+  &::after {
+    display: none !important;
+    content: none !important;
+  }
+
+  .title {
+    font-size: 14px;
+    color: #909399;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+  }
+
+  .value {
+    font-size: 28px;
+    font-family: DIN, Arial, sans-serif;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: 1.2;
     display: flex;
-    justify-content: space-between;
+    align-items: baseline;
-    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+    }
+
+    .unit {
+      font-size: 14px;
+      color: #909399;
+      font-weight: 500;
+      background: none;
+      -webkit-text-fill-color: #909399;
+
+      &::before,
+      &::after {
+        display: none !important;
+        content: none !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 1400px) {
+  .summary-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 1000px) {
+  .summary-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .summary-card {
+    padding: 20px;
   }
 }
 </style>

src/views/health/healthStatistic/index.vue

@@ -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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><FolderOpened /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">档案数量</div>
@@ -69,8 +69,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><Document /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">档案过程记录次数</div>
@@ -81,8 +81,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><Timer /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">平均康复周期</div>
@@ -94,8 +94,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><OfficeBuilding /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">就医医院</div>
@@ -107,8 +107,8 @@
         </div>
 
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><User /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">就诊大夫</div>
@@ -121,8 +121,8 @@
       </div>
       <div class="summary-con" style="height: 115px">
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><FirstAidKit /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">就医次数</div>
@@ -133,8 +133,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Money /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">就医费用</div>
@@ -145,8 +145,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><Calendar /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">用药天数</div>
@@ -157,8 +157,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><FirstAidKit /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">用药次数</div>
@@ -169,8 +169,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Sunny /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">发烧天数</div>
@@ -218,6 +218,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { FolderOpened, Document, Timer, OfficeBuilding, User, FirstAidKit, Money, Calendar, Sunny } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getRecordAnalysis } from '@/api/health/statisticAnalysis'
 import { listPerson } from '@/api/health/person'
@@ -508,6 +509,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -604,21 +608,67 @@ const drawLine = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const currentType = ref('档案费用柱状图')
 const handleRadioChange = (type) => {
   currentType.value = type
-  switch (type) {
+  nextTick(() => {
-    case '档案费用柱状图':
+    switch (type) {
-      drawBar(chartData.value)
+      case '档案费用柱状图':
-      break
+        drawBar(chartData.value)
-    case '档案费用折线图':
+        break
-      drawLine(chartData.value)
+      case '档案费用折线图':
-      break
+        drawLine(chartData.value)
-    default:
+        break
-      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>

src/views/health/marStatistic/index.vue

@@ -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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <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) {
+  nextTick(() => {
-    case '用药次数柱状图':
+    switch (type) {
-      drawBar(chartData.value)
+      case '用药次数柱状图':
-      break
+        drawBar(chartData.value)
-    case '用药次数折线图':
+        break
-      drawLine(chartData.value)
+      case '用药次数折线图':
-      break
+        drawLine(chartData.value)
-    default:
+        break
-      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>

src/views/health/milkPowderStatistic/index.vue

@@ -52,8 +52,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">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><Clock /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">今日吃奶次数</div>
@@ -64,8 +64,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><MilkTea /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">今日吃奶量</div>
@@ -76,8 +76,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><DataAnalysis /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">今日单次平均吃奶量</div>
@@ -88,8 +88,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近7日吃奶量</div>
@@ -101,8 +101,8 @@
         </div>
 
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><DataLine /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近7日日平均吃奶量</div>
@@ -115,8 +115,8 @@
       </div>
       <div class="summary-con" style="height: 115px">
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><Calendar /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近1月吃奶量</div>
@@ -127,8 +127,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近3月吃奶量</div>
@@ -139,8 +139,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><DataBoard /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近6月吃奶量</div>
@@ -151,8 +151,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">近1年吃奶量</div>
@@ -163,8 +163,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><PieChart /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">总吃奶量</div>
@@ -205,6 +205,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { Clock, MilkTea, DataAnalysis, TrendCharts, DataLine, Calendar, DataBoard, Histogram, PieChart } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getMilkPowderAnalysis } from '@/api/health/statisticAnalysis'
 import { listPerson } from '@/api/health/person'
@@ -476,6 +477,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -572,21 +576,67 @@ const drawLine = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const currentType = ref('柱状图')
 const handleRadioChange = (type) => {
   currentType.value = type
-  switch (type) {
+  nextTick(() => {
-    case '柱状图':
+    switch (type) {
-      drawBar(chartData.value)
+      case '柱状图':
-      break
+        drawBar(chartData.value)
-    case '折线图':
+        break
-      drawLine(chartData.value)
+      case '折线图':
-      break
+        drawLine(chartData.value)
-    default:
+        break
-      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>

src/views/health/temperatureStatistic/index.vue

@@ -56,9 +56,9 @@
     </div>
     <div class="main-con" style="height: calc(100% - 1.45rem)">
       <div class="summary-con" style="height: 115px">
-        <div class="right-con">
+        <div class="right-con" style="list-style: none">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><TrendCharts /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">发烧天数</div>
@@ -69,8 +69,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><Histogram /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">测量次数</div>
@@ -81,8 +81,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Sunny /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最高体温</div>
@@ -93,8 +93,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#409EFF"><Cloudy /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">最低体温</div>
@@ -105,8 +105,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><DataLine /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">平均体温</div>
@@ -118,8 +118,8 @@
       </div>
       <div class="summary-con" style="height: 115px">
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#67C23A"><CircleCheck /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">正常次数</div>
@@ -129,8 +129,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#E6A23C"><Warning /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">低烧次数</div>
@@ -140,8 +140,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Warning /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">中烧次数</div>
@@ -151,8 +151,8 @@
           </div>
         </div>
         <div class="right-con">
-          <div class="img">
+          <div class="icon-box">
-            <img src="@/assets/images/average.png" alt="" />
+            <el-icon :size="40" color="#F56C6C"><Warning /></el-icon>
           </div>
           <div class="item-wrap">
             <div class="title">高烧次数</div>
@@ -201,6 +201,7 @@
 import dayjs from 'dayjs'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
+import { TrendCharts, Histogram, Sunny, Cloudy, DataLine, CircleCheck, Warning } from '@element-plus/icons-vue'
 import yearPicker from '@/components/YearPicker/index.vue'
 import { getTemperatureAnalysis } from '@/api/health/statisticAnalysis'
 import { listPerson, getPerson } from '@/api/health/person'
@@ -508,6 +509,9 @@ const drawBar = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const drawLine = (data) => {
@@ -614,21 +618,67 @@ const drawLine = (data) => {
   }
 
   myChart.setOption(option)
+  setTimeout(() => {
+    myChart.resize()
+  }, 100)
 }
 
 const currentType = ref('柱状图')
 const handleRadioChange = (type) => {
   currentType.value = type
-  switch (type) {
+  nextTick(() => {
-    case '柱状图':
+    switch (type) {
-      drawBar(chartData.value)
+      case '柱状图':
-      break
+        drawBar(chartData.value)
-    case '折线图':
+        break
-      drawLine(chartData.value)
+      case '折线图':
-      break
+        drawLine(chartData.value)
-    default:
+        break
-      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>