#

luxiaotao1123

2023-07-31 a01ef9820aba0095bc28e294e2cf8bca138dcbc5

 src/components/datav/scrollBoard.vue

@@ -5,34 +5,91 @@
</template>

<script>
import axios from 'axios'

export default {
  name: 'ScrollBoard',
  data () {
  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)'
        // 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;
        let configData = [];
        if (list) {
          for (let i = 0; i < list.length; i++) {
            let item = [];
            item.push(list[i].项目号===null?"":list[i].项目号);
            item.push(list[i].品名===null?"":list[i].品名);
            item.push(list[i].生产数量 + "");
            item.push(list[i].完工数量 + "");
            item.push(list[i].计划完工日===null?"":this.coverData(list[i].计划完工日));
            configData.push(item);
          }
        }

        this.config = {
          header: ['项目号', '品名', '生产数量', '完工数量', '计划完工日'],
          data: configData,
          index: true,
          columnWidth: [50, 90, 220, 95, 95, 170],
          align: ['center'],
          rowNum: 7,
          headerBGC: '#1981f6',
          headerHeight: 45,
          oddRowBGC: 'rgba(0, 44, 81, 0.8)',
          evenRowBGC: 'rgba(10, 29, 50, 0.8)'
        }
      })
    },
    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, 30000)
  }
}
</script>