zc

src/views/components/usageRateComponent.vue

@@ -9,15 +9,17 @@
         <p>使用人次</p>
         <p>使用率</p>
       </div>
-      <div class="for-big-box" v-for="(item,index) in selectedItems" :key="index">
-        <p :class="item.id=='0'?'one-p':(item.id=='1'?'tow-p':'none-p')"><span>{{item.id != '0' && item.id != '1'?item.id+1:''}}</span></p>
-        <p>{{item.name}}</p>
-        <p>{{item.num}}</p>
-        <p>{{item.value}}</p>
+      <div class="for-big-sl-box" id="scrollListBox">
+        <div class="for-big-box" v-for="(item,index) in maxList" :key="index">
+          <p :class="item.id=='0'?'one-p':(item.id=='1'?'tow-p':'none-p')"><span>{{item.id != '0' && item.id != '1'?item.id+1:''}}</span></p>
+          <p>{{item.name}}</p>
+          <p>{{item.num}}</p>
+          <p>{{item.value}}</p>
+        </div>
       </div>
     </div>
     <!--<p class="position-null-p" v-if="!config.data[0]">暂无数据</p>-->
-    <p class="position-null-p" v-if="!selectedItems[0]">暂无数据</p>
+    <p class="position-null-p" v-if="!maxList[0]">暂无数据</p>
     <img class="position-left-top" src="@/assets/ZDimages/img_min_icon.png">
     <img class="position-right-top" src="@/assets/ZDimages/img_min_icon.png">
     <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
@@ -57,6 +59,8 @@
         currentIndex:0,
         selectedItems:[],
         timer:null,
+        scrollInterval:null,
+        scrollIntervalTime:50,
       }
     },
     created() {
@@ -90,6 +94,7 @@
       dashboardsResearchUsage() {
         let self = this
         this.$set(this.config,'data',[]);
+        clearInterval(this.scrollInterval);
         dashboardsResearchUsage(this.roomNames).then(res => {
           let list = [];
           for (let i = 0; i < res.data.length; i++) {
@@ -103,7 +108,10 @@
             list.push(obj)
           }
           this.$set(this,'maxList',JSON.parse(JSON.stringify(list)));
-          this.startTimer();
+          setTimeout(function() {
+            self.startScrolling()
+          },500)
+          // this.startTimer();
           // let list = []
           // for (let i = 0; i < res.data.length; i++) {
           //   let obj = {
@@ -130,6 +138,25 @@
           // this.$set(this.config,'data',newList)
         })
       },
+
+      //文件滚动
+      startScrolling() {
+        let scrollBox = document.getElementById('scrollListBox');
+        const maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
+        let currentPos = scrollBox.scrollTop;
+        const speed = 1;
+        this.scrollInterval = setInterval(() => {
+          currentPos += speed;
+          scrollBox.scrollTop = currentPos;
+          // 到达底部时重置到顶部
+          if (currentPos >= maxScroll) {
+            currentPos = 0;
+            scrollBox.scrollTop = 0;
+            // 可选：这里可以重新获取maxScroll，防止内容动态变化
+            // maxScroll = scrollBox.scrollHeight - scrollBox.clientHeight;
+          }
+        }, this.scrollIntervalTime);
+      },
       getNextItems() {
         // 计算需要获取的项目数量
         const remaining = this.maxList.length - this.currentIndex;
@@ -209,10 +236,12 @@
     beforeDestroy() {
       //清除定时器
       clearInterval(this.usageTimer);
+      clearInterval(this.scrollInterval);
     },
     destroyed() {
       //清除定时器
       clearInterval(this.usageTimer);
+      clearInterval(this.scrollInterval);
     }
   }
 </script>
@@ -373,62 +402,82 @@
           width:92px;
         }
       }
-      .for-big-box{
-        display: flex;
-        border-bottom: 2px dashed rgba(216,216,216,0.1);
-        .one-p{
-          span{
-            display: inline-block;
-            width: 24px;
-            height: 30px;
-            margin: 10px 0 0 0;
-            background-image: url("../../assets/ZDimages/img_pm_a@1x.png");
-            background-size: 100% 100%;
+      .for-big-sl-box{
+        width:470px;
+        height:400px;
+        overflow-y: scroll;
+        .for-big-box{
+          display: flex;
+          border-bottom: 2px dashed rgba(216,216,216,0.1);
+          .one-p{
+            span{
+              display: inline-block;
+              width: 24px;
+              height: 30px;
+              margin: 10px 0 0 0;
+              background-image: url("../../assets/ZDimages/img_pm_a@1x.png");
+              background-size: 100% 100%;
+            }
           }
-        }
-        .tow-p{
-          span{
-            display: inline-block;
-            width: 24px;
-            height: 30px;
-            margin: 10px 0 0 0;
-            background-image: url("../../assets/ZDimages/img_pm_b.png");
-            background-size: 100% 100%;
+          .tow-p{
+            span{
+              display: inline-block;
+              width: 24px;
+              height: 30px;
+              margin: 10px 0 0 0;
+              background-image: url("../../assets/ZDimages/img_pm_b.png");
+              background-size: 100% 100%;
+            }
           }
-        }
-        .none-p{
-          span{
+          .none-p{
+            span{
+              text-align: center;
+              display: inline-block;
+              width:22px;
+              height:22px;
+              line-height: 22px;
+              background: #0E52C3;
+              border-radius: 50%;
+              border: 1px solid #0576FF;
+              margin: 9px;
+            }
+          }
+          p{
+            height:48px;
+            line-height:48px;
+            font-size: 14px;
             text-align: center;
-            display: inline-block;
-            width:22px;
-            height:22px;
-            line-height: 22px;
-            background: #0E52C3;
-            border-radius: 50%;
-            border: 1px solid #0576FF;
-            margin: 9px;
+          }
+          p:nth-child(1){
+            width:40px;
+            margin-right:30px;
+          }
+          p:nth-child(2){
+            width:106px;
+            text-align: left;
+          }
+          p:nth-child(3){
+            width:202px;
+          }
+          p:nth-child(4){
+            width:92px;
           }
         }
-        p{
-          height:48px;
-          line-height:48px;
-          font-size: 14px;
-          text-align: center;
-        }
-        p:nth-child(1){
-          width:40px;
-          margin-right:30px;
-        }
-        p:nth-child(2){
-          width:106px;
-          text-align: left;
-        }
-        p:nth-child(3){
-          width:202px;
-        }
-        p:nth-child(4){
-          width:92px;
-        }
+      }
+      .for-big-sl-box::-webkit-scrollbar{
+        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+        height: 6px;
+        display: none;
+      }
+      .for-big-sl-box::-webkit-scrollbar-thumb{
+        border-radius: 5px;
+        background: #003988;
+      }
+      .for-big-sl-box::-webkit-scrollbar-track{
+        -webkit-box-shadow: inset 0 0 5px #FFFFFF;
+        border-radius: 0;
+        background: #FFFFFF;
+        display: none;
       }
     }
   }