zc

src/views/components/usageRateComponent.vue

@@ -2,8 +2,22 @@
 <template>
   <div class="usageRateComponent">
     <p class="title-p">设施使用率排行</p>
-    <dv-scroll-board :config="config" style="width:470px;height:435px" v-if="config.data[0]"/>
-    <p class="position-null-p" v-if="!config.data[0]">暂无数据</p>
+    <!--<dv-scroll-board :config="config" style="width:470px;height:435px" v-if="config.data[0]"/>-->
+    <div class="for-max-big-box">
+      <div class="for-title-box">
+        <p>设施房间</p>
+        <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':'')">{{item.id != '0' && item.id != '1'?item.id:''}}<span v-if="item.id == '0' || item.id == '1'"></span></p>
+        <p>{{item.name}}</p>
+        <p>{{item.num}}</p>
+        <p>{{item.value}}</p>
+      </div>
+    </div>
+    <!--<p class="position-null-p" v-if="!config.data[0]">暂无数据</p>-->
+    <p class="position-null-p" v-if="!selectedItems[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">
@@ -23,6 +37,7 @@
           oddRowBGC: 'rgba(0,66,138,0.0)',
           evenRowBGC: 'rgba(0,66,138,0.0)',
           header: ['', '设施房间', '使用人次', '使用率'],
+          carousel:'page',
           data: [
             // ['<span class="span_1"><span></span></span>','行1列1', '行1列2', '行1列3'],
             // ['<span class="span_2"><span></span></span>','行2列1', '行2列2', '行2列3'],
@@ -38,6 +53,10 @@
         usageSwitchTime:600000,
         usageTimer:null,
         roomNames:[],
+        maxList:[],
+        currentIndex:0,
+        selectedItems:[],
+        timer:null,
       }
     },
     created() {
@@ -71,9 +90,10 @@
         let self = this
         this.$set(this.config,'data',[]);
         dashboardsResearchUsage(this.roomNames).then(res => {
-          let list = []
+          let list = [];
           for (let i = 0; i < res.data.length; i++) {
             let obj = {
+              id:i,
               name: res.data[i].roomNumValue,
               num: res.data[i].usageCount,
               value: this.accMul(res.data[i].usageRate,100).toFixed(0)+'%'
@@ -81,22 +101,77 @@
             }
             list.push(obj)
           }
-          // list = this.sortByPercentageDesc(list)
-          let newList = [];
-          for(let i=0;i<list.length;i++){
-            if(i==0){
-              newList.push(['<span class="span_1"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
-            }else if(i==1){
-              newList.push(['<span class="span_2"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
-            }else if(i==1){
-              newList.push(['<span class="span_3"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
-            }else{
-              newList.push(['<span class="span_num"><span>'+(i+1)+'</span></span>',list[i].name, list[i].num+'', list[i].value])
-            }
-          }
-          this.$set(this.config,'data',newList)
+          this.$set(this,'maxList',JSON.parse(JSON.stringify(list)));
+          this.startTimer();
+          // let list = []
+          // for (let i = 0; i < res.data.length; i++) {
+          //   let obj = {
+          //     name: res.data[i].roomNumValue,
+          //     num: res.data[i].usageCount,
+          //     value: this.accMul(res.data[i].usageRate,100).toFixed(0)+'%'
+          //     // value: res.data[i].usageRate
+          //   }
+          //   list.push(obj)
+          // }
+          // // list = this.sortByPercentageDesc(list)
+          // let newList = [];
+          // for(let i=0;i<list.length;i++){
+          //   if(i==0){
+          //     newList.push(['<span class="span_1"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
+          //   }else if(i==1){
+          //     newList.push(['<span class="span_2"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
+          //   }else if(i==1){
+          //     newList.push(['<span class="span_3"><span></span></span>',list[i].name, list[i].num+'', list[i].value])
+          //   }else{
+          //     newList.push(['<span class="span_num"><span>'+(i+1)+'</span></span>',list[i].name, list[i].num+'', list[i].value])
+          //   }
+          // }
+          // this.$set(this.config,'data',newList)
         })
       },
+      getNextItems() {
+        // 计算需要获取的项目数量
+        const remaining = this.maxList.length - this.currentIndex;
+        const takeCount = Math.min(8, remaining);
+        // 获取项目
+        const newItems = this.maxList.slice(this.currentIndex, this.currentIndex + takeCount);
+        this.selectedItems = [...newItems];
+        // 更新索引
+        this.currentIndex += takeCount;
+        // 如果到达列表末尾，重置索引
+        if (this.currentIndex >= this.maxList.length) {
+          this.currentIndex = 0;
+        }
+        // 如果获取的数量不足8个，补充获取剩余部分
+        // if (takeCount < 8) {
+        //   const remainingItems = this.maxList.slice(0, 8 - takeCount);
+        //   this.selectedItems = [...remainingItems];
+        //   this.currentIndex = 8 - takeCount;
+        //   console.log('selectedItems2',this.selectedItems)
+        // }
+      },
+      startTimer() {
+        // 先立即获取一次
+        this.getNextItems();
+        clearInterval(this.timer);
+        // 设置定时器每10秒获取一次
+        this.timer = setInterval(() => {
+          this.getNextItems();
+        }, 10000);
+      },
+      stopTimer() {
+        if (this.timer) {
+          clearInterval(this.timer);
+          this.timer = null;
+        }
+      },
+
+
+
+
+
+
+
       calculatePercentage(numerator, denominator, options = {}) {
         if (typeof numerator !== 'number' || typeof denominator !== 'number') {
           throw new TypeError('分子和分母必须是数字')
@@ -274,5 +349,73 @@
         }
       }
     }
+    .for-max-big-box{
+      width:470px;
+      height:440px;
+      margin:54px 0 0 30px;
+      .for-title-box{
+        display: flex;
+        background: rgba(0,66,138,0.5);
+        height:40px;
+        line-height:40px;
+        font-size: 14px;
+        text-align: center;
+        /*font-family: Source Han Sans, Source Han Sans;*/
+        font-weight: 400;
+        p:nth-child(1){
+          width:176px;
+        }
+        p:nth-child(2){
+          width:202px;
+        }
+        p:nth-child(3){
+          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%;
+          }
+        }
+        .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%;
+          }
+        }
+        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;
+        }
+      }
+    }
   }
 </style>