From 73866da94f8f6135510dca30e50ee01c9e616774 Mon Sep 17 00:00:00 2001
From: ljx <864490211@qq.com>
Date: Tue, 24 Sep 2024 10:15:16 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BF=BB=E9=A1=B5=E8=BD=AE=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/datav/index.vue    | 53 ++++++++++-------
 src/components/datav/pageRank.vue | 99 +++++++++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 22 deletions(-)
 create mode 100644 src/components/datav/pageRank.vue

diff --git a/src/components/datav/index.vue b/src/components/datav/index.vue
index d7e47f6..b5ac985 100644
--- a/src/components/datav/index.vue
+++ b/src/components/datav/index.vue
@@ -17,7 +17,7 @@
                   <p style="width: 0.5rem;text-align: center;">#</p>
                   <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                 </div>
-                <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                 <ul class="item" >
                   <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                     <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
@@ -26,7 +26,8 @@
                     <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                   </li>
                 </ul>
-                </vue-seamless-scroll>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
               </div>
               <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                 <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
@@ -41,16 +42,18 @@
                   <p style="width: 0.5rem;text-align: center;">#</p>
                   <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                 </div>
-                <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
-                <ul class="item" >
-                  <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
-                    <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
-                      <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div> 
-                    </div>
-                    <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
-                  </li>
-                </ul>
-                </vue-seamless-scroll>
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}"> -->
+                  <!-- <ul class="item">
+                    <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
+                      <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
+                        <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{index+1}}</div> 
+                      </div>
+                      <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+                    </li>
+                  </ul> -->
+                <!-- </vue-seamless-scroll> -->
+
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
               </div>
               <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                 <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
@@ -71,7 +74,7 @@
                   <p style="width: 0.5rem;text-align: center;">#</p>
                   <p v-for="(item,index) in rankHeader1" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                 </div>
-                <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                 <ul class="item" >
                   <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                     <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
@@ -80,7 +83,8 @@
                     <div v-for="i in rankHeader1" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                   </li>
                 </ul>
-                </vue-seamless-scroll>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
               </div>
               <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                 <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
@@ -95,7 +99,7 @@
                   <p style="width: 0.5rem;text-align: center;">#</p>
                   <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                 </div>
-                <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                 <ul class="item" >
                   <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                     <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
@@ -104,7 +108,8 @@
                     <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                   </li>
                 </ul>
-                </vue-seamless-scroll>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
               </div>
               <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                 <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
@@ -119,7 +124,7 @@
                   <p style="width: 0.5rem;text-align: center;">#</p>
                   <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                 </div>
-                <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                 <ul class="item" >
                   <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                     <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
@@ -128,7 +133,8 @@
                     <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                   </li>
                 </ul>
-                </vue-seamless-scroll>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
               </div>
               <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                 <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
@@ -143,7 +149,7 @@
                   <p style="width: 0.5rem;text-align: center;">#</p>
                   <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
                 </div>
-                <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
+                <!-- <vue-seamless-scroll style="height: calc(100% - 0.9rem);" :data="rcitem.data" class="warp" :classOption="{step:2,limitMoveNum:10}">
                 <ul class="item" >
                   <li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
                     <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
@@ -152,7 +158,8 @@
                     <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
                   </li>
                 </ul>
-                </vue-seamless-scroll>
+                </vue-seamless-scroll> -->
+                <page-rank :rcitem="rcitem" :warpId="'pageRank'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :pageSize="rcitem.setting.pageSize" :switchSpeed="rcitem.setting.switchSpeed"></page-rank>
               </div>
               <div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;">
                 <rose-chart :pieId="'roseChart'+rcitem.setting.rowNumber+rcitem.setting.columnNumber+rcindex" :chartData="rcitem" style="width: 100%;height: 100%;"/>
@@ -191,6 +198,7 @@ import cards from './cards'
 import rightTotal from './rightTotal.vue'
 import barChart from './barChart.vue'
 import vueSeamlessScroll from 'vue-seamless-scroll'
+import pageRank from './pageRank.vue'
 
 export default {
   name: 'DataView',
@@ -205,7 +213,8 @@ export default {
     cards,
     rightTotal,
     barChart,
-    vueSeamlessScroll
+    vueSeamlessScroll,
+    pageRank
   },
   data () {
     return {
@@ -402,7 +411,7 @@ export default {
     let that = this;
     setInterval(()=>{
       that.createdData(Aid)
-    }, 150000)
+    }, 900000)
   },
   methods: {
     createdData (Aid) {
diff --git a/src/components/datav/pageRank.vue b/src/components/datav/pageRank.vue
new file mode 100644
index 0000000..508f721
--- /dev/null
+++ b/src/components/datav/pageRank.vue
@@ -0,0 +1,99 @@
+<template>
+     <div class="warp" :id="warpId" style="height: calc(100% - 0.9rem);">
+        <ul class="item warpItem">
+        <li v-for="(item, index) in showData" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'">
+            <div style="width: 0.5rem;display: flex;align-items: center;justify-content: center;" class="rownum">
+            <div style="padding:0 0.05rem;background-color:#1981f6;color: #fff;height: 0.3rem;line-height: 0.3rem;border-radius: 0.05rem;">{{item.seq}}</div> 
+            </div>
+            <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
+        </li>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+    props:{
+        rcitem:{},
+        warpId:'',
+        pageSize:0,
+        switchSpeed:0,
+    },
+    data() {
+        return {
+            nowPgae:0,
+            showData:[],
+            allData:[],
+            timer:null,
+        }
+    },
+    mounted(){
+        console.log('mounted')
+        this.rcitem.data.forEach((item,index) => {
+            item.seq = index+1;
+        })
+        for(let i=0;i<this.rcitem.data.length;i += this.pageSize){
+            this.allData.push(this.rcitem.data.slice(i,i+this.pageSize));
+        }
+        // this.allData = this.rcitem.data;
+        // let warpbox = window.document.querySelector('#'+this.warpId);
+        // let warpItem = window.document.querySelector('#'+this.warpId+' .warpItem');
+        // let warpboxHeight = warpbox.clientHeight;
+        // let warpItemHeight = warpItem.clientHeight;
+        let warpPageNumber = this.allData.length;
+        let that = this;
+        that.showData = that.allData[0];
+        if(warpPageNumber>1){
+        this.timer = setInterval(()=>{
+            // that.pageNext(warpItem,warpPageNumber,warpboxHeight);
+            that.pageNext(warpPageNumber)
+        },this.switchSpeed*1000)
+        }
+       
+    },
+    methods:{
+        pageNext(allPage){
+            if(this.nowPgae<(allPage-1)){
+                // Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
+                this.nowPgae++;
+                this.showData = this.allData[this.nowPgae];
+               
+            }else{
+                this.nowPgae = 0;
+                this.showData = this.allData[this.nowPgae];
+                // Node.style.transform = `translateY(${-height*this.nowPgae}px)`;
+            }
+        }
+    },
+    beforeDestroy(){
+        console.log('beforeUnmount')
+        clearInterval(this.timer)
+    }
+}
+</script>
+<style lang="less">
+     .warp {
+    height: 100%;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 auto;
+      li,a {
+        display: block;
+        // height: 0.5rem;
+        line-height: 0.5rem;
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.2rem;
+      }
+      .rowStyle1{
+        background-color: rgba(10, 29, 50, 0.8);
+      }
+      .rowStyle2{
+        background-color: rgba(0, 44, 81, 0.8);
+      }
+    }
+  }
+</style>
\ No newline at end of file