全景图增加数字滚动

nngkxxdp/src/main/resources/static/naxsb/css/qjt.css

@@ -247,4 +247,14 @@ body {
     height: 9%;
     background-image: url(../images/qjttitle.png);
     background-size: 100% 100%;
+}
+
+@keyframes counterAnimation {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.number.animate {
+    visibility: visible;
+    animation: counterAnimation 0.3s ease-out forwards;
 }

nngkxxdp/src/main/resources/static/naxsb/qjt.html

@@ -58,7 +58,7 @@
                                     <div class="top radio">1号楼当前排队人数：</div>
                                     <div class="bottom">
                                         <img src="images/floor1.png" alt="">
-                                        <div><span class="number">12</span>
+                                        <div><span class="number" id="currWaitPeople">-</span>
                                             <span>人</span>
                                         </div>
                                     </div>
@@ -67,7 +67,7 @@
                                     <div class="top radio">可办事项数量：</div>
                                     <div class="bottom">
                                         <img src="images/floor2.png" alt="">
-                                        <div><span class="number">798</span>
+                                        <div><span class="number" id="taskNum">-</span>
                                             <span>项</span>
                                         </div>
                                     </div>
@@ -76,7 +76,7 @@
                                     <div class="top radio">平均等待时长：</div>
                                     <div class="bottom">
                                         <img src="images/floor3.png" alt="">
-                                        <div><span class="number">2</span>
+                                        <div><span class="number" id="waitTime">-</span>
                                             <span>分钟</span>
                                         </div>
                                     </div>
@@ -85,7 +85,7 @@
                                     <div class="top radio">窗口数：</div>
                                     <div class="bottom">
                                         <img src="images/floor4.png" alt="">
-                                        <div><span class="number">28</span>
+                                        <div><span class="number" id="winNum">-</span>
                                             <span>个</span>
                                         </div>
                                     </div>
@@ -99,7 +99,7 @@
                                     <div class="top radio">2号楼当前排队人数：</div>
                                     <div class="bottom">
                                         <img src="images/floor1.png" alt="">
-                                        <div><span class="number">12</span>
+                                        <div><span class="number" id="currWaitPeople2">-</span>
                                             <span>人</span>
                                         </div>
                                     </div>
@@ -108,7 +108,7 @@
                                     <div class="top radio">可办事项数量：</div>
                                     <div class="bottom">
                                         <img src="images/floor2.png" alt="">
-                                        <div><span class="number">798</span>
+                                        <div><span class="number" id="taskNum2">-</span>
                                             <span>项</span>
                                         </div>
                                     </div>
@@ -117,7 +117,7 @@
                                     <div class="top radio">平均等待时长：</div>
                                     <div class="bottom">
                                         <img src="images/floor3.png" alt="">
-                                        <div><span class="number">2</span>
+                                        <div><span class="number" id="waitTime2">-</span>
                                             <span>分钟</span>
                                         </div>
                                     </div>
@@ -126,7 +126,7 @@
                                     <div class="top radio">窗口数：</div>
                                     <div class="bottom">
                                         <img src="images/floor4.png" alt="">
-                                        <div><span class="number">28</span>
+                                        <div><span class="number" id="winNum2">-</span>
                                             <span>个</span>
                                         </div>
                                     </div>
@@ -143,7 +143,7 @@
                                     <div class="right">
                                         <span>本日办理数量</span>
                                         <div class="number">
-                                            <span>98</span>
+                                            <span id="currDayTaskNum">-</span>
                                             <span>项</span>
                                         </div>
                                     </div>
@@ -155,7 +155,7 @@
                                     <div class="right">
                                         <span>本月办理数量</span>
                                         <div class="number">
-                                            <span>1298</span>
+                                            <span id="currMonthTaskNum">-</span>
                                             <span>项</span>
                                         </div>
                                     </div>
@@ -167,7 +167,7 @@
                                     <div class="right">
                                         <span>本年办理数量</span>
                                         <div class="number">
-                                            <span>6298</span>
+                                            <span id="currYearTaskNum">-</span>
                                             <span>项</span>
                                         </div>
                                     </div>
@@ -521,5 +521,57 @@
 
     option && myChart.setOption(option);
 </script>
+<script>
+    function animateValue(obj, start, end, duration) {
+        let startTimestamp = null;
+        const step = (timestamp) => {
+            if (!startTimestamp) startTimestamp = timestamp;
+            const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+            obj.innerHTML = Math.floor(progress * (end - start) + start);
+            if (progress < 1) {
+                window.requestAnimationFrame(step);
+            } else {
+                obj.classList.remove('animate');
+            }
+        };
+        obj.classList.add('animate');
+        window.requestAnimationFrame(step);
+    }
+    const time = 2 * 1000;
+
+    // 1号楼当前排队人数
+    const currWaitPeopleElement = document.getElementById('currWaitPeople');
+    animateValue(currWaitPeopleElement, 0, 12, time);
+    // 1号楼可办事项数量
+    const taskNumElement = document.getElementById('taskNum');
+    animateValue(taskNumElement, 0, 798, time);
+    // 1号楼平均等待时长
+    const waitTimeElement = document.getElementById('waitTime');
+    animateValue(waitTimeElement, 0, 2, time);
+    // 1号楼窗口数
+    const winNumElement = document.getElementById('winNum');
+    animateValue(winNumElement, 0, 28, time);
+    // 2号楼当前排队人数
+    const currWaitPeopleElement2 = document.getElementById('currWaitPeople2');
+    animateValue(currWaitPeopleElement2, 0, 6, time);
+    // 2号楼可办事项数量
+    const taskNumElement2 = document.getElementById('taskNum2');
+    animateValue(taskNumElement2, 0, 321, time);
+    // 2号楼平均等待时长
+    const waitTimeElement2 = document.getElementById('waitTime2');
+    animateValue(waitTimeElement2, 0, 7, time);
+    // 2号楼窗口数
+    const winNumElement2 = document.getElementById('winNum2');
+    animateValue(winNumElement2, 0, 11, time);
+    // 本日办理数量
+    const currTaskNumElement = document.getElementById('currDayTaskNum');
+    animateValue(currTaskNumElement, 0, 98, time);
+    // 本月办理数量
+    const currMonthTaskNumElement = document.getElementById('currMonthTaskNum');
+    animateValue(currMonthTaskNumElement, 0, 1298, time);
+    // 本年办理数量
+    const currYearTaskNumElement = document.getElementById('currYearTaskNum');
+    animateValue(currYearTaskNumElement, 0, 6298, time);
+</script>
 
 </html>