111

jihongshun

8 天以前 0c741cdda7ef9935a20d3090dfea97e1ce8ae754

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<template>
  <table :style="{width:width+'px',height:height+'px'}" style="border-collapse: collapse;color: #fff;text-align: center;">
    <colgroup v-if="option.attribute.showIndex" style="width: 60px;"/>
    <colgroup v-for="(item) in option.attribute.columns" :key="item.colKey" :style="{width: item.width>0?item.width+'px':''}"/>
    <thead style="background-color: #001A59;"
           :style="{backgroundImage: 'linear-gradient('+option.attribute.theadBg.toString()+')',
           height: option.attribute.theadHeight+'px',color:option.attribute.theadColor,
           fontSize:option.attribute.theadSize+'px'}">
    <tr>
      <td v-if="option.attribute.showIndex">序号</td>
      <td v-for="(column) in option.attribute.columns" :key="column.colKey" :ref="column.colKey">{{column.title}}</td>
    </tr>
    </thead>
    <tbody is="transition-group" name="bounce" appear>
    <tr style="position: absolute;" v-for="(temp,index) in rollData" :key="temp.rowNum"
        :style="{width: width+'px',height: rowHeight+'px',marginTop: index * rowHeight+'px',
        backgroundColor: temp.rowNum % 2=== 0 ? option.attribute.oddRowBg:option.attribute.evenRowBg,
        color:option.attribute.tbodyColor,fontSize: option.attribute.tbodySize+'px'}">
      <td v-if="option.attribute.showIndex" style="width: 60px;" :style="{lineHeight:rowHeight+'px'}">{{temp.rowNum+1}}</td>
      <td v-for="(column) in option.attribute.columns" :key="column.colKey" :style="{width: colWidths[column.colKey]+'px'}">
        <div style="position: absolute;top: 50%;transform: translateY(-50%);" :style="{width: colWidths[column.colKey]+'px'}">
          <img v-if="column.type === 'img'" style="width: 60px;height: 60px;"
               :src="temp[column.colKey].indexOf('http') === 0 ? temp[column.colKey] : fileUrl+ temp[column.colKey]"/>
          <span v-else>{{temp[column.colKey]}}</span>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
</template>
 
<script>
import {getDataJson, pollingRefresh} from "@/utils/refreshCptData";
import {fileUrl} from '/env'
export default {
  name: "cpt-scroll-table",
  props: {
    option: Object,
    width: Number,
    height: Number,
    show: Boolean
  },
  watch:{
    'option.attribute.showLine':{
      handler() {
        this.computeRowHeight();
        this.scrollTable();
      },
      deep: true//深度监听
    },
    width(){
      this.computeColWidth();
    },
    height(){
      this.computeRowHeight();
    },
    show(val){
      if (val){
        this.computeColWidth();
      }
    },
  },
  data() {
    return {
      fileUrl,
      colWidths:{},
      rowHeight:10,
      tableData:[],
      rollData:[],
      cptData: '',
      uuid: null,
      timer:null
    }
  },
  created() {
    this.uuid = require('uuid').v1();
    this.refreshCptData();
  },
  mounted() {
    this.computeColWidth();
    this.computeRowHeight();
  },
  methods: {
    computeRowHeight(){
      this.rowHeight = (this.height - this.option.attribute.theadHeight)/this.option.attribute.showLine
    },
    computeColWidth(){
      const that = this;
      that.colWidths={};
      this.option.attribute.columns.forEach(item => {
        that.colWidths[item.colKey] = that.$refs[item.colKey][0].clientWidth
      })
    },
    refreshCptData() {
      pollingRefresh(this.uuid, this.option.cptDataForm, this.loadData)
    },
    loadData() {
      getDataJson(this.option.cptDataForm).then(res => {
        let parse = res;
        for (let i = 0; i < parse.length; i++) {
          parse[i].rowNum = i
        }
        this.tableData = parse;
        this.scrollTable();
      });
    },
    scrollTable(){
      const that = this;
      if(this.timer){
        clearInterval(this.timer);
      }
      that.rollData = that.tableData.slice(0,this.option.attribute.showLine)
      if(this.option.attribute.showLine >= that.tableData.length){
        return
      }
      let i = this.option.attribute.showLine;
      this.timer = setInterval(()=>{
        that.rollData.shift();
        that.rollData.push(that.tableData[i]);
        i++;
        if(i >= that.tableData.length) {
          i = 0
        }
      }, 2000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>
 
<style scoped>
.bounce-enter {
  transform: scaleY(.5);
  transform-origin:100% 100%;
}
.bounce-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
.bounce-enter-active,.bounce-leave-active {
  transition: all .5s;
}
.bounce-move {
  transition: transform .5s;
}
</style>