数字滚动效果

src/assets/css/home.scss

@@ -31,7 +31,7 @@
     padding: 10px;
     padding-left: 20px;
     border-radius: 10px;
-    background: rgba(255, 255, 255, 0.80);
+    background: rgb(255, 255, 255);
     width: 206px;
     height: 165px;
     display: none;

src/components/CircleProgress.vue

@@ -1,7 +1,10 @@
 <template>
     <div>
         <div class="number" v-if="textPosition == 'top'">
-            {{ showProgress }} <span> (个)</span>
+            <ul class="flex">
+                <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" />
+                <span> (人)</span>
+            </ul>
         </div>
     </div>
     <div class="progress" :style="{ width, height }">
@@ -15,14 +18,18 @@
             <slot></slot>
         </div>
     </div>
+
     <div class="bottomNumber" v-if="textPosition == 'bottom'">
-        {{ showProgress }} <span v-if="showProgress
-            > 1000">(人)</span>
-        <span v-else>(节)</span>
+        <ul class="flex">
+            <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" />
+            <span> (人)</span>
+        </ul>
+
     </div>
 </template>
 <script setup lang="ts">
-import { ref, toRefs, watch, onMounted } from 'vue';
+import { ref, computed, toRefs, watch, onMounted, nextTick } from 'vue';
+import ScrollNum from './roll.vue'
 
 const props = defineProps({
     targetValue: {
@@ -51,29 +58,49 @@ const props = defineProps({
 const { height, width, color, targetValue, textPosition } = toRefs(props);
 
 let showProgress = ref<number>(0);
-const addData = () => {
-    if (targetValue.value === 0) return;
-    let timer = setInterval(() => {
-        if (targetValue.value === showProgress.value) {
-            clearInterval(timer), timer == null;
-            return;
+const numArr = computed(() => {
+    const str = String(targetValue.value)
+    let arr = <any>[]
+    for (let i = 0; i < str.length; i++) {
+        arr.push(parseInt(str[i]))
+    }
+    return arr
+})
+
+const progressValue = ref<number>(0);
+let timer = ref<any>(null)
+const circleValue = () => {
+
+
+    if (textPosition.value == "top") {
+        if (progressValue.value = 360) {
+            timer.value = null
+            return
         }
-        // showProgress.value = showProgress.value + 200
-        // console.log(showProgress.value)
-        // console.log("targetValue.value", targetValue.value)
-        // showProgress.value = showProgress.value + 6
-        ++showProgress.value;
+        (timer as any) = setInterval(() => {
+            progressValue.value += 10
+        }, 2000)
+    } else {
+        if (progressValue.value = 120) {
+            timer.value = null
+            return
+        }
+        (timer as any) = setInterval(() => {
+            progressValue.value += 10
+        }, 2000)
+    }
+}
+
 
 
-    }, 10);
-};
 onMounted(() => {
-    addData();
-});
-// const progressValue = ref<number>((showProgress.value / 360) * 250);
-const progressValue = ref(0)
-watch(showProgress, (newValue: number) => {
-    progressValue.value = 360;
+    circleValue()
+})
+
+// const progressValue = ref(0)
+watch(textPosition, (newValue) => {
+    console.log("监听一下现在的位置", newValue)
+    // progressValue.value = 360;
 });
 </script>
 <style lang="scss" scoped>
@@ -113,12 +140,24 @@ watch(showProgress, (newValue: number) => {
     }
 }
 
-.bottomNumber {
-    font-size: 14px;
-    font-weight: bold;
+
+
+ul {
+    padding: 0;
+    margin: 0
+}
+
+.flex {
+    display: flex;
+    // border: 1px solid darkblue;
+    box-sizing: border-box;
+    // width: 100px;
+    align-items: center;
+    text-align: center;
 
     span {
         font-size: 12px;
+        margin-left: 4px;
     }
 }
 </style>

src/components/home.vue

@@ -4,7 +4,7 @@
             <img :src="headImg" alt="" />
         </div>
         <el-container>
-            <left></left>
+            <Left></Left>
             <right></right>
             <div ref="linedomRef" style="width:1px;height:1px;position: absolute;z-index: 228;background:#ccc;">
             </div>
@@ -45,7 +45,7 @@ import { getClassDetail } from '../request/api.js'
 import {
     callUIInteraction,
 } from "../webrtcVideo";
-import axios from 'axios';
+
 
 export default ({
     name: 'Histogram',

src/components/left copy.vue

@@ -1,333 +0,0 @@
-<template>
-    <div class="container">
-        <div class="header">
-            <img src="../assets/img/head.png" alt="" />
-        </div>
-        <el-container>
-            <!-- <left></left>
-            <right></right> -->
-            <div ref="linedomRef" style="width: 50px;height: 50px;background-color: #f00;position: absolute;z-index: 228;">
-            </div>
-
-        </el-container>
-
-
-        <el-popover placement="right" v-model:visible="visible" :width="260" :virtual-ref="triggerRef" trigger="click"
-            virtual-triggering>
-            <div class="model-detail" ref="popoverRef" id="popoverRef">
-                <span><span class="title">设备名称: </span>{{ clickData.value && clickData.value.status }}</span>
-                <span><span class="title">设备状态: </span>{{ clickData.value && clickData.value.classes }}</span>
-                <span><span class="title">位置: </span>{{ clickData.value && clickData.value.course }}</span>
-                <span><span class="title">型号: </span>{{ clickData.value && clickData.value.theory }}</span>
-                <span><span class="title">质保期: </span>{{ clickData.value && clickData.value.name }}</span>
-                <!-- <span><span class="title">实到人数: </span>{{ clickData.value && clickData.value.actual }}</span>
-                <span><span class="title">老师: </span>{{ clickData.value && clickData.value.teacher }}</span> -->
-            </div>
-        </el-popover>
-
-        <!-- 视频播放弹框 -->
-        <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
-            <videoPlay v-bind="videoData" @play="onPlay" />
-        </el-dialog>
-    </div>
-</template>
-
-<script>
-import { reactive, onMounted, ref, toRefs, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
-import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, ElMessage } from "element-plus";
-import "vue3-video-play/dist/style.css";
-import { addResponseEventListener } from "../webrtcVideo.js";
-import { videoPlay } from "vue3-video-play";
-import CircleProgress from './CircleProgress.vue';
-import Left from './left.vue'
-import Right from './right.vue'
-import LeaderLine from "../assets/js/leaderline.js"
-
-export default ({
-    name: 'Histogram',
-    components: { Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
-    setup() {
-        // 视频数据
-        const videoData = reactive({
-            width: "100%", //播放器高度
-            height: "100%", //播放器高度
-            color: "red", //主题色
-            title: "互动教室", //视频名称
-            src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
-            muted: false, //静音
-            webFullScreen: false,
-            // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
-            autoPlay: false, //自动播放
-            loop: false, //循环播放
-            mirror: false, //镜像画面
-            ligthOff: false, //关灯模式
-            volume: 0.3, //默认音量大小
-            control: true, //是否显示控制
-            currentTime: 0,//跳转到固定播放时间
-            controlBtns: [
-                "audioTrack",
-                "quality",
-                "speedRate",
-                "volume",
-                "setting",
-                "pip",
-                "pageFullScreen",
-                "fullScreen",
-            ], //显示所有按钮,
-        });
-        // 物联设备类型统计
-        const interDevice = ref(
-            [
-                // {
-                //     number: 98,
-                //     color: "#63ABFF",
-                //     icon: 'r1',
-                //     text: "显示系统"
-                // },
-                // {
-                //     number: 185,
-                //     color: "#63FFC7",
-                //     icon: 'r2',
-                //     text: "控制设备"
-                // },
-                // {
-                //     number: 58,
-                //     color: "#918EFF",
-                //     icon: 'r3',
-                //     text: "音频设备"
-                // },
-                // {
-                //     number: 68,
-                //     color: "#00C8E3",
-                //     icon: 'r4',
-                //     text: "录播设备"
-                // },
-                // {
-                //     number: 189,
-                //     color: "#FFBB54",
-                //     icon: 'r5',
-                //     text: "环境设备"
-                // },
-                // {
-                //     number: 98,
-                //     color: "#00CF78",
-                //     icon: 'r6',
-                //     text: "安全管理"
-                // },
-
-            ])
-        // 位置弹框
-        let centerDialogVisible = ref(false)
-        // 获取点击点数据
-        let clickData = reactive({})
-        const visible = ref(false)
-        const triggerRef = ref({
-            getBoundingClientRect() {
-                // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
-                return position.value
-            },
-        })
-        const position = ref({
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-        })
-        // 点击某个模型跟随移动
-        const mousemoveHandler = (x, y) => {
-            position.value = DOMRect.fromRect({
-                width: 0,
-                height: 0,
-                x: x,
-                y: y,
-            })
-        }
-
-
-        //视频播放弹框
-        const videoDialog = ref(false)
-        // 播放视频
-        const lookVideo = function () {
-
-            videoDialog.value = true;
-            console.log("点击了播放视频", 12312312)
-        }
-        // 播放视频
-        const onPlay = function () {
-            console.log("播放视频")
-        }
-        //智慧教室实时监控---数据
-        const carouselData = ref([
-            // {
-            //     activeMonitor: {
-            //         title: "多屏互动教室",
-            //         array: [
-            //             {
-            //                 title: "互动教室22",
-            //                 poster: 'rb1',
-            //                 src: '',
-            //             },
-            //             {
-            //                 title: "互动教室22",
-            //                 poster: 'rb2',
-            //                 src: '',
-            //             }
-            //         ]
-            //     },
-            //     wisdomMonitor:
-            //     {
-            //         title: "多屏智慧教室",
-            //         array: [
-            //             {
-            //                 title: "智慧教室11",
-            //                 poster: 'rb1',
-            //                 src: '',
-            //             },
-            //             {
-            //                 title: "智慧教室11",
-            //                 poster: 'rb2',
-            //                 src: '',
-            //             }
-            //         ]
-            //     }
-            // },
-            // {
-            //     activeMonitor: {
-            //         title: "多屏互动教室",
-            //         array: [
-            //             {
-            //                 title: "互动教室33",
-            //                 poster: 'rb1',
-            //                 src: '',
-            //             },
-            //             {
-            //                 title: "互动教室33",
-            //                 poster: 'rb2',
-            //                 src: '',
-            //             }
-            //         ]
-            //     },
-
-            //     wisdomMonitor:
-            //     {
-            //         title: "多屏智慧教室",
-            //         array: [
-            //             {
-            //                 title: "智慧教室22",
-            //                 poster: 'rb1',
-            //                 src: '',
-            //             },
-            //             {
-            //                 title: "智慧教室22",
-            //                 poster: 'rb2',
-            //                 src: '',
-            //             }
-            //         ]
-            //     }
-            // }
-
-        ]
-        )
-        const linedomRef = ref(null)
-        let lineContainer = ref(null)
-        const popoverRef = ref(null)
-        const lineStyleOption = ref({
-            // color: '#2AC367', // 指引线颜色
-            // startPlug: 'disc',
-            // endPlug: 'disc', // 指引线结束点的样式 hand,disc
-            // size: 2, // 线条尺寸
-            // startSocket: 'bottom', //在指引线开始的地方从元素左侧开始
-            // endSocket: 'top', //在指引线开始的地方从元素右侧结束
-            // // hide: true, // 绘制时隐藏，默认为false，在初始化时可能会出现闪烁的线条
-            // // startPlugColor: '#2AC367', // 渐变色开始色
-            // // endPlugColor: '#fff386', // 渐变色结束色
-            // // gradient: false, // 使用渐变色
-            // outLineColor: 'blue',
-            // path: 'magnet', // straight,arc,fluid,magnet,grid
-            // dash: {
-            //     // 虚线样式
-            //     animation: true // 让线条滚动起来
-            // },
-            // hide: true
-            startPlug: 'disc',
-            endPlug: 'disc',
-            startPlugColor: 'rgb(248, 205, 30)',
-            startPlugOutlineColor: 'rgb(30, 130, 250)',
-            endPlugColor: '#ff0000', // translucent
-            endPlugOutlineColor: '#2AC367',
-            size: 2,
-            startPlugSize: 1.5,
-            startPlugOutlineSize: 1,
-            endPlugSize: 3,
-            endPlugOutlineSize: 3
-        })
-        onMounted(() => {
-
-
-            // 监听一下页面点击情况
-            addResponseEventListener("open", (data) => {
-                if (data) {
-                    let json = eval("(" + data + ")");//转对象
-                    clickData.value = json;
-                    // console.log("clickData---点击的数据", clickData.value)
-                    // console.log("看一下", linedomRef.value.style.top, json, "json")
-                    visible.value = true
-                    linedomRef.value.style.top = json.x + "px";
-                    linedomRef.value.style.left = json.y + "px";
-
-                    let popoverRef2 = document.getElementById("popoverRef")
-                    // setTimeout(() => {
-                    //     console.log("popoverRef", popoverRef, "popoverRef.value", popoverRef.value);
-                    // }, 2000);
-                    // setTimeout(() => {
-                    console.log("linedomRef.value", linedomRef.value, "popoverRef.value", popoverRef.value);
-                    lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value)
-                    lineContainer.value.show('draw', {
-                        duration: 1000, //持续时长
-                        timing: 'ease-in' // 动画函数
-                    })
-                    lineContainer.value.endPlugOutline = true;
-                    lineContainer.value.position()
-                    console.log("隔几秒在连接", 1312312)
-                    // }, 3000);
-
-                }
-            })
-
-            // addResponseEventListener("End", data => {
-            //     console.log("移动结束", 123123, data)
-            // })
-
-        })
-
-
-
-
-
-
-
-
-        return {
-            centerDialogVisible,
-            interDevice,
-            clickData,
-            visible,
-            triggerRef,
-            videoData,
-            onPlay,
-            videoDialog,
-            lookVideo,
-            ...toRefs(carouselData),
-            carouselData,
-            linedomRef,
-            popoverRef,
-            lineContainer
-        }
-    },
-})
-
-</script>
-
-<style scoped lang="scss">
-@import '../assets/css/home.scss';
-</style>

src/components/left.vue

@@ -23,19 +23,21 @@
             <div class="title">
                 <div class="text">本周课程统计</div>
             </div>
+            <!-- <Number numm="1234" :numLen="4" /> -->
             <div class="content">
                 <div class="count" v-for="(item, index) in classCount" :key="index">
                     <CircleProgress :target-value="item.number" :color="item.color" text-position="bottom">
                         <img :src="leftimg + item.imgnumber + '.png'" alt="">
-
                         <!-- <img :src="'src/assets/img/' + item.imgnumber + '.png'" alt=""> -->
                     </CircleProgress>
                     <div class="text">{{ item.text }}</div>
+
+                    <!-- <Number :numm="item.text" :numLen="4" /> -->
                 </div>
             </div>
         </div>
-        <div class="left-bottom">
 
+        <div class="left-bottom">
             <div class="title">
                 <div class="text">智慧教室使用明细</div>
             </div>

src/components/left1.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-aside class="left">
+
+        <ul class="flex">
+            <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" class="num" />
+        </ul>
+
+    </el-aside>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import ScrollNum from './roll.vue'
+
+const num = ref(888)
+const numArr = computed(() => {
+    const str = String(num.value)
+    let arr = []
+    for (let i = 0; i < str.length; i++) {
+        arr.push(parseInt(str[i]))
+    }
+    return arr
+})
+</script>
+
+<style scoped lang="scss">
+@import '../assets/css/left.scss';
+</style>
+<style>
+.classpopover {
+    .el-popper__arrow {
+        top: 196px !important;
+    }
+
+    .el-popper[data-popper-placement^=bottom],
+    .el-popper__arrow::before {
+        border-left-color: transparent !important;
+        border-top-color: transparent !important;
+    }
+}
+
+.flex {
+    display: flex;
+}
+
+.el-popper.is-light {
+    border-radius: 10px;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.num {
+    /* --width: 26px;
+    margin-right: 6px;
+    border: 1px solid black;
+    border-radius: 8px */
+}
+</style>

src/components/roll.vue

@@ -0,0 +1,176 @@
+<template>
+    <component :is="as" class="scroll-num" :style="{ '--i': i, '--delay': delay }" @animationend="showAnimate = false">
+        <ul ref="ul" :class="{ animate: showAnimate }">
+            <li>0</li>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+            <li>4</li>
+            <li>5</li>
+            <li>6</li>
+            <li>7</li>
+            <li>8</li>
+            <li>9</li>
+            <li>0</li>
+        </ul>
+
+        <svg width="0" height="0">
+            <filter id="blur">
+                <feGaussianBlur in="SourceGraphic" :stdDeviation="`0 ${blur}`" />
+            </filter>
+        </svg>
+    </component>
+</template>
+
+<script>
+export default {
+    name: 'ScrollNum',
+    props: {
+        as: {
+            type: String,
+            default: 'div'
+        },
+        i: {
+            type: Number,
+            default: 0,
+            validator: v => v < 10 && v >= 0 && Number.isInteger(v)
+        },
+        delay: {
+            type: Number,
+            default: 1
+        },
+        blur: {
+            type: Number,
+            default: 2
+        }
+    },
+    data: () => ({
+        timer: null,
+        showAnimate: true
+    }),
+    watch: { i() { this.showAnimate = true } },
+    mounted() {
+        const ua = navigator.userAgent.toLowerCase()
+        const testUA = regexp => regexp.test(ua)
+        const isSafari = testUA(/safari/g) && !testUA(/chrome/g)
+
+        // Safari浏览器的兼容代码
+        isSafari && (this.timer = setTimeout(() => {
+            this.$refs.ul.setAttribute('style', `
+        animation: none;
+        transform: translateY(calc(var(--i) * -9.09%))
+      `)
+        }, this.delay * 1000))
+    },
+    beforeDestroy() { clearTimeout(this.timer) }
+}
+</script>
+
+<style scoped>
+.scroll-num {
+    /* width: var(--width, 60px); */
+    /* height: var(--height, calc(var(--width, 20px) * 1.8)); */
+    /* color: var(--color, #333); */
+    /* font-size: var(--height, calc(var(--width, 20px) * 1.1)); */
+    /* line-height: var(--height, calc(var(--width, 20px) * 1.8)); */
+    text-align: center;
+    overflow: hidden;
+    font-size: 14px;
+    height: 13px;
+    line-height: 13px;
+    color: #fff;
+    font-weight: bold;
+    list-style: none;
+    /* width: 20px;
+    border: 5px soli darkcyan; */
+}
+
+.animate {
+    animation: move .3s linear infinite,
+        bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    /* border: 2px solid darkcyan; */
+}
+
+li {
+    list-style: none;
+}
+
+.border-animate {
+    /* animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards */
+}
+
+ul {
+    /* // padding: 0;
+    // margin: 0;
+    // list-style: none; */
+    transform: translateY(calc(var(--i) * -9.09%));
+}
+
+@keyframes move {
+    from {
+        transform: translateY(-90%);
+        filter: url(#blur)
+    }
+
+    to {
+        transform: translateY(1%);
+        filter: url(#blur)
+    }
+}
+
+@keyframes bounce-in-down {
+    from {
+        transform: translateY(calc(var(--i) * -9.09% - 7%));
+        filter: none
+    }
+
+    25% {
+        transform: translateY(calc(var(--i) * -9.09% + 3%))
+    }
+
+    50% {
+        transform: translateY(calc(var(--i) * -9.09% - 1%))
+    }
+
+    70% {
+        transform: translateY(calc(var(--i) * -9.09% + .6%))
+    }
+
+    85% {
+        transform: translateY(calc(var(--i) * -9.09% - .3%))
+    }
+
+    to {
+        transform: translateY(calc(var(--i) * -9.09%))
+    }
+}
+
+@keyframes enhance-bounce-in-down {
+    25% {
+        transform: translateY(8%)
+    }
+
+    50% {
+        transform: translateY(-4%)
+    }
+
+    70% {
+        transform: translateY(2%)
+    }
+
+    85% {
+        transform: translateY(-1%)
+    }
+
+    to {
+        transform: translateY(0)
+    }
+}
+</style>
+