gx

src/view/echart_analyze/FlipClock.vue

@@ -30,7 +30,7 @@ const props = defineProps({
 });
 const data = reactive({
   list: [],
-  digits: [0, 0, 0, 0, 0],
+  digits: [0, 0, 0, 0, 0], //数字位数
 });
 
 class Flipper {
@@ -107,41 +107,52 @@ function updateCounter(flippers, number) {
   }
 }
 
-// const digits = ref([0, 0, 0, 0, 0]); //数字位数
+// watch(
-watch(
+//   () => props.list,
-  () => props.list,
+//   (newVal) => {
-  (newVal) => {
+//     setTimeout(() => {
-    setTimeout(() => {
+//       data.list = props.list;
-      data.list = props.list;
+//       data.digits = data.list.toString().split("").map(Number);
-      data.digits = data.list.toString().split("").map(Number);
+//       const flips = document.querySelectorAll(".flip");
-      const flips = document.querySelectorAll(".flip");
+//       const flipObjs = [];
-      const flipObjs = [];
 
-      for (let i = 0; i < flips.length; i++) {
+//       for (let i = 0; i < flips.length; i++) {
-        flipObjs.push(
+//         flipObjs.push(
-          new Flipper({
+//           new Flipper({
-            node: flips[i],
+//             node: flips[i],
-            frontText: "number0",
+//             frontText: "number0",
-            backText: "number0",
+//             backText: "number0",
-          })
+//           })
-        );
+//         );
-        flipObjs[i].currentDigit = 0;
+//         flipObjs[i].currentDigit = 0;
-      }
+//       }
+//       // 生成两个递增的随机数
+//       const generateIncrementingRandomNumbers = (min, max) => {
+//         const num1 = Math.floor(Math.random() * (max - min + 1)) + min;
+//         const num2 = Math.floor(Math.random() * (max - num1 + 1)) + num1 + 1;
+//         return [num1, num2];
+//       };
 
-      const randomNumbers = [2345, 6542, data.list]; //显示的数字
+//       // 生成的随机数范围
-      let index = 0;
+//       const [num1, num2] = generateIncrementingRandomNumbers(
+//         1000,
+//         data.list - 1
+//       );
 
-      const interval = setInterval(() => {
+//       const randomNumbers = [num1, num2, data.list]; //显示的数字
-        if (index >= randomNumbers.length) {
+//       let index = 0;
-          clearInterval(interval);
+
-        } else {
+//       const interval = setInterval(() => {
-          updateCounter(flipObjs, randomNumbers[index]);
+//         if (index >= randomNumbers.length) {
-          index++;
+//           clearInterval(interval);
-        }
+//         } else {
-      }, 333); //变换的时间
+//           updateCounter(flipObjs, randomNumbers[index]);
-    }, 600);
+//           index++;
-  }
+//         }
-);
+//       }, 333); //变换的时间
+//     }, 600);
+//   }
+// );
 onBeforeMount(() => {
   setTimeout(() => {
     data.list = props.list;

src/view/echarts_education/edXS2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart" style="width: 100%; height: 210px"></div>
+  <div ref="chart" style="width: 100%; height: 270px"></div>
 </template>
 
 <script setup >
@@ -35,7 +35,7 @@ const getOption = () => {
     grid: {
       top: "5%",
       left: "1%",
-      right: "10%",
+      right: "3%",
       bottom: "3%",
       containLabel: true,
     },

src/view/education.vue

@@ -237,7 +237,7 @@
       <div class="flex1">
         <div style="display: flex; justify-content: center">
           <div class="czr-bj">
-            <div>
+            <!-- <div>
               <div class="czrBox">
                 <div class="situation situation1"></div>
                 <edxs
@@ -252,23 +252,40 @@
                   :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>
             </div>
-            <div>
+            <div class="clue">
-              <div class="czrBox">
+              <div class="clueBox">
-                <div class="situation situation3"></div>
+                <div class="clueTitle">预警线索总数</div>
-                <edxs2
+                <div class="clueNum">355</div>
-                  :list="data.whistleblower.newCules.data"
+                <div class="clueUnit">条</div>
-                  :month="data.whistleblower.newCules.time"
-                ></edxs2>
               </div>
-              <div class="czrBox">
+              <div class="clueBox">
+                <div class="clueTitle">公安协同 <br />处置线索</div>
+                <div class="clueNum">355</div>
+                <div class="clueUnit">条</div>
+              </div>
+              <div class="clueBox">
+                <div class="clueTitle">检察官处置线索</div>
+                <div class="clueNum">355</div>
+                <div class="clueUnit">条</div>
+              </div>
+            </div>
+            <!-- <div class="czrBox">
                 <div class="situation situation4"></div>
                 <edxs3
                   :list="data.whistleblower.jcgCules.data"
                   :month="data.whistleblower.jcgCules.time"
                 ></edxs3>
-              </div>
+              </div> -->
-            </div>
+            <!-- </div> -->
           </div>
         </div>
         <!-- <eBubble></eBubble> -->
@@ -1096,6 +1113,7 @@ onMounted(() => {
 
 .flex11 {
   padding: 12px 0;
+  margin-top: 54px;
 }
 
 .czr-sl {
@@ -1247,6 +1265,7 @@ onMounted(() => {
   padding-top: 20px;
   display: flex;
   justify-content: space-around;
+  flex-direction: column;
 
   // height: calc(100% - 26px);
   // height: 200px;
@@ -1256,7 +1275,8 @@ onMounted(() => {
 
   .czrBox {
     // height: 104px;
-    width: 280px;
+    // width: 280px;
+    width: 100%;
     min-height: 310px;
     display: flex;
     flex-direction: column;
@@ -1270,6 +1290,62 @@ onMounted(() => {
       padding-right: 18px;
     }
   }
+  .clue {
+    display: flex;
+    align-items: center;
+    margin-top: 37px;
+    .clueBox {
+      width: 171px;
+      height: 173px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      background-image: url(@/assets/eduImg/xxBJ.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+
+      .clueTitle {
+        margin-top: 22px;
+        font-family: PangMenZhengDao, PangMenZhengDao;
+        font-weight: normal;
+        font-size: 20px;
+        color: #ffffff;
+        letter-spacing: 1px;
+        text-shadow: 0px 2px 4px #3575f9;
+        text-align: center;
+        font-style: normal;
+      }
+      .clueNum {
+        margin-top: 42px;
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 32px;
+        color: #ffffff;
+        letter-spacing: 1px;
+        text-align: center;
+        font-style: normal;
+      }
+      .clueUnit {
+        margin-top: 4px;
+        font-weight: 500;
+        font-size: 16px;
+        color: #9cdeff;
+        text-align: center;
+        font-style: normal;
+        font-family: PingFangSC, PingFang SC;
+      }
+    }
+    .clueBox:nth-child(2) {
+      margin: 0 20px;
+      .clueTitle {
+        margin-top: 10px;
+      }
+      .clueNum {
+        margin-top: 28px;
+      }
+    }
+  }
 
   .situation {
     width: 196px;