From af6bf39cabd56b68b14682881c27098e71f7ea0d Mon Sep 17 00:00:00 2001
From: wuyy <czlis@wuyy>
Date: Tue, 21 Apr 2026 17:48:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inspectionReport/report/index.vue         |   2 +-
 .../statistics/overview/css/index.css         | 155 ++++++++-
 .../regional/statistics/overview/index.vue    | 293 +++++++-----------
 3 files changed, 250 insertions(+), 200 deletions(-)

diff --git a/src/views/regional/inspectionReport/report/index.vue b/src/views/regional/inspectionReport/report/index.vue
index 84cda69..9891be3 100644
--- a/src/views/regional/inspectionReport/report/index.vue
+++ b/src/views/regional/inspectionReport/report/index.vue
@@ -179,7 +179,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts" name="Report">
 import CustomTable from '@/components/elTable/index.vue'
 import { reportList, reportPrintPdf, reportResult, reportMedList, reportFsresult } from '@/api/checkCode/index'
 import dayjs from 'dayjs';
diff --git a/src/views/regional/statistics/overview/css/index.css b/src/views/regional/statistics/overview/css/index.css
index d6b10c8..ec7581f 100644
--- a/src/views/regional/statistics/overview/css/index.css
+++ b/src/views/regional/statistics/overview/css/index.css
@@ -19,7 +19,7 @@
   width: 100%;
   font-size: 1.875rem;
   line-height: 4.6875rem;
-  color: rgba(14, 253, 255, 1);
+  color: #0efdff;
   text-align: center;
   font-weight: bold;
 }
@@ -72,13 +72,13 @@
   width: 75%;
   float: left;
   padding-right: 1.5625rem;
-  padding-top: 1.5625rem;
+  padding-top: 0;
 }
 
 .rightMain {
   width: 25%;
   float: left;
-  padding-top: 1.5625rem;
+  padding-top: 2.5rem;
 }
 
 .leftMain_top {
@@ -106,7 +106,7 @@
   width: 100%;
   min-height: 3.75rem;
   position: relative;
-  padding: .625rem 1.5625rem;
+  padding: .625rem 1.25rem;
 }
 
 .leftMain_top ul li .liIn h3 {
@@ -116,15 +116,15 @@
 }
 
 .leftMain_top ul li .liIn .shu {
-  font-size: 1.875rem;
-  color: rgba(14, 253, 255, 1);
+  font-size: 1.625rem;
+  color: #0efdff;
   font-family: dig;
   margin-bottom: 0.3125rem;
 }
 
 .leftMain_top ul li .liIn .shu i {
   font-size: 1rem;
-  margin-left: 0.9375rem;
+  margin-left: .125rem;
   font-style: normal;
 }
 
@@ -133,7 +133,7 @@
   color: #fff;
   position: relative;
   z-index: 10;
