From 37e4e88d68d12974bd63472710b7414bd5bf3e46 Mon Sep 17 00:00:00 2001
From: duanxiaohai <1812246227@qq.com>
Date: Thu, 20 Jun 2024 09:55:26 +0800
Subject: [PATCH] gx

---
 src/view/echart_analyze/FlipClock.vue |  54 ++++++++++--
 src/view/echarts_yl/eP2_2.vue         |  11 +--
 src/view/echarts_yl/eP3_2.vue         |  11 +--
 src/view/echarts_yl/pie.vue           |   1 -
 src/view/echarts_yl/pie2.vue          |  16 ++--
 src/view/echarts_yl/ylSMFW.vue        |   4 +-
 src/view/education.vue                |  24 +++++-
 src/view/hygiene.vue                  | 113 ++++++--------------------
 src/view/work.vue                     |  13 ++-
 9 files changed, 128 insertions(+), 119 deletions(-)

diff --git a/src/view/echart_analyze/FlipClock.vue b/src/view/echart_analyze/FlipClock.vue
index 84e344f..31c7520 100644
--- a/src/view/echart_analyze/FlipClock.vue
+++ b/src/view/echart_analyze/FlipClock.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flipbox">
     <div class="clock" id="clock">
-      <div v-for="(digit, index) in digits" :key="index" class="flip down">
+      <div v-for="(digit, index) in data.digits" :key="index" class="flip down">
         <div class="digital front number0"></div>
         <div class="digital back number1"></div>
       </div>
@@ -11,7 +11,14 @@
 </template>
 
 <script setup>
-import { onMounted, onBeforeMount, ref, reactive, defineProps } from "vue";
+import {
+  watch,
+  onMounted,
+  onBeforeMount,
+  ref,
+  reactive,
+  defineProps,
+} from "vue";
 
 const props = defineProps({
   list: {
@@ -23,6 +30,7 @@ const props = defineProps({
 });
 const data = reactive({
   list: [],
+  digits: [0, 0, 0, 0, 0],
 });
 
 class Flipper {
@@ -90,7 +98,7 @@ class Flipper {
 }
 
 function updateCounter(flippers, number) {
-  const strNumber = number.toString().padStart(5, "0");
+  const strNumber = number.toString().padStart(flippers.length, "0");
   for (let i = 0; i < flippers.length; i++) {
     const currentDigit = strNumber[i];
     const flipper = flippers[i];
@@ -99,11 +107,45 @@ function updateCounter(flippers, number) {
   }
 }
 
-const digits = ref([0, 0, 0, 0, 0]);
+// const digits = ref([0, 0, 0, 0, 0]); //数字位数
+watch(
+  () => props.list,
+  (newVal) => {
+    setTimeout(() => {
+      data.list = props.list;
+      data.digits = data.list.toString().split("").map(Number);
+      const flips = document.querySelectorAll(".flip");
+      const flipObjs = [];
 
+      for (let i = 0; i < flips.length; i++) {
+        flipObjs.push(
+          new Flipper({
+            node: flips[i],
+            frontText: "number0",
+            backText: "number0",
+          })
+        );
+        flipObjs[i].currentDigit = 0;
+      }
+
+      const randomNumbers = [2345, 6542, data.list]; //显示的数字
+      let index = 0;
+
+      const interval = setInterval(() => {
+        if (index >= randomNumbers.length) {
+          clearInterval(interval);
+        } else {
+          updateCounter(flipObjs, randomNumbers[index]);
+          index++;
+        }
+      }, 333); //变换的时间
+    }, 600);
+  }
+);
 onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;
+    data.digits = data.list.toString().split("").map(Number);
     const flips = document.querySelectorAll(".flip");
     const flipObjs = [];
 
@@ -118,7 +160,7 @@ onBeforeMount(() => {
       flipObjs[i].currentDigit = 0;
     }
 
-    const randomNumbers = [2345, 6542, data.list];
+    const randomNumbers = [2345, 6542, data.list]; //显示的数字
     let index = 0;
 
     const interval = setInterval(() => {
@@ -128,7 +170,7 @@ onBeforeMount(() => {
         updateCounter(flipObjs, randomNumbers[index]);
         index++;
       }
-    }, 333);
+    }, 333); //变换的时间
   }, 600);
 });
 </script>
diff --git a/src/view/echarts_yl/eP2_2.vue b/src/view/echarts_yl/eP2_2.vue
index b346ad0..b3ef77f 100644
--- a/src/view/echarts_yl/eP2_2.vue
+++ b/src/view/echarts_yl/eP2_2.vue
@@ -214,11 +214,12 @@ const getOption = () => {
 };
 
 const setChart = () => {
-  // Vue3中： 需要引入
-  var myChart = echarts.init(chart.value);
-
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(data.option);
+  if (chart.value) {
+        const myChart = echarts.init(chart.value);
+        myChart.setOption(data.option);
+      } else {
+        // console.error('chart is not defined');
+      }
 };
 
 // 使用生命钩子
diff --git a/src/view/echarts_yl/eP3_2.vue b/src/view/echarts_yl/eP3_2.vue
index b3da1a6..23aed97 100644
--- a/src/view/echarts_yl/eP3_2.vue
+++ b/src/view/echarts_yl/eP3_2.vue
@@ -365,11 +365,12 @@ const getOption = () => {
   };
 };
 const setChart = () => {
-  // Vue3中： 需要引入
-  var myChart = echarts.init(chart.value);
-
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(data.option);
+  if (chart.value) {
+        const myChart = echarts.init(chart.value);
+        myChart.setOption(data.option);
+      } else {
+        // console.error('chart is not defined');
+      }
 };
 
 // 使用生命钩子
