dev
/
GScreenWEB_TPMes
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

翻页轮播

This commit is contained in:
ljx 2024-09-24 10:15:16 +08:00
parent 0de677cb57
commit 73866da94f
2 changed files with 130 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/datav/index.vue
View File

@ -17,7 +17,7 @@
<p style="width: 0.5rem;text-align: center;">#</p> <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> <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
</div> </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" > <ul class="item" >
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'"> <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="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> <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
</li> </li>
</ul> </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>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <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%;"/> <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 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> <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
</div> </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" > <!-- <ul class="item">
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'"> <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="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 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>
<div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></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> </li>
</ul> </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>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <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%;"/> <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 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> <p v-for="(item,index) in rankHeader1" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
</div> </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" > <ul class="item" >
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'"> <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="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> <div v-for="i in rankHeader1" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
</li> </li>
</ul> </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>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <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%;"/> <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 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> <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
</div> </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" > <ul class="item" >
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'"> <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="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> <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
</li> </li>
</ul> </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>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <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%;"/> <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 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> <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
</div> </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" > <ul class="item" >
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'"> <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="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> <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
</li> </li>
</ul> </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>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <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%;"/> <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 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> <p v-for="(item,index) in rcitem.columns" :key="item.code+index" :style="`width:${item.width};text-align:center;`">{{ item.name }}</p>
</div> </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" > <ul class="item" >
<li v-for="(item, index) in rcitem.data" :key="index" style="display: flex;" :class="index%2==0?'rowStyle1':'rowStyle2'"> <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="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> <div v-for="i in rcitem.columns" v-text="item[i.code]" :key="i.code" :style="`width:${i.width};text-align:center;`"></div>
</li> </li>
</ul> </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>
<div v-if="rcitem.setting.reportType == 'pie'" style="width: 100%;height: 100%;"> <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%;"/> <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 rightTotal from './rightTotal.vue'
import barChart from './barChart.vue' import barChart from './barChart.vue'
import vueSeamlessScroll from 'vue-seamless-scroll' import vueSeamlessScroll from 'vue-seamless-scroll'
import pageRank from './pageRank.vue'
export default { export default {
name: 'DataView', name: 'DataView',
@ -205,7 +213,8 @@ export default {
cards, cards,
rightTotal, rightTotal,
barChart, barChart,
vueSeamlessScroll vueSeamlessScroll,
pageRank
}, },
data () { data () {
return { return {
@ -402,7 +411,7 @@ export default {
let that = this; let that = this;
setInterval(()=>{ setInterval(()=>{
that.createdData(Aid) that.createdData(Aid)
}, 150000) }, 900000)
}, },
methods: { methods: {
createdData (Aid) { createdData (Aid) {

99
src/components/datav/pageRank.vue Normal file
View File

@ -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>