Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
commit
ce1e93e09e
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ const getOption = () => {
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "乘坐人次",
|
||||
name: "乘坐人次/次",
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,341 @@
|
|||
<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;
|
||||
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>
|
||||
Loading…
Reference in New Issue