diff --git a/src/view/echarts_yl/pie.vue b/src/view/echarts_yl/pie.vue
index 024c6d6..493f462 100644
--- a/src/view/echarts_yl/pie.vue
+++ b/src/view/echarts_yl/pie.vue
@@ -253,7 +253,6 @@ const getOption = () => {
 const setChart = () => {
   // Vue3中： 需要引入
   var myChart = echarts.init(chart.value);
-
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
 };
diff --git a/src/view/echarts_yl/pie2.vue b/src/view/echarts_yl/pie2.vue
index e298927..9eef877 100644
--- a/src/view/echarts_yl/pie2.vue
+++ b/src/view/echarts_yl/pie2.vue
@@ -2,7 +2,7 @@
   <div ref="chart" style="width: 100%; height: 260px"></div>
 </template>
 
-<script setup >
+<script setup>
 import { onBeforeMount, reactive, ref } from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
@@ -203,11 +203,12 @@ const getOption = () => {
   };
 };
 const setChart = () => {
-  // Vue3中： 需要引入
-  var myChart = echarts.init(chart.value);
-
-  // 使用刚指定的配置项和数据显示图表。
-  myChart.setOption(data.option);
+  if (chart.value) {
+    const myChart = echarts.init(chart.value);
+    myChart.setOption(data.option);
+  } else {
+    // console.error('chart is not defined');
+  }
 };
 
 // 使用生命钩子
@@ -225,5 +226,4 @@ onBeforeMount(() => {
 });
 </script>
 
-<style scoped>
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/src/view/echarts_yl/ylSMFW.vue b/src/view/echarts_yl/ylSMFW.vue
index 4a8253f..07b04f7 100644
--- a/src/view/echarts_yl/ylSMFW.vue
+++ b/src/view/echarts_yl/ylSMFW.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 340px; height: 250px"></div>
+  <div ref="chart" style="width: 340px; height: 240px"></div>
 </template>
 
 <script setup>
