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.
 
 
 
 
 
 

293 lines
9.1 KiB

<template>
<div class="table-view" id="tableView">
<div class="thead">
<div v-for="(value,key,index) in theadDatas" :key="index" :class="'flex'+index">{{value}}</div>
</div>
<div class="tbodymain">
<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"><span :class=[timeHandle(key),colorHandle(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"><span :class=[timeHandle(key),colorHandle(key,value)]>{{value}}</span></div>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue';
// import { init } from './js/index.js'
export default defineComponent({
name: 'baisicTable',
props: {},
data() {
return {
timeOut:null,
srolltime:null,
height:26,
tableDatas:[
{num:"沪866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"沪866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"沪866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"沪866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"沪866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"沪866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"沪866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"赣866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"赣866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"赣866B61",color:"黄色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"赣866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"赣866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"赣866B61",color:"绿色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"},
{num:"赣866B61",color:"蓝色",positon:"安徽省芜湖市镜湖区东路33号",time:"2020-09-12 12:00:03"}
],
theadDatas:{num:"车牌号",color:"车牌颜色",positon:"违停地点",time:"违停时间"},
tableDatas1:[],
tableDatas2:[],
pageIndex:0,
}
},
created() {
if(this.tableDatas.length>=14){
for(let i=0;i<7;i++){
this.tableDatas1.push(this.tableDatas[i]);
this.tableDatas2.push(this.tableDatas[i+7]);
}
}else{
}
},
mounted() {
// init();
if(this.tableDatas.length>7){
this.timeIntervalHandle();
}else{
this.tableDatas1 = this.tableDatas;
}
},
methods: {
timeIntervalHandle(){
// debugger;
console.log(this.$refs.tbody1);
// this.$refs.tbody1.scrollTop = -20;
this.$refs.tbody1.style.top = `${0}px`;
this.$refs.tbody2.style.top = `${182}px`;
// console.log(this.$refs.tbody1.scrollTop);
this.srollHanle();
},
changDatas(){
},
srollHanle(){
let scrollH = 0;
let _this = this;
this.srolltime = setInterval(function(){
scrollH += 2;
// debugger;
_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";
if(scrollH>=26){
clearInterval(_this.srolltime);
if(parseInt(_this.$refs.tbody1.style.top)<=-182){
_this.$refs.tbody1.style.top = 182+'px';
// _this.$refs.tbody2.style.top = 0+'px';
}else if(parseInt(_this.$refs.tbody2.style.top)<=-182){
_this.$refs.tbody2.style.top = 182+'px';
// _this.$refs.tbody1.style.top = 0+'px';
}
_this.timeOut = setTimeout(_this.srollHanle,1500);
}
},20)
},
timeHandle(key){
// debugger;
if(key=="time"){
return 'time';
}else{
return '';
}
},
colorHandle(key,value){
// debugger;
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;
// border: 1.5px solid #0E748A;
// box-shadow: 0 0 2px #00667C inset,0 0 0px rgb(0,153,184);
color: #FFFFFF;
background-color: #04465B;
font-size: 10px;
// text-transform: scale(0.75);
// transform:scale(0.5,1);
.thead{
display: flex;
background-color: #005062;
border-bottom: 1px solid #0E748A;
// padding: 10px 20px;
// position: relative;
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;
// width: 100%;
height: 183px;
overflow: hidden;
// display: flex;
// flex
.tbody{
position: absolute;
width: 100%;
top:0px;
border-top: none;
height: 182px;
// display: flex;
.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;
// justify-content:space-between;
// padding: 10px 20px;
text-align: left;
flex-wrap:nowrap;
// opacity: 0.65;
// background-color: #001F31;
div{
flex: 1;//平均份
// padding: 10px 20px;
margin: 5px 10px;
text-align: left;
flex-wrap:nowrap;
// opacity: 0.65;
word-break:keep-all; /* 不换行 */
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
span{
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;
}
}
.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>