-}
+ }
 
 .leftMain_top ul li .liIn .zi .span1 {
   margin-right: 1.5625rem;
@@ -201,8 +201,8 @@
 /*左边中间部分排行榜*/
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
   width: 100%;
-  height: 68vh;
-  overflow: hidden;
+  height: 58vh;
+  overflow-y: auto;
 }
 
 /* .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul{
@@ -220,7 +220,7 @@
 }
 
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
-  width: 43%;
+  width: 30%;
   position: relative;
   padding-left: 1.25rem;
 }
@@ -262,7 +262,7 @@
  }
 
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
-  width: 40%;
+  width: 50%;
   height: 1.25rem;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 125rem;
@@ -416,6 +416,83 @@
   padding: .625rem;
 }
 
+.proportion {
+  height: 78vh;
+  overflow-y: auto;
+}
+
+  
+.proportion ul li .liIn {
+  display: flex;
+  display: -webkit-flex;
+  align-items: center;
+  color: #fff;
+  font-size: 0.9375rem;
+  height: 2.8125rem;
+}
+
+.proportion ul li .liIn .liIn_left {
+  width: 43%;
+  position: relative;
+  padding-left: 1.25rem;
+}
+
+.proportion ul li .liIn .liIn_left .bot {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: #05d1fc;
+  border-radius: 62.5rem;
+  display: block;
+  position: absolute;
+  left: 0.3125rem;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+
+.proportion ul li .liIn .liIn_line {
+  width: 40%;
+  height: 1.25rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 125rem;
+   overflow: hidden;
+   position: relative;
+}
+
+.proportion ul li .liIn .liIn_line .line_lineIn {
+  width: 100%;
+  height: 1.25rem;
+  background: #05d1fc;
+  border-radius: 125rem;
+  -webkit-animation: widthMove1 2s ease-in-out;
+}
+
+.line_lineIn .per {
+  position: absolute;
+  top: 0;
+  left: 50%;
+}
+
+ 
+@-webkit-keyframes widthMove1 {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 98.5%;
+  }
+}
+
+ 
+
+.proportion ul li .liIn .num {
+  width: 18%;
+  font-family: dig;
+  padding-left: 0.3125rem;
+}
+
+
 .rightMain .rightMain_topIn h3 {
   font-size: 1.25rem;
   color: #fff;
@@ -507,4 +584,58 @@
 
 .rightMain .rightMain_bottomIn .biaoge_list ul li:frist-child {
   text-align: left;
+}
+
+.title_nums {
+ font-size: 1.25rem;
+  font-weight: 700;
+  color: #fff;
+  margin: .3125rem 0 .625rem  ;
+}
+
+.nums_box {
+  display: flex;
+  display: -webkit-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+/* 适配你深蓝色科技风的滚动条 */
+/* 整体滚动条容器 */
+::-webkit-scrollbar {
+  width: 10px; /* 控制滚动条宽度，和你图中一致 */
+  height: 10px;
+}
+
+/* 滚动条轨道（背景） */
+::-webkit-scrollbar-track {
+  background: rgba(0, 150, 255, 0.1); /* 半透明蓝底，和界面融合 */
+  border-radius: 4px;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(
+    to bottom,
+    #00d4ff, /* 顶部亮青色，和你的条形颜色呼应 */
+    #0099cc  /* 底部深蓝色，和背景协调 */
+  );
+  border-radius: 4px;
+  box-shadow: 0 0 6px rgba(0, 212, 255, 0.5); /* 发光效果，增强科技感 */
+}
+
+/* 滑块 hover 效果 */
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(
+    to bottom,
+    #00f0ff,
+    #00aadd
+  );
+  box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
+}
+
+/* 滚动条上下按钮（可选，隐藏或自定义） */
+::-webkit-scrollbar-button {
+  display: none;
 }
\ No newline at end of file
diff --git a/src/views/regional/statistics/overview/index.vue b/src/views/regional/statistics/overview/index.vue
index 4e4f218..65a4ea2 100644
--- a/src/views/regional/statistics/overview/index.vue
+++ b/src/views/regional/statistics/overview/index.vue
@@ -4,11 +4,29 @@
     <div class="leftMain">
       <div class="leftMain_top">
         <div class="leftMain_topIn">
+          <div class="title_nums">当月累计数据</div>
           <ul>
-            <li v-for="item in source">
+            <li v-for="item in sourceMonth">
               <div class="liIn">
-                <h3>{{ item.name }}</h3>
-                <p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
+                <div class="nums_box">
+                  <h3>{{ item.name }}</h3>
+                  <p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
+                </div>
+                <span class="border_bg_leftTop"></span>
+                <span class="border_bg_rightTop"></span>
+                <span class="border_bg_leftBottom"></span>
+                <span class="border_bg_rightBottom"></span>
+              </div>
+            </li>
+          </ul>
+          <div class="title_nums">当年累计数据</div>
+          <ul>
+            <li v-for="item in sourceYear">
+              <div class="liIn">
+                <div class="nums_box">
+                  <h3>{{ item.name }}</h3>
+                  <p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
+                </div>
                 <span class="border_bg_leftTop"></span>
                 <span class="border_bg_rightTop"></span>
                 <span class="border_bg_leftBottom"></span>