@@ -84,7 +84,7 @@ const getOption = () => {
       top: "18%",
       left: "3%",
       right: "6%",
-      bottom: "0%",
+      bottom: "5%",
       containLabel: true,
       color: "#ffffff",
       fontSize: 16,
diff --git a/src/view/education.vue b/src/view/education.vue
index 14a3e3f..a69c9ca 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -240,21 +240,33 @@
             <div>
               <div class="czrBox">
                 <div class="situation situation1"></div>
-                <edxs :list="data.whistleblower.culeTotal.data" :month="data.whistleblower.culeTotal.time"></edxs>
+                <edxs
+                  :list="data.whistleblower.culeTotal.data"
+                  :month="data.whistleblower.culeTotal.time"
+                ></edxs>
               </div>
               <div class="czrBox">
                 <div class="situation situation2"></div>
-                <edxs1 :list="data.whistleblower.gaCules.data" :month="data.whistleblower.gaCules.time"></edxs1>
+                <edxs1
+                  :list="data.whistleblower.gaCules.data"
+                  :month="data.whistleblower.gaCules.time"
+                ></edxs1>
               </div>
             </div>
             <div>
               <div class="czrBox">
                 <div class="situation situation3"></div>
-                <edxs2 :list="data.whistleblower.newCules.data" :month="data.whistleblower.newCules.time"></edxs2>
+                <edxs2
+                  :list="data.whistleblower.newCules.data"
+                  :month="data.whistleblower.newCules.time"
+                ></edxs2>
               </div>
               <div class="czrBox">
                 <div class="situation situation4"></div>
-                <edxs3 :list="data.whistleblower.jcgCules.data" :month="data.whistleblower.jcgCules.time"></edxs3>
+                <edxs3
+                  :list="data.whistleblower.jcgCules.data"
+                  :month="data.whistleblower.jcgCules.time"
+                ></edxs3>
               </div>
             </div>
           </div>
@@ -600,6 +612,10 @@ const autoScroll = () => {
   if (!isAutoScrolling) return;
 
   const mainEl = mainRef.value;
+  if (!mainEl) {
+    // console.error("mainRef is not defined");
+    return;
+  }
   mainEl.scrollTop += 1; // 每次滚动的距离
 
   if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
diff --git a/src/view/hygiene.vue b/src/view/hygiene.vue
index 4f48296..e91b0b7 100644
--- a/src/view/hygiene.vue
+++ b/src/view/hygiene.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="module">
     <div class="displayFlex left_bg">
-      <div
-        class="flex1"
-        style="flex: 0.5"
-      >
+      <div class="flex1" style="flex: 0.5">
         <div class="yd_title left_1">
           <div class="animate-border">
             <i></i>
@@ -49,10 +46,7 @@
         ></ePie2>
       </div>
 
-      <div
-        class="flex1"
-        style="margin-top: 10px"
-      >
+      <div class="flex1" style="margin-top: 10px">
         <div class="yd_title left_3">
           <div class="animate-border">
             <i></i>
@@ -60,15 +54,9 @@
           </div>
         </div>
         <div class="sm_title_1"></div>
-        <tnb
-          :list="data.lmb.tnbrs"
-          :year="data.lmb.year"
-        ></tnb>
+        <tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb>
         <div class="sm_title_2"></div>
-        <gxy
-          :list="data.lmb.gxyrs"
-          :year="data.lmb.year"
-        ></gxy>
+        <gxy :list="data.lmb.gxyrs" :year="data.lmb.year"></gxy>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -81,39 +69,24 @@
         </div>
         <div class="center_top">
           <div class="item">
-            <img
-              src="@/assets/images/hygiene/mjzrc.png"
-              class="left"
-            />
+            <img src="@/assets/images/hygiene/mjzrc.png" class="left" />
             <div class="right">
               <div class="right_top">门急诊人次</div>
-              <img
-                src="@/assets/images/hygiene/jt.png"
-                class="right_center"
-              />
+              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
               <div class="right_bottom">{{ data.mz.mjzrc }}</div>
             </div>
           </div>
           <div class="item">
-            <img
-              src="@/assets/images/hygiene/zyrs.png"
-              class="left"
-            />
+            <img src="@/assets/images/hygiene/zyrs.png" class="left" />
             <div class="right">
               <div class="right_top">住院人数</div>
-              <img
-                src="@/assets/images/hygiene/jt.png"
-                class="right_center"
-              />
+              <img src="@/assets/images/hygiene/jt.png" class="right_center" />
               <div class="right_bottom">{{ data.mz.zyrs }}</div>
             </div>
           </div>
         </div>
       </div>
-      <div
-        class="flex1"
-        style="flex: 0.3"
-      >
+      <div class="flex1" style="flex: 0.3">
         <div class="yd_title center_1">
           <div class="animate-border">
             <i></i>
@@ -124,10 +97,7 @@
           <div class="minTopPart">
             <div class="history2">
               <div class="va">{{ data.jkda.jdfs }}</div>
-              <img
-                src="@/assets/images/hygiene/shang_left.png"
-                alt=""
-              />
+              <img src="@/assets/images/hygiene/shang_left.png" alt="" />
               <img
                 class="moveImg"
                 src="@/assets/images/hygiene/shang_left2.png"
@@ -163,10 +133,7 @@
           </div>
         </div>
       </div>
-      <div
-        class="flex1"
-        style="margin-top: 20px"
-      >
+      <div class="flex1" style="margin-top: 20px">
         <div class="yd_title familyPlanning">
           <div class="animate-border">
             <i></i>
@@ -179,10 +146,7 @@
       </div>
     </div>
     <div class="displayFlex right_bg">
-      <div
-        class="flex1"
-        style="flex: 0.9"
-      >
+      <div class="flex1" style="flex: 0.9">
         <div class="yd_title mechanism">
           <div class="animate-border">
             <i></i>
@@ -192,54 +156,28 @@
         <div class="history">
           <div class="history1">
             <div class="va">{{ data.fyglrs.ycfrc }}</div>
-            <img
-              src="@/assets/images/hygiene/fy.png"
-              alt=""
-            />
-            <img
-              src="@/assets/images/hygiene/fy1.png"
-              alt=""
-              class="fyMove"
-            />
-            <img
-              src="@/assets/images/hygiene/fy.gif"
-              class="historyMoveImg"
-            />
+            <img src="@/assets/images/hygiene/fy.png" alt="" />
+            <img src="@/assets/images/hygiene/fy1.png" alt="" class="fyMove" />
+            <img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
             <div class="historyimg">孕产妇系统管理人数</div>
           </div>
           <div class="history1">
             <div class="va">{{ data.fyglrs.etrs }}</div>
-            <img
-              src="@/assets/images/hygiene/fy.png"
-              alt=""
-            />
-            <img
-              src="@/assets/images/hygiene/fy2.png"
-              alt=""
-              class="fyMove"
-            />
-            <img
-              src="@/assets/images/hygiene/fy.gif"
-              class="historyMoveImg"
-            />
+            <img src="@/assets/images/hygiene/fy.png" alt="" />
+            <img src="@/assets/images/hygiene/fy2.png" alt="" class="fyMove" />
+            <img src="@/assets/images/hygiene/fy.gif" class="historyMoveImg" />
             <div class="historyimg">0-6岁儿童系统管理人数</div>
           </div>
         </div>
       </div>
-      <div
-        class="flex1"
-        style="flex: 1.1"
-      >
+      <div class="flex1" style="flex: 1.1">
         <div class="yd_title service">
           <div class="animate-border">
             <i></i>
             <i></i>
           </div>
         </div>
-        <eP7
-          :list="data.jktj.jktjrs"
-          :year="data.jktj.year"
-        ></eP7>
+        <eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7>
       </div>
       <div class="flex1">
         <div class="yd_title last">
@@ -255,10 +193,7 @@
           @mouseenter="stopAutoScroll"
           @mouseleave="startAutoScroll"
         >
-          <div
-            class="item"
-            v-for="item in data.jkhd"
-          >
+          <div class="item" v-for="item in data.jkhd">
             {{ item.jkhd }}
           </div>
         </div>
@@ -316,6 +251,10 @@ const autoScroll = () => {
   if (!isAutoScrolling) return;
 
   const mainEl = mainRef.value;
+  if (!mainEl) {
+    // console.error("mainRef is not defined");
+    return;
+  }
   mainEl.scrollTop += 1; // 每次滚动的距离
 
   if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
@@ -812,7 +751,7 @@ const getData = async () => {
     flex-direction: column;
     align-items: center;
     position: relative;
-    .fyMove{
+    .fyMove {
       position: absolute;
       top: 60px;
       width: 60px;
diff --git a/src/view/work.vue b/src/view/work.vue
index fc9f9d2..19adcf4 100644
--- a/src/view/work.vue
+++ b/src/view/work.vue
@@ -176,7 +176,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeMount,onBeforeUnmount, computed } from "vue";
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+} from "vue";
 import eP1 from "./echarts_work/eP1.vue";
 import eP2 from "./echarts_work/eP2.vue";
 import eP3 from "./echarts_work/eP3.vue";
@@ -414,6 +421,10 @@ const autoScroll = () => {
   if (!isAutoScrolling) return;
 
   const mainEl = mainRef.value;
+  if (!mainEl) {
+    // console.error("mainRef is not defined");
+    return;
+  }
   mainEl.scrollTop += 1; // 每次滚动的距离
 
   if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {