#
luxiaotao1123
2023-07-31 45a7b1a6bfb9afa52a6beae28c0f2252e86b7c76
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
<template>
  <div id="scroll-board">
    <dv-scroll-board :config="config" />
  </div>
</template>
 
<script>
import axios from 'axios'
 
export default {
  name: 'ScrollBoard',
  data() {
    return {
      config: {
        header: ['项目号', '品名', '生产数量', '完工数量', '计划完工日'],
        data: [
          ['2019-07-01 19:25:00', '路面危害-松散', '5', 'xxxxxxx'],
          ['2019-07-02 17:25:00', '路面危害-路面油污清理', '13', 'xxxxxxx'],
          ['2019-07-03 16:25:00', '交安设施-交通标志牌结构', '6', 'xxxxxxx'],
          ['2019-07-04 15:25:00', '路基危害-防尘网', '2', 'xxxxxxx'],
          ['2019-07-05 14:25:00', '交安设施-交通标志牌结构', '1', 'xxxxxxx'],
          ['2019-07-06 13:25:00', '路面危害-松散', '3', 'xxxxxxx'],
          ['2019-07-07 12:25:00', '路基危害-防尘网', '4', 'xxxxxxx'],
          ['2019-07-08 11:25:00', '路面危害-路面油污清理', '2', 'xxxxxxx'],
          ['2019-07-09 10:25:00', '交安设施-交通标志牌结构', '5', 'xxxxxxx'],
          ['2019-07-10 09:25:00', '路基危害-防尘网', '3', 'xxxxxxx']
        ],
        index: true,
        columnWidth: [50, 170, 300],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 45,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      }
    }
  },
  methods: {
    httpData() {
      const getApiData = async () => {
        return await axios.get(this.baseUrl + "data1", { params: {} })
      }
      getApiData().then(result => {
        let list = result.data.data;
        this.config.data = [];
        if (list) {
          for (let i = 0; i<list.length; i++) {
            let item = [];
            item.push(list[i].项目号);
            item.push(list[i].品名);
            item.push(list[i].生产数量);
            item.push(list[i].完工数量);
            item.push(this.coverData(list[i].计划完工日));
            this.config.data.push(item);
          }
        }
        console.log(JSON.stringify(this.config.data));
      })
    },
    coverData(date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var M = time.getMonth() + 1;
      M = M < 10 ? ("0" + M) : M;
      var d = time.getDate();
      d = d < 10 ? ("0" + d) : d;
      var h = time.getHours();
      h = h < 10 ? ("0" + h) : h;
      var m = time.getMinutes();
      m = m < 10 ? ("0" + m) : m;
      var s = time.getSeconds();
      s = s < 10 ? ("0" + s) : s;
      return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  mounted() {
    const { httpData } = this
    httpData()
    setInterval(this.httpData, 3000)
  }
}
</script>
 
<style lang="less">
#scroll-board {
  width: 50%;
  box-sizing: border-box;
  margin-left: 20px;
  height: 100%;
  overflow: hidden;
}
</style>