修改数字滚动效果

package-lock.json

@@ -1033,7 +1033,7 @@
     },
     "throttle-debounce": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
       "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
     },
     "to-regex-range": {
@@ -1218,6 +1218,11 @@
         "vue-count-to": "^1.0.13"
       }
     },
+    "vue3-number-roll-plus": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/vue3-number-roll-plus/-/vue3-number-roll-plus-0.1.3.tgz",
+      "integrity": "sha512-DngEDTyEIrDPIefl3ZEH5ZFtnTw0xNOb71DELLOW6PeQxep41jQ1ntJPWugj2csEIzMW7jlLNSBAASBGR81Ykw=="
+    },
     "vue3-video-play": {
       "version": "1.3.1-beta.6",
       "resolved": "https://registry.npmjs.org/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz",

package.json

@@ -16,6 +16,7 @@
     "postcss-pxtorem": "^6.0.0",
     "vue": "^3.2.25",
     "vue3-count-to": "^1.1.2",
+    "vue3-number-roll-plus": "^0.1.3",
     "vue3-video-play": "^1.3.1-beta.6"
   },
   "devDependencies": {

src/assets/css/left.scss

@@ -78,7 +78,7 @@
              //  width: 93px;
              box-sizing: border-box;
              // margin-top: 42px;
-             margin: 40px 16px 39px 22px;
+             margin: 33px 16px 39px 22px;
 
              img {
                  width: 22px;

src/components/CircleProgress.vue

@@ -3,7 +3,13 @@
         <div class="number" v-if="textPosition == 'top'">
             <ul class="flex">
                 <!-- <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" /> -->
-                <count-to :useEasing="true" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to>
+                <vue-number-roll-plus
+                    :number="targetValue"
+                    background="transparent"
+                    speed="1.4"
+                    >
+                </vue-number-roll-plus>
+                <!-- <count-to :useEasing="true" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to> -->
                 <span>个</span>
             </ul>
         </div>
@@ -23,8 +29,15 @@
     <div class="bottomNumber" v-if="textPosition == 'bottom'">
         <ul class="flex" style="width: 65px;display: flex;align-items: center;justify-content: center;">
             <!-- <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" /> -->
-            <div style="color: #fff;font-weight: 600; ">
-                <count-to :useEasing="true" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to>
+            <div style="color: #fff;font-weight: 600;  ">
+                <vue-number-roll-plus
+                    :number="targetValue"
+                    background="transparent"
+                    speed="1.4"
+                    >
+                </vue-number-roll-plus>
+
+                <!-- <count-to :useEasing="true" style="font-size: 0.08rem;"  :startVal='1' :endVal='targetValue' :duration='2000'></count-to> -->
             </div>
             <span style="color: antiquewhite;"   v-if="text.includes('课程')">(节)</span>
             <span style="color: antiquewhite;" v-else>(人)</span>
@@ -33,10 +46,16 @@
     </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, toRefs, watch, onMounted,reactive  } from 'vue';
-import ScrollNum from './roll.vue';
+
+import VueNumberRollPlus from "vue3-number-roll-plus"
+import "vue3-number-roll-plus/main.css"
+
+import { ref, computed, toRefs, watch, onMounted,reactive,  } from 'vue';
+// import ScrollNum from './roll.vue';
 import { CountTo } from 'vue3-count-to';
 
+
+
 const props = defineProps({
     targetValue: {
         type: Number,
@@ -148,6 +167,9 @@ watch(textPosition, (newValue) => {
 .number {
     font-size: 14px;
     font-weight: bold;
+    height: 28px;
+    // background-color: #2196f3;
+    margin-top: -8px;
 
     span {
         font-size: 12px;
@@ -174,4 +196,14 @@ ul {
         margin-left: 4px;
     }
 }
+
 </style>
+<style lang="scss">
+.real-time-num{
+    // background-color: rgb(137, 80, 5) !important;
+    width: 9px!important;
+    height: 33px !important;
+    margin-left: 0px !important;
+
+}
+</style>

src/components/UeVideo.vue

@@ -1,7 +1,7 @@
 
 <template>
-  <!-- <div  ref="video" id="player"></div> -->
-  <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div>
+  <div  ref="video" id="player"></div>
+  <!-- <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div> -->
   <Login :class="loginShow ? '' : 'hidden'"></Login>
   <home></home>
   <!-- <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div> -->

src/components/left.vue

@@ -88,6 +88,9 @@
 </template>
 
 <script >
+
+
+
 import * as echarts from "echarts";
 import { reactive, onMounted, ref, onBeforeUnmount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
 import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem } from "element-plus";

src/components/right.vue

@@ -209,29 +209,7 @@ export default ({
         let interDevice = ref([])
         // 智慧教室
         let carouselData = ref([
-            {
-                activeMonitor:{
-    "array": [
-        {
-            "src": "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
-            "title": "录播设备"
-        },
-       
-    ],
-    "title1": "010431",
-    "array1": [
-        {
-            "src": "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
-            "title": "录播设备"
-        },
-        {
-            "src": "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
-            "title": "录播设备"
-        }
-    ],
-    "title": "010429"
-}
-            }
+           
         ])
 
         //获取页面数据
@@ -254,50 +232,50 @@ export default ({
             // 物联设备类型数据
             console.log('sadui12u31',category);
             //截取数组前6项
-            interDevice.value = category.slice(0,6);
+            interDevice.value = category;
       
-            //  // 互动教室
-            //  carouselData.value = monitor;
+             // 互动教室
+             carouselData.value = monitor;
       
-            //  carouselData.value.map((res)=>{
-            //     console.log('sadhi2',res.activeMonitor);
+             carouselData.value.map((res)=>{
+                console.log('sadhi2',res.activeMonitor);
 
-            //     res.activeMonitor.array.map(array =>{
+                res.activeMonitor.array.map(array =>{
               
-            //         //视频转码
-            //         getvideo({
-            //         "rtsp": array.src,
-            //         }).then((res)=>{
-            //             console.log('sadnuq21',res.data);
-            //             console.log('sadnuq2121',res.data.httpFlv);
-            //              array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-            //            // array.src=res.data.httpFlv
-            //         })
+                    //视频转码
+                    getvideo({
+                    "rtsp": array.src,
+                    }).then((res)=>{
+                        console.log('sadnuq21',res.data);
+                        console.log('sadnuq2121',res.data.httpFlv);
+                
+                       array.src=res.data.httpFlv
+                    })
 
                     
-            //     })
-            //     res.activeMonitor.array1.map(array1 =>{
-            //         console.log('asdui1231',array1);
-            //            //视频转码
-            //            getvideo({
-            //         "rtsp": array1.src,
-            //         }).then((res)=>{
-            //             console.log('sadnuq212123s2',res.data);
-            //              array1.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-            //            // array.src=res.data.httpFlv
-            //         })
-            //     })
+                })
+                res.activeMonitor.array1.map(array1 =>{
+                    console.log('asdui1231',array1);
+                       //视频转码
+                       getvideo({
+                    "rtsp": array1.src,
+                    }).then((res)=>{
+                        console.log('sadnuq212123s2',res.data);
+                    
+                       array.src=res.data.httpFlv
+                    })
+                })
 
 
-            // })
+            })
 
                  
 
 
 
-                setTimeout(() => {
-                    console.log('处理后监控视频数据===',carouselData.value);
-                }, 2000);
+                // setTimeout(() => {
+                //     console.log('处理后监控视频数据===',carouselData.value);
+                // }, 2000);
 
             //物联设备统计
             equipmentTotal.value = status