You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
369 lines
9.9 KiB
369 lines
9.9 KiB
7 months ago
|
<template>
|
||
|
|
<div class="table-view" id="tableView">
|
||
|
|
<div class="thead">
|
||
|
|
<div v-for="(value,key,index) in thead" :key="index" :class="'flex'+index">{{value}}</div>
|
||
|
|
</div>
|
||
|
|
<div class="tbodymain" @mouseenter="bodyMouseEnter" @mouseleave="bodyMouseLeave">
|
||
|
|
<div class="tbody b1" ref="tbody1">
|
||
|
|
<div v-for="item in tableDatas1" :key="item.id" class="row">
|
||
|
|
<div v-for="(value,key,index) in item" :key="index" :class="'flex'+index">
|
||
|
|
<!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
|
||
|
|
<span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)]>{{value}}</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tbody b2" ref="tbody2">
|
||
|
|
<div v-for="item in tableDatas2" :key="item.id" class="row">
|
||
|
|
<div v-for="(value,key,index) in item" :key="index" :class="'flex'+index">
|
||
|
|
<!-- <marquee v-if="key=='positon' && value.length>fontScroll" behavior="scroll" scrolldelay="200" @mouseenter="marqueeStop($event)" @mouseleave="marqueeStart($event)">{{value}}</marquee> -->
|
||
|
|
<span :class=[timeHandle(key),colorHandle(key,value),scrollHandle(key,value)]>{{value}}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'baisicTable',
|
||
|
|
props: {
|
||
|
|
datas:{
|
||
|
|
type:Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
thead:{
|
||
|
|
type:Array,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
fontScroll:{
|
||
|
|
type:Number,
|
||
|
|
default:14
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
timeOut:null,
|
||
|
|
srolltime:null,
|
||
|
|
tableDatas1:[],
|
||
|
|
tableDatas2:[],
|
||
|
|
pageIndex:0,
|
||
|
|
isColScroll:true,
|
||
|
|
total:0,
|
||
|
|
curPage:0,
|
||
|
|
|
||
|
|
height:26,
|
||
|
|
|
||
|
|
tableDatas:[]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
datas:{
|
||
|
|
handler(newval){
|
||
|
|
this.tableDatas = newval;
|
||
|
|
this.changDatas();
|
||
|
|
},
|
||
|
|
deep:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.tableDatas = this.datas;
|
||
|
|
let len = this.tableDatas.length;
|
||
|
|
if(len>=14){
|
||
|
|
this.tableDatas1 = this.tableDatas.slice(0,7);
|
||
|
|
this.tableDatas2 = this.tableDatas.slice(7,14);
|
||
|
|
}else if(len>7 && len<14){
|
||
|
|
this.tableDatas1 = this.tableDatas.slice(0,7);
|
||
|
|
this.tableDatas2 = this.tableDatas.slice(7,len);
|
||
|
|
let addData = this.tableDatas.slice(0,7-this.tableDatas2.length);
|
||
|
|
this.tableDatas2 = this.tableDatas2.concat(addData);
|
||
|
|
}else if(len <= 7){
|
||
|
|
this.tableDatas1 = this.tableDatas;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if(this.tableDatas.length>7){
|
||
|
|
this.timeIntervalHandle();
|
||
|
|
}else{
|
||
|
|
this.tableDatas1 = this.tableDatas;
|
||
|
|
}
|
||
|
|
if(this.tableDatas.length>14){
|
||
|
|
this.changDatas();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
changDatas(){
|
||
|
|
let len = this.tableDatas.length;
|
||
|
|
|
||
|
|
this.page = Math.ceil(len/7);
|
||
|
|
let endNum = len%7;
|
||
|
|
if(endNum>0){
|
||
|
|
let addNum = 7-endNum;
|
||
|
|
let addArr = this.tableDatas.slice(0,addNum);
|
||
|
|
this.tableDatas = this.tableDatas.concat(addArr);
|
||
|
|
}
|
||
|
|
this.curPage = 1;
|
||
|
|
},
|
||
|
|
bodyMouseEnter(){
|
||
|
|
this.isColScroll = false;
|
||
|
|
},
|
||
|
|
bodyMouseLeave(){
|
||
|
|
this.isColScroll = true;
|
||
|
|
this.srollHandle();
|
||
|
|
},
|
||
|
|
marqueeStart(e){
|
||
|
|
e.currentTarget.start();
|
||
|
|
},
|
||
|
|
marqueeStop(e){
|
||
|
|
e.currentTarget.stop();
|
||
|
|
},
|
||
|
|
timeIntervalHandle(){
|
||
|
|
this.$refs.tbody1.style.top = `${0}px`;
|
||
|
|
this.$refs.tbody2.style.top = `${182}px`;
|
||
|
|
setTimeout(this.srollHandle,3000);
|
||
|
|
},
|
||
|
|
srollHandle(){
|
||
|
|
if(!this.isColScroll) return;
|
||
|
|
let scrollH = 0;
|
||
|
|
let _this = this;
|
||
|
|
clearInterval(this.srolltime);
|
||
|
|
clearTimeout(this.timeOut);
|
||
|
|
this.srolltime = setInterval(function(){
|
||
|
|
scrollH += 2;
|
||
|
|
_this.$refs.tbody1.style.top = (parseInt(_this.$refs.tbody1.style.top) - 2)+"px";
|
||
|
|
_this.$refs.tbody2.style.top = (parseInt(_this.$refs.tbody2.style.top) - 2)+"px";
|
||
|
|
// console.log("执行");
|
||
|
|
if(scrollH>=26){
|
||
|
|
clearInterval(_this.srolltime);
|
||
|
|
if(parseInt(_this.$refs.tbody1.style.top)<=-182){
|
||
|
|
_this.$refs.tbody1.style.top = 182+'px';
|
||
|
|
if(_this.page > 2){
|
||
|
|
_this.updateData(1);
|
||
|
|
}
|
||
|
|
}else if(parseInt(_this.$refs.tbody2.style.top)<=-182){
|
||
|
|
_this.$refs.tbody2.style.top = 182+'px';
|
||
|
|
if(_this.page > 2){
|
||
|
|
_this.updateData(2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_this.timeOut = setTimeout(_this.srollHandle,1500);
|
||
|
|
}
|
||
|
|
},24);
|
||
|
|
},
|
||
|
|
updateData(id){
|
||
|
|
this.curPage++;
|
||
|
|
if(this.curPage>=this.page){
|
||
|
|
this.curPage = 0;
|
||
|
|
}
|
||
|
|
let start = parseInt(this.curPage*7);
|
||
|
|
let end = start+7;
|
||
|
|
let getData = this.tableDatas.slice(start,end);
|
||
|
|
if(id==1){
|
||
|
|
this.tableDatas1 = getData;
|
||
|
|
}else{
|
||
|
|
this.tableDatas2 = getData;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
timeHandle(key){
|
||
|
|
if(key=="time"){
|
||
|
|
return 'time';
|
||
|
|
}else{
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scrollHandle(key,value){
|
||
|
|
if(key=='positon' && value.length>this.fontScroll){
|
||
|
|
return 'animate';
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
colorHandle(key,value){
|
||
|
|
if(key=="color"){
|
||
|
|
if(value.indexOf('蓝') != -1){
|
||
|
|
return 'blue';
|
||
|
|
}else if(value.indexOf('黄') != -1){
|
||
|
|
return 'yellow';
|
||
|
|
}else if(value.indexOf('绿') != -1){
|
||
|
|
return 'green';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.table-view{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: 1px solid #0E748A;
|
||
|
|
color: #FFFFFF;
|
||
|
|
background-color: #04465B;
|
||
|
|
font-size: 10px;
|
||
|
|
.thead{
|
||
|
|
display: flex;
|
||
|
|
background-color: #005062;
|
||
|
|
border-bottom: 1px solid #0E748A;
|
||
|
|
div{
|
||
|
|
flex: 1;
|
||
|
|
text-align: left;
|
||
|
|
flex-wrap:nowrap;
|
||
|
|
opacity: 0.85;
|
||
|
|
margin: 5px 10px;
|
||
|
|
word-break:keep-all;
|
||
|
|
white-space:nowrap;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.flex0{
|
||
|
|
flex:1;
|
||
|
|
}
|
||
|
|
.flex1{
|
||
|
|
flex:1;
|
||
|
|
}
|
||
|
|
.flex2{
|
||
|
|
flex:3;
|
||
|
|
}
|
||
|
|
.flex3{
|
||
|
|
flex:2.3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.tbodymain{
|
||
|
|
position: relative;
|
||
|
|
height: 183px;
|
||
|
|
|
||
|
|
overflow: hidden;
|
||
|
|
.tbody{
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
top:0px;
|
||
|
|
border-top: none;
|
||
|
|
height: 182px;
|
||
|
|
|
||
|
|
.row:nth-child(odd){
|
||
|
|
background-color: rgba(0,31,49,0.4);
|
||
|
|
}
|
||
|
|
.row:nth-child(even){
|
||
|
|
background-color: rgba(0,70,105,0.4);
|
||
|
|
}
|
||
|
|
.row{
|
||
|
|
height: 26px;
|
||
|
|
display: flex;
|
||
|
|
text-align: left;
|
||
|
|
flex-wrap:nowrap;
|
||
|
|
div{
|
||
|
|
flex: 1;//平均份
|
||
|
|
margin: 5px 12px;
|
||
|
|
text-align: left;
|
||
|
|
flex-wrap:nowrap;
|
||
|
|
word-break:keep-all;
|
||
|
|
white-space:nowrap;
|
||
|
|
overflow:hidden;
|
||
|
|
span{
|
||
|
|
opacity: 0.65;
|
||
|
|
}
|
||
|
|
marquee{
|
||
|
|
opacity: 0.65;
|
||
|
|
}
|
||
|
|
.blue{
|
||
|
|
background-color:rgba(87, 208, 235, 0.2);
|
||
|
|
color: #57D0EB;
|
||
|
|
padding: 0px 5px;
|
||
|
|
border:1px solid rgba(87, 208, 235, 0.4);
|
||
|
|
border-radius: 1px;
|
||
|
|
opacity: 1;
|
||
|
|
font-size: 8px;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
.yellow{
|
||
|
|
background-color:rgba(235, 211, 87, 0.2);
|
||
|
|
color: #EBD357;
|
||
|
|
padding: 0px 5px;
|
||
|
|
border:1px solid rgba(235, 211, 87, 0.4);
|
||
|
|
border-radius: 1px;
|
||
|
|
opacity: 1;
|
||
|
|
font-size: 8px;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
.green{
|
||
|
|
background-color:rgba(87, 235, 155, 0.2);
|
||
|
|
color: #57EB9B;
|
||
|
|
padding: 0px 5px;
|
||
|
|
border:1px solid rgba(87, 235, 155, 0.4);
|
||
|
|
border-radius: 1px;
|
||
|
|
opacity: 1;
|
||
|
|
font-size: 8px;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
.time{
|
||
|
|
background-color: #012539;
|
||
|
|
border-radius: 2px;
|
||
|
|
padding: 5px 10px;
|
||
|
|
overflow:hidden;
|
||
|
|
opacity: 0.7;
|
||
|
|
font-size: 8px;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
.animate {
|
||
|
|
display: inline-block;
|
||
|
|
animation: 13s wordsLoop linear infinite normal;
|
||
|
|
}
|
||
|
|
@keyframes wordsLoop {
|
||
|
|
0% {
|
||
|
|
transform: translateX(100%);
|
||
|
|
-webkit-transform: translateX(100%);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
-webkit-transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes wordsLoop {
|
||
|
|
0% {
|
||
|
|
transform: translateX(0px);
|
||
|
|
-webkit-transform: translateX(0px);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
-webkit-transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.flex0{
|
||
|
|
flex:1;
|
||
|
|
}
|
||
|
|
.flex1{
|
||
|
|
flex:1;
|
||
|
|
}
|
||
|
|
.flex2{
|
||
|
|
flex:3;
|
||
|
|
}
|
||
|
|
.flex3{
|
||
|
|
flex:2.3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
|
||
|
|
}
|
||
|
|
.b2{
|
||
|
|
.row:nth-child(odd){
|
||
|
|
background-color: rgba(0,70,105,0.4);
|
||
|
|
}
|
||
|
|
.row:nth-child(even){
|
||
|
|
background-color: rgba(0,31,49,0.4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// .b1{
|
||
|
|
// top:0px;
|
||
|
|
// }
|
||
|
|
// .b2{
|
||
|
|
// top: -40px;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|