@@ -23,7 +41,7 @@
           <div class="leftMain_middle_leftIn">
             <h3>委托机构当月送检标本数量</h3>
             <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
-            <div class="biaoge" style="width:100%; height:30vh" ref="chartmain" id="chartmain"></div>
+            <div class="biaoge" style="width:100%; height:25vh" ref="chartmain" id="chartmain"></div>
             <span class="border_bg_leftTop"></span>
             <span class="border_bg_rightTop"></span>
             <span class="border_bg_leftBottom"></span>
@@ -31,7 +49,7 @@
           </div>
           <div class="leftMain_middle_leftIn leftMain_middle_leftIn_zhe">
             <h3>近一个月送检标本数量趋势图</h3>
-            <div class="biaoge" style="width:100%; height:30vh" ref="chartmain_zhe" id="chartmain_zhe"></div>
+            <div class="biaoge" style="width:100%; height:25vh" ref="chartmain_zhe" id="chartmain_zhe"></div>
             <span class="border_bg_leftTop"></span>
             <span class="border_bg_rightTop"></span>
             <span class="border_bg_leftBottom"></span>
@@ -40,21 +58,21 @@
         </div>
         <div class="leftMain_middle_right">
           <div class="leftMain_middle_rightIn">
-            <h3>委托机构当月送检标本占比</h3>
+            <h3>当日送检样本情况</h3>
             <div class="biaoge biaoge_pai">
               <div class="biaoge_paiIn">
                 <ul>
                   <!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
                     :limitMoveNum="14"> -->
-                  <li v-for="(item, i) in listData">
+                  <li v-for="(item, i) in dayCounts">
                     <div class="liIn">
-                      <div class="liIn_left"><span class="zi">{{ item.groupname }}</span></div>
+                      <div class="liIn_left"><span class="zi">{{ item.dict_name }}</span></div>
                       <div class="liIn_line">
-                        <div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
-                          <div class="per">{{ item.percentage }}</div>
+                        <div class="line_lineIn" :style="{ width: ` ${item.percent}` }">
+                          <div class="per">{{ item.percent }}</div>
                         </div>
                       </div>
-                      <p class="num">{{ item.groupsum }}</p>
+                      <p class="num">{{ item.sl }}</p>
                     </div>
                   </li>
                   <!-- </Vue3SeamlessScroll> -->
@@ -73,19 +91,24 @@
     <div class="rightMain">
       <div class="rightMain_top">
         <div class="rightMain_topIn">
-          <h3>当日送检样本情况</h3>
-          <div class="biaoge" style="width:100%; height:35vh" ref="chartmain_bing" id="chartmain_bing"></div>
-          <span class="border_bg_leftTop"></span>
-          <span class="border_bg_rightTop"></span>
-          <span class="border_bg_leftBottom"></span>
-          <span class="border_bg_rightBottom"></span>
-        </div>
-      </div>
-      <div class="rightMain_bottom">
-        <div class="rightMain_bottomIn">
-          <h3>送检项目分类占比</h3>
-          <div class="biaoge biaoge_list" ref="sjRef" style="width:100%; height:34vh">
-
+          <h3>委托机构当月送检标本占比</h3>
+          <div class="proportion">
+            <ul>
+              <!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
+                    :limitMoveNum="14"> -->
+              <li v-for="(item, i) in listData">
+                <div class="liIn">
+                  <div class="liIn_left"><span class="zi" :title="item.groupname">{{ item.groupname }}</span></div>
+                  <div class="liIn_line">
+                    <div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
+                      <div class="per">{{ item.percentage }}</div>
+                    </div>
+                  </div>
+                  <p class="num">{{ item.groupsum }}</p>
+                </div>
+              </li>
+              <!-- </Vue3SeamlessScroll> -->
+            </ul>
           </div>
           <span class="border_bg_leftTop"></span>
           <span class="border_bg_rightTop"></span>
@@ -104,20 +127,36 @@ import * as echarts from 'echarts';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 import { getallcount } from '@/api/regional'
 
