gx

src/view/analyze.vue

@@ -58,13 +58,14 @@
         </div>
         <div class="minTopTitle"></div>
         <div class="minTopNum">
-          <div
+          <!-- <div
             class="numItem"
             v-for="(item, index) in minData.minTop"
             :key="index"
           >
             {{ item }}
-          </div>
+          </div> -->
+          <FlipClock :list="minData.minTop"></FlipClock>
         </div>
         <div style="overflow: hidden; margin-top: 20px">
           <div class="minPie">
@@ -155,6 +156,7 @@ import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
 import edxs from "./echart_analyze/edXS.vue";
 import eP2 from "./echart_analyze/eP2.vue";
 import ylXZZC from "./echart_analyze/ylXZZC.vue";
+import FlipClock from "./echart_analyze/FlipClock.vue";
 
 import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
 import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
@@ -267,7 +269,8 @@ const data = reactive({
   zccs2: ["100", "130", "220"], //一码通
 });
 const minData = reactive({
-  minTop: ["4", "9", "1", "6", "2", "人"],
+  minTop: 49162,
+  minTop1: ["4", "9", "1", "6", "2", "人"],
   minPieData1: {
     wfgz: "1500",
     xstp: "1610",

src/view/echart_analyze/FlipClock.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="flipbox">
+    <div class="clock" id="clock">
+      <div v-for="(digit, index) in digits" :key="index" class="flip down">
+        <div class="digital front number0"></div>
+        <div class="digital back number1"></div>
+      </div>
+    </div>
+    <div class="flip1">人</div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeMount, ref, reactive, defineProps } from "vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const data = reactive({
+  list: [],
+});
+
+class Flipper {
+  constructor(config) {
+    this.config = Object.assign(
+      {
+        node: null,
+        frontText: "number0",
+        backText: "number1",
+        duration: 200,
+      },
+      config
+    );
+
+    this.nodeClass = {
+      flip: "flip",
+      front: "digital front",
+      back: "digital back",
+    };
+
+    this.frontNode = this.config.node.querySelector(".front");
+    this.backNode = this.config.node.querySelector(".back");
+    this.isFlipping = false;
+    this._init();
+  }
+
+  _init() {
+    this._setFront(this.config.frontText);
+    this._setBack(this.config.backText);
+  }
+
+  _setFront(className) {
+    this.frontNode.setAttribute(
+      "class",
+      this.nodeClass.front + " " + className
+    );
+  }
+
+  _setBack(className) {
+    this.backNode.setAttribute("class", this.nodeClass.back + " " + className);
+  }
+
+  _flip(type, front, back) {
+    if (this.isFlipping) return;
+
+    this.isFlipping = true;
+    this._setFront(front);
+    this._setBack(back);
+
+    let flipClass = this.nodeClass.flip;
+    if (type === "down") flipClass += " down";
+
+    this.config.node.setAttribute("class", flipClass + " go");
+
+    setTimeout(() => {
+      this.config.node.setAttribute("class", flipClass);
+      this.isFlipping = false;
+      this._setFront(back);
+    }, this.config.duration);
+  }
+
+  flipDown(front, back) {
+    this._flip("down", front, back);
+  }
+}
+
+function updateCounter(flippers, number) {
+  const strNumber = number.toString().padStart(5, "0");
+  for (let i = 0; i < flippers.length; i++) {
+    const currentDigit = strNumber[i];
+    const flipper = flippers[i];
+    flipper.flipDown(`number${flipper.currentDigit}`, `number${currentDigit}`);
+    flipper.currentDigit = currentDigit;
+  }
+}
+
+const digits = ref([0, 0, 0, 0, 0]);
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.list = props.list;
+    console.log(data.list, 666);
+    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);
+});
+</script>
+
+<style scoped>
+.flip {
+  display: inline-block;
+  position: relative;
+  width: 66px;
+  height: 100px;
+  line-height: 100px;
+  border: solid 2px rgba(0, 183, 255, 1);
+  border-radius: 2px;
+  background: #fff;
+  font-size: 46px;
+  color: #fff;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  font-family: "Helvetica Neue";
+  margin-right: 5px;
+}
+
+.flipbox {
+  display: flex;
+}
+
+.flip1 {
+  display: inline-block;
+  width: 66px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 46px;
+  text-align: center;
+  font-family: "Helvetica Neue";
+  color: #fff;
+  background: rgba(7, 91, 123, 1);
+  border: solid 2px rgba(0, 183, 255, 1);
+}
+
+.flip .digital:before,
+.flip .digital:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.flip .digital:before {
+  top: 0;
+  bottom: 50%;
+  border-radius: 2px 2px 0 0;
+  background: rgba(7, 91, 123, 1);
+}
+
+.flip .digital:after {
+  top: 50%;
+  bottom: 0;
+  border-radius: 0 0 2px 2px;
+  line-height: 0;
+  background: rgba(3, 150, 187, 1);
+}
+
+.flip.down .front:before {
+  z-index: 3;
+}
+
+.flip.down .back:after {
+  z-index: 2;
+  transform-origin: 50% 0%;
+  transform: perspective(160px) rotateX(180deg);
+}
+
+.flip.down .front:after,
+.flip.down .back:before {
+  z-index: 1;
+}
+
+.flip.down.go .front:before {
+  transform-origin: 50% 100%;
+  animation: frontFlipDown 0.6s ease-in-out both;
+  box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.flip.down.go .back:after {
+  animation: backFlipDown 0.6s ease-in-out both;
+}
+
+.flip.up .front:after {
+  z-index: 3;
+}
+
+.flip.up .back:before {
+  z-index: 2;
+  transform-origin: 50% 100%;
+  transform: perspective(160px) rotateX(-180deg);
+}
+
+.flip.up .front:before,
+.flip.up .back:after {
+  z-index: 1;
+}
+
+.flip.up.go .front:after {
+  transform-origin: 50% 0;
+  animation: frontFlipUp 0.6s ease-in-out both;
+  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
+  backface-visibility: hidden;
+}
+
+.flip.up.go .back:before {
+  animation: backFlipUp 0.6s ease-in-out both;
+}
+
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+}
+
+@keyframes backFlipDown {
+  0% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(180deg);
+  }
+}
+
+@keyframes backFlipUp {
+  0% {
+    transform: perspective(160px) rotateX(-180deg);
+  }
+
+  100% {
+    transform: perspective(160px) rotateX(0deg);
+  }
+}
+
+.flip .number0:before,
+.flip .number0:after {
+  content: "0";
+}
+
+.flip .number1:before,
+.flip .number1:after {
+  content: "1";
+}
+
+.flip .number2:before,
+.flip .number2:after {
+  content: "2";
+}
+
+.flip .number3:before,
+.flip .number3:after {
+  content: "3";
+}
+
+.flip .number4:before,
+.flip .number4:after {
+  content: "4";
+}
+
+.flip .number5:before,
+.flip .number5:after {
+  content: "5";
+}
+
+.flip .number6:before,
+.flip .number6:after {
+  content: "6";
+}
+
+.flip .number7:before,
+.flip .number7:after {
+  content: "7";
+}
+
+.flip .number8:before,
+.flip .number8:after {
+  content: "8";
+}
+
+.flip .number9:before,
+.flip .number9:after {
+  content: "9";
+}
+
+.clock {
+  text-align: center;
+}
+</style>