|
@@ -111,17 +111,24 @@
|
|
|
<div class="title">
|
|
|
交互任务进度
|
|
|
</div>
|
|
|
- <div class="progressBox">
|
|
|
- <div class="item" v-for="(item,index) in progressData">
|
|
|
- <div class="name">
|
|
|
- {{ item.taskName }}
|
|
|
- </div>
|
|
|
- <div class="progress">
|
|
|
- <div class="progress" :style="{width:(item.finishCount/item.totalCount*100)+'%'}"></div>
|
|
|
+ <div style="margin-top: 20px;height: 230px;overflow: hidden" id="progressViewBox" @mouseenter="rollStop()" @mouseleave="rollStart(60)">
|
|
|
+ <div class="progressBox" id="progressBoxOne">
|
|
|
+ <div class="item" v-for="(item,index) in progressData">
|
|
|
+ <div class="name">
|
|
|
+ {{ item.taskName }}
|
|
|
+ </div>
|
|
|
+ <div class="progress">
|
|
|
+ <div class="progress" :style="{width:(item.finishCount/item.totalCount*100)+'%'}"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="progressBox" id="progressBoxTwo">
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
<div class="address">
|
|
|
<div class="title">
|
|
|
地址统计
|
|
@@ -343,7 +350,8 @@ export default {
|
|
|
echartsAddressData:{
|
|
|
xAxisData:[],
|
|
|
seriesData:[]
|
|
|
- }
|
|
|
+ },
|
|
|
+ timer:null
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -352,6 +360,10 @@ export default {
|
|
|
this.getDailyCost()
|
|
|
this.getTaskProgress()
|
|
|
this.getAddressGroup()
|
|
|
+ this.roll(60)
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if(this.timer) clearInterval(this.timer)
|
|
|
},
|
|
|
methods: {
|
|
|
initEchartsAddress() {
|
|
@@ -581,6 +593,31 @@ export default {
|
|
|
})
|
|
|
this.initEchartsAddress()
|
|
|
})
|
|
|
+ },
|
|
|
+
|
|
|
+ roll(t) {
|
|
|
+ let ul1 = document.getElementById('progressBoxOne')
|
|
|
+ let ul2 = document.getElementById('progressBoxTwo')
|
|
|
+ let ulbox = document.getElementById('progressViewBox')
|
|
|
+ ul2.innerHTML = ul1.innerHTML
|
|
|
+ ulbox.scrollTop = 0
|
|
|
+ this.rollStart(t)
|
|
|
+ },
|
|
|
+ rollStart(t) {
|
|
|
+ let ul1 = document.getElementById('progressBoxOne')
|
|
|
+ let ul2 = document.getElementById('progressBoxTwo')
|
|
|
+ let ulbox = document.getElementById('progressViewBox')
|
|
|
+ this.rollStop();
|
|
|
+ this.timer = setInterval(()=>{
|
|
|
+ if(ulbox.scrollTop >= ul1.scrollHeight) {
|
|
|
+ ulbox.scrollTop = 0
|
|
|
+ } else {
|
|
|
+ ulbox.scrollTop++
|
|
|
+ }
|
|
|
+ },t)
|
|
|
+ },
|
|
|
+ rollStop(){
|
|
|
+ clearInterval(this.timer)
|
|
|
}
|
|
|
},
|
|
|
};
|
|
@@ -822,7 +859,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.progress {
|
|
|
- width: 180px;
|
|
|
+ width: 160px;
|
|
|
height: 20px;
|
|
|
background: #222222;
|
|
|
border-radius: 0 20px 20px 0;
|