-const source = ref([
+const sourceMonth = ref([
   { name: '区域机构', num: 0, unit: '家', pre: 'jgs' },
   { name: '检验人数', num: 0, unit: '人', pre: 'rs' },
   { name: '检验管数', num: 0, unit: '个', pre: 'gs' },
   { name: '检验报告数', num: 0, unit: '份', pre: 'bgs' },
-  { name: '检验项目数', num: 0, unit: '个', pre: 'xms' },
+])
+const sourceYear = ref([
+  { name: '区域机构', num: 0, unit: '家', pre: 'jgs' },
+  { name: '检验人数', num: 0, unit: '人', pre: 'rs' },
+  { name: '检验管数', num: 0, unit: '个', pre: 'gs' },
+  { name: '检验报告数', num: 0, unit: '份', pre: 'bgs' },
+])
+
+
+const dayCounts = ref([
+  { dict_name: '检验申请', sl: 0, percent: '0%' },
+  { dict_name: '标本送检', sl: 0, percent: '0%' },
+  { dict_name: '上机检测', sl: 0, percent: '0%' },
+  { dict_name: '结果审核', sl: 0, percent: '0%' },
 ])
 
 const listData: any = ref([])
 
 
 const chartmain = ref()
+
+let echarts1Instance: echarts.ECharts | null = null
+let echarts3Instance: echarts.ECharts | null = null
 const getEcharts1 = (data: any) => {
-  const Intance = echarts.init(chartmain.value);
+  echarts1Instance = echarts.init(chartmain.value);
   var dataAxis = data.map((item: any) => item.daynum + '日')
   var data = data.map((item: any) => item.sl)
   const option = {
@@ -167,10 +206,11 @@ const getEcharts1 = (data: any) => {
         fontSize: 12, // 文字大小
         fontWeight: 'normal' // 文字粗细
       },
+      height: 20,
       left: '9%', //滚动条靠左侧的百分比
       bottom: 0,
       start: 0,//滚动条的起始位置
-      end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
+      end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
     }],
     yAxis: {
       type: 'value',
@@ -223,73 +263,12 @@ const getEcharts1 = (data: any) => {
       }
     ]
   };
-  Intance.setOption(option);
-}
-const chartmain_bing = ref()
-const getEcharts2 = (data: any) => {
-  const names = data.map((item: any) => item.name)
-  const Intance = echarts.init(chartmain_bing.value);
-  const option = {
-    title: {
-      text: '数据情况统计',
-      subtext: '',
-      left: 'right',
-      textStyle: {
-        color: '#fff',
-        fontSize: 12
-      }
-    },
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b} : {c} ({d}%)'
-    },
-    legend: {
-      // orient: 'vertical',
-      // top: 'middle',
-      type: 'scroll',
-      orient: 'vertical',
-      right: 10,
-      top: 40,
-      bottom: 20,
-      left: 'right',
-      data: names,
-      textStyle: {
-        color: '#fff',
-        fontSize: 12
-      }
-
-    },
-    grid: {
-      x: '-10%',
-      y: 40,
-      x2: 20,
-      y2: 20,
-    },
-    color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
-    series: [
-      {
-        type: 'pie',
-        radius: '65%',
-        center: ['45%', '50%'],
-        selectedMode: 'single',
-        data: data,
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  };
-
-  Intance.setOption(option);
+  echarts1Instance.setOption(option);
 }
 
 const chartmain_zhe = ref()
 const getEcharts3 = () => {
-  const Intance = echarts.init(chartmain_zhe.value);
+  echarts3Instance = echarts.init(chartmain_zhe.value);
   const xData = listData.value[0].dayline.map((item: any) => item.daynum + '日')
   const tooltips = listData.value.map((item: any) => item.groupname)
   const colors = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
@@ -375,10 +354,11 @@ const getEcharts3 = () => {
         fontSize: 12, // 文字大小
         fontWeight: 'normal' // 文字粗细
       },
+      height: 20,
       left: '9%', //滚动条靠左侧的百分比
       bottom: 0,
       start: 0,//滚动条的起始位置
-      end: 70 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
+      end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
     }],
     yAxis: {
       type: 'value',
@@ -402,118 +382,57 @@ const getEcharts3 = () => {
     },
     series: arr
   };
