大屏更改

src/views/regional/statistics/overview/css/index.css

@@ -8,13 +8,15 @@
   background: url(../images/bg2.jpg) no-repeat;
   background-size: 100% 100%;
   padding-top: 0rem;
-  padding: 0rem 3.125rem;
+  padding: 0rem 1.25rem 0 1.875rem;
-
+  overflow: hidden;
 }
 
-/*.conIn{
+.container {
   display: flex;
-	display: -webkit-flex;}*/
+  height: calc(100vh - 3.75rem);
+}
+
 .title {
   width: 100%;
   font-size: 1.875rem;
@@ -22,6 +24,7 @@
   color: #0efdff;
   text-align: center;
   font-weight: bold;
+  height: 2.1875rem;
 }
 
 .border_bg_leftTop {
@@ -70,20 +73,21 @@
 
 .leftMain {
   width: 75%;
-  float: left;
+  padding-right: .625rem;
-  padding-right: 1.5625rem;
   padding-top: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .rightMain {
   width: 25%;
-  float: left;
+
   padding-top: 2.5rem;
 }
 
 .leftMain_top {
   width: 100%;
-  padding-bottom: 1.5625rem;
+  margin-bottom: .625rem;
 }
 
 .leftMain_top ul {
@@ -142,14 +146,17 @@
 
 .leftMain_middle {
   width: 100%;
-  padding-bottom: 1.5625rem;
+  flex: 1;
   display: flex;
   display: -webkit-flex;
 }
 
 .leftMain_middle .leftMain_middle_left {
-  width: 60%;
+  width: 70%;
-  padding-right: 1.5625rem;
+  padding-right: .625rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn {
@@ -158,10 +165,12 @@
   min-height: 3.75rem;
   position: relative;
   padding: .625rem;
+  flex: 1;
 }
 
 .leftMain_middle_leftIn_zhe {
   margin-top: 2vh;
+  flex: 1;
 }
 
 .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3 {
@@ -172,18 +181,21 @@
 }
 
 .leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge {
-  min-height: 12.5rem;
+  min-height: 0;
+  height: calc(100% - 2.1875rem);
 }
 
 .leftMain_middle .leftMain_middle_right {
-  width: 40%;
+  width: 30%;
+  height: 100%;
+  position: relative;
+  border: 0.125rem solid rgba(14, 253, 255, 0.5);
+
 }
 
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn {
-  border: 0.125rem solid rgba(14, 253, 255, 0.5);
   width: 100%;
-  min-height: 3.75rem;
+
-  position: relative;
   padding: .625rem;
 }
 
@@ -201,8 +213,6 @@
 /*左边中间部分排行榜*/
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
   width: 100%;
-  height: 58vh;
-  overflow-y: auto;
 }
 
 /* .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul{
@@ -215,14 +225,15 @@
   display: -webkit-flex;
   align-items: center;
   color: #fff;
-  font-size: 0.9375rem;
+  font-size: 1.125rem;
+  font-weight: 700;
   height: 2.5rem;
 }
 
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
   width: 30%;
   position: relative;
-  padding-left: 1.25rem;
+  padding-left: .625rem;
 }
 
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot {
@@ -258,8 +269,7 @@
   background: #05d1fc;
 }
 
-.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {
+.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {}
- }
 
 .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
   width: 50%;
@@ -404,22 +414,18 @@
 
 /*右边部分*/
 .rightMain .rightMain_top {
+  border: 0.125rem solid rgba(14, 253, 255, 0.5);
   width: 100%;
-  padding-bottom: 1.5625rem;
+  position: relative;
+  height: 100%;
 }
 
 .rightMain .rightMain_topIn {
-  border: 0.125rem solid rgba(14, 253, 255, 0.5);
+
-  width: 100%;
-  min-height: 3.75rem;
-  position: relative;
   padding: .625rem;
 }
 
-.proportion {
+.proportion {}
-  height: 78vh;
-  overflow-y: auto;
-}
 
 
 .proportion ul li .liIn {
@@ -427,14 +433,15 @@
   display: -webkit-flex;
   align-items: center;
   color: #fff;
-  font-size: 0.9375rem;
+  font-size: 1.125rem;
-  height: 2.8125rem;
+  font-weight: 700;
+  margin-bottom: .625rem;
  }
 
 .proportion ul li .liIn .liIn_left {
-  width: 43%;
+  width: 50%;
   position: relative;
-  padding-left: 1.25rem;
+  padding-left: .625rem;
 }
 
 .proportion ul li .liIn .liIn_left .bot {
@@ -451,7 +458,7 @@
 }
 
 .proportion ul li .liIn .liIn_line {
-  width: 40%;
+  width: 32%;
   height: 1.25rem;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 125rem;
@@ -470,7 +477,7 @@
 .line_lineIn .per {
   position: absolute;
   top: 0;
-  left: 50%;
+  left: 30%;
 }
 
 
@@ -604,34 +611,36 @@
 /* 适配你深蓝色科技风的滚动条 */
 /* 整体滚动条容器 */
 ::-webkit-scrollbar {
-  width: 10px; /* 控制滚动条宽度，和你图中一致 */
+  width: 10px;
+  /* 控制滚动条宽度，和你图中一致 */
   height: 10px;
 }
 
 /* 滚动条轨道（背景） */
 ::-webkit-scrollbar-track {
-  background: rgba(0, 150, 255, 0.1); /* 半透明蓝底，和界面融合 */
+  background: rgba(0, 150, 255, 0.1);
+  /* 半透明蓝底，和界面融合 */
   border-radius: 4px;
 }
 
 /* 滚动条滑块 */
 ::-webkit-scrollbar-thumb {
-  background: linear-gradient(
+  background: linear-gradient(to bottom,
-    to bottom,
+      #00d4ff,
-    #00d4ff, /* 顶部亮青色，和你的条形颜色呼应 */
+      /* 顶部亮青色，和你的条形颜色呼应 */  
-    #0099cc  /* 底部深蓝色，和背景协调 */
+      #0099cc
+      /* 底部深蓝色，和背景协调 */
     );
   border-radius: 4px;
-  box-shadow: 0 0 6px rgba(0, 212, 255, 0.5); /* 发光效果，增强科技感 */
+  box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
+  /* 发光效果，增强科技感 */
 }
 
 /* 滑块 hover 效果 */
 ::-webkit-scrollbar-thumb:hover {
-  background: linear-gradient(
+  background: linear-gradient(to bottom,
-    to bottom,
       #00f0ff,
-    #00aadd
+      #00aadd);
-  );
   box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
 }
 

src/views/regional/statistics/overview/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="bg">
+    <div class="back-btn" @click="goBack">
+      <img src="@/assets/images/back.png" alt="">
+    </div>
     <div class="title">区域检验数据中心</div>
+    <div class="container">
       <div class="leftMain">
         <div class="leftMain_top">
           <div class="leftMain_topIn">
@@ -40,16 +44,15 @@
           <div class="leftMain_middle_left">
             <div class="leftMain_middle_leftIn">
               <h3>委托机构当月送检标本数量</h3>
-            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
+              <div class="biaoge" style="width:100%;  " 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>
               <span class="border_bg_rightBottom"></span>
             </div>
             <div class="leftMain_middle_leftIn leftMain_middle_leftIn_zhe">
-            <h3>近一个月送检标本数量趋势图</h3>
+              <h3>近一年送检标本数量趋势图</h3>
-            <div class="biaoge" style="width:100%; height:25vh" ref="chartmain_zhe" id="chartmain_zhe"></div>
+              <div class="biaoge" style="width:100%; " 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>
@@ -94,8 +97,6 @@
             <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>
@@ -107,7 +108,6 @@
                     <p class="num">{{ item.groupsum }}</p>
                   </div>
                 </li>
-              <!-- </Vue3SeamlessScroll> -->
               </ul>
             </div>
             <span class="border_bg_leftTop"></span>
@@ -117,16 +117,14 @@
           </div>
         </div>
       </div>
-    <div style="clear:both;"></div>
+    </div>
   </div>
 
 </template>
 
 <script setup lang="ts">
 import * as echarts from 'echarts';
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
 import { getallcount } from '@/api/regional'
-import { comDict } from "@/utils/dict";
 const sourceMonth = ref([
   { name: '区域机构', num: 0, unit: '家', pre: 'jgs' },
   { name: '检验人数', num: 0, unit: '人', pre: 'rs' },
@@ -150,83 +148,45 @@ const chartmain = ref()
 
 let echarts1Instance: echarts.ECharts | null = null
 let echarts3Instance: echarts.ECharts | null = null
-const getEcharts1 = (data: any) => {
+const getEcharts1 = (data) => {
-  echarts1Instance = echarts.init(chartmain.value);
+  const dom = chartmain.value;
+
+  if (!echarts1Instance) {
+    echarts1Instance = echarts.init(dom);
+  }
   var dataAxis = data.map((item: any) => item.daynum + '日')
   var data = data.map((item: any) => item.sl)
   const option = {
-    title: {
+    title: { text: '' },
-      text: '',
+    grid: { x: 30, y: 30, x2: 10, y2: 20 },
-      subtext: ''
-    },
-    grid: {
-      x: 40,
-      y: 40,
-      x2: 20,
-      y2: 50,
-    },
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
+      show: false,
+      backgroundColor: 'rgba(0,18,36,0.9)',
+      textStyle: { color: '#fff', fontSize: 14 },
+      padding: [12, 16],
+      borderWidth: 1,
+      borderColor: '#0efdff'
+    },
+    label: {
+      show: true,
+      color: '#fff',
+      position: 'top',
+      fontSize: 14,
+      fontWeight: 700,
     },
     xAxis: {
       data: dataAxis,
-      axisLabel: {
+      axisLabel: { interval: 0, color: '#fff', fontSize: 12 },
-        /*inside: true,*/
+      axisTick: { show: false },
-        interval: 0,
+      axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle: { color: '#fff' } },
-        color: '#fff',
-        fontSize: 12
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        symbol: ['none', 'arrow'],
-        symbolOffset: 12,
-        lineStyle: {
-          color: '#fff',
-        }
-      },
-      lineStyle: {
-        color: '#fff',
-      },
       z: 10
     },
-    dataZoom: [{
-      type: 'slider',
-      show: true, //flase直接隐藏图形
-      xAxisIndex: [0],
-      textStyle: {
-        color: '#0efdff', // 文字颜色（如白色，根据主题调整）
-        fontSize: 12, // 文字大小
-        fontWeight: 'normal' // 文字粗细
-      },
-      height: 20,
-      left: '9%', //滚动条靠左侧的百分比
-      bottom: 0,
-      start: 0,//滚动条的起始位置
-      end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
-    }],
     yAxis: {
-      type: 'value',
+      type: 'value', name: '单位：个', minInterval: 1,
-      name: '单位：个',
+      axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle: { color: '#fff' } },
-      axisLine: {
+      axisTick: { show: false },
-        show: true,
+      axisLabel: { color: '#fff', fontSize: 12 }
-        symbol: ['none', 'arrow'],
-        symbolOffset: 12,
-        lineStyle: {
-          color: '#fff',
-        }
-      },
-      minInterval: 1,
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        color: '#fff',
-        fontSize: 12
-
-      }
     },
 
 
@@ -263,16 +223,21 @@ const getEcharts1 = (data: any) => {
 }
 
 const chartmain_zhe = ref()
-const getEcharts3 = () => {
+const getEcharts3 = (data) => {
-  echarts3Instance = echarts.init(chartmain_zhe.value);
+  const dom = chartmain_zhe.value;
-  const xData = listData.value[0].dayline.map((item: any) => item.daynum + '日')
+
-  const tooltips = listData.value.map((item: any) => item.groupname)
+  if (!echarts3Instance) {
+    echarts3Instance = echarts.init(dom);
+  }
+  const xData = data[0].dayline.map((item: any) => item.month + '月')
+  const tooltips = data.map((item: any) => item.groupname)
   const colors = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
     '#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700', '#6b8e23', '#4ea397', '#3cb371', '#b8860b']
-  const arr = listData.value.map((item: any, i: number) => {
+  const arr = data.map((item: any, i: number) => {
     return {
       name: item.groupname,
       type: 'line',
+      symbol: 'circle',
       data: item.dayline.map((v: any) => v.sl),
       itemStyle: {
         color: colors[i],
@@ -294,7 +259,8 @@ const getEcharts3 = () => {
       type: 'scroll', // 开启滚动
       textStyle: {
         color: '#fff', // 文字颜色（保持与你的主题一致）
-        fontSize: 12
+        fontSize: 12,
+        lineHeight: 15,
       },
       // 滚动箭头样式（兼容写法）
       pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
@@ -306,12 +272,7 @@ const getEcharts3 = () => {
       },
       data: tooltips
     },
-    grid: {
+    grid: { x: 30, y: 50, x2: 20, y2: 20 },
-      x: 40,
-      y: 40,
-      x2: 20,
-      y2: 50,
-    },
     toolbox: {
       feature: {
         //saveAsImage: {}
@@ -341,21 +302,7 @@ const getEcharts3 = () => {
       data: xData
     },
 
-    dataZoom: [{
+
-      type: 'slider',
-      show: true, //flase直接隐藏图形
-      xAxisIndex: [0],
-      textStyle: {
-        color: '#0efdff', // 文字颜色（如白色，根据主题调整）
-        fontSize: 12, // 文字大小
-        fontWeight: 'normal' // 文字粗细
-      },
-      height: 20,
-      left: '9%', //滚动条靠左侧的百分比
-      bottom: 0,
-      start: 0,//滚动条的起始位置
-      end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
-    }],
     yAxis: {
       type: 'value',
       name: '单位：个',
@@ -405,41 +352,51 @@ const getDataInfo = () => {
     // 委托机构当月送检标本占比
     listData.value = res.data.regStatHospMonth
     // 当日送检样本情况
-    dayCounts.value.forEach(element => {
+    // 匹配流程数量&百分比
-      res.data.regStatStatus.forEach((item: any) => {
+    const baseNum = res.data.regStatStatusTotal['检验申请'] || 0
-        if (element.dict_name == item.dict_name) {
+    dayCounts.value = Object.entries(res.data.regStatStatusTotal).map(([dict_name, sl]) => {
-          element.sl = item.sl
+      if (dict_name === '检验申请') {
-          element.percent = item.percent
+        return { dict_name, sl, percent: '100%' }
       }
-      })
+      let p = 0
-    });
+      if (baseNum > 0) {
-    getEcharts1(res.data.regStatMonth)
+        p = (sl as number) / baseNum * 100
-    getEcharts3()
-  })
       }
-
-onMounted(() => {
-  comDict('ZT').then((res) => {
-    dayCounts.value = res.ZT.value.map((item: any) => {
       return {
-        dict_name: item.label,
+        dict_name,
-        sl: 0,
+        sl,
-        percent: '0%'
+        percent: p.toFixed(2) + '%'
       }
     })
-    getDataInfo()
+    getEcharts1(res.data.regStatMonth || [])
+    getEcharts3(res.data.regStatHospYear || [])
+
   })
+}
 
-
+// 返回页面方法
+const goBack = () => {
+  window.history.back()
+}
+let dataRefreshTimer: any = null;
+onMounted(() => {
+  getDataInfo()
+  dataRefreshTimer = setInterval(getDataInfo, 60000);
   window.addEventListener('resize', handleResize);
 
 })
 
 onUnmounted(() => {
+  if (dataRefreshTimer) {
+    clearInterval(dataRefreshTimer);
+    dataRefreshTimer = null;
+  }
   window.removeEventListener('resize', handleResize);
   // 销毁ECharts实例
   if (echarts1Instance) echarts1Instance.dispose();
   if (echarts3Instance) echarts3Instance.dispose();
+  echarts1Instance = null;
+  echarts3Instance = null;
 })
 </script>
 
@@ -448,3 +405,17 @@ onUnmounted(() => {
 @import './css/index.css';
 @import './css/public.css';
 </style>
+<style lang="scss" scoped>
+.back-btn {
+  position: fixed;
+  top: 1.04vw;
+  right: 1.04vw;
+  cursor: pointer;
+  z-index: 99;
+
+  img {
+    width: 3.125rem;
+    height: 3.125rem;
+  }
+}
+</style>