SaaS-lib/lib/component/echarts/components/other/BasicTable copy 2.vue

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