|
@@ -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>
|
|
@@ -400,6 +400,10 @@
|
|
|
render();
|
|
|
// 创建控件对象
|
|
|
let controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
|
+ controls.enableZoom = false
|
|
|
+ // controls.enableRotate = false
|
|
|
+ controls.maxPolarAngle = Math.PI / 2
|
|
|
+ controls.minPolarAngle = 0
|
|
|
// 监听鼠标、键盘事件
|
|
|
controls.addEventListener('change', render);
|
|
|
// 辅助线
|
|
@@ -521,5 +525,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>
|