-
-
-
-
-  Intance.setOption(option);
+  echarts3Instance.setOption(option);
 }
 
-const sjRef = ref()
-const getEcharts4 = (data: any) => {
-  const names = data.map((item: any) => item.name)
-  const Intance = echarts.init(sjRef.value);
-  const option = {
-    title: {
-      text: '数据情况统计',
-      subtext: '',
-      left: 'right',
-      textStyle: {
-        color: '#fff',
-        fontSize: 12
-      }
-    },
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b} : {c} ({d}%)'
-    },
-    legend: {
-      // orient: 'vertical',
-      // top: 'middle',
-      type: 'scroll',
-      orient: 'vertical',
-      right: 10,
-      top: 40,
-      bottom: 20,
-      left: 'right',
-      data: names,
-      textStyle: {
-        color: '#fff',
-        fontSize: 12
-      },
-      // 滚动箭头样式（兼容写法）
-      pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
-      pageIconColor: '#0efdff', // 箭头颜色（核心配置，替代pageButtonItemStyle）
-      pageIconSize: 12, // 箭头大小
-      pageIconInactiveColor: '#666666', // 首尾不可滚动时的箭头颜色
-      pageTextStyle: {
-        color: '#0efdff' // 分页文字颜色（若显示数字分页）
-      },
-    },
-    grid: {
-      x: '-10%',
-      y: 40,
-      x2: 20,
-      y2: 20,
-    },
-    color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
-    series: [
-      {
-        type: 'pie',
-        radius: '65%',
-        center: ['45%', '50%'],
-        selectedMode: 'single',
-        data: data,
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: 'rgba(0, 0, 0, 0.5)'
-          }
-        }
-      }
-    ]
-  };
 
-
-  Intance.setOption(option);
+// 监听窗口大小变化，调整图表大小
+const handleResize = () => {
+  if (echarts1Instance) {
+    echarts1Instance.resize();
+  }
+  if (echarts3Instance) {
+    echarts3Instance.resize();
+  }
 }
 
-
 const getDataInfo = () => {
-  getallcount().then((res: any) => {
-    source.value.forEach(item => {
-      item.num = res.data.regStatAll[item.pre]
+  getallcount().then((res) => {
+    // 更新当月累计数据
+    sourceMonth.value.forEach(item => {
+      item.num = res.data.regStatAllMonth[item.pre]
     })
-
+    // 更新当年累计数据
+    sourceYear.value.forEach(item => {
+      item.num = res.data.regStatAllYear[item.pre]
+    })
+    // 委托机构当月送检标本占比
     listData.value = res.data.regStatHospMonth
-    // nextTick(() => {
-    //   // 数据更新后强制重绘
-    //   (document.querySelector('.Vue3SeamlessScroll') as any)?._init();
-    // })
-    const data2 = res.data.regStatStatus.map((item: any) => {
-      return {
-        name: item.dict_name,
-        value: item.sl,
-      }
-    })
-    const data4 = res.data.regStatSample.map((item: any) => {
-      return {
-        name: item.SampleTypeName,
-        value: item.sl,
-      }
-    })
+    // 当日送检样本情况
+    dayCounts.value.forEach(element => {
+      res.data.regStatStatus.forEach((item: any) => {
+        if (element.dict_name === item.dict_name) {
+          element.sl = item.sl
+          element.percent = item.percent
+        }
+      })
+    });
     getEcharts1(res.data.regStatMonth)
-    getEcharts2(data2)
     getEcharts3()
-    getEcharts4(data4)
   })
 }
 
 onMounted(() => {
   getDataInfo()
+  window.addEventListener('resize', handleResize);
 
+})
 
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  // 销毁ECharts实例
+  if (echarts1Instance) echarts1Instance.dispose();
+  if (echarts3Instance) echarts3Instance.dispose();
 })
 </script>