按不同时间渲染表格数据

一个前端不会用git

已于 2022-04-20 10:20:29 修改

阅读量401

点赞数

分类专栏： javascript 文章标签： vue.js

于 2022-04-16 16:39:07 首次发布

本文链接：https://blog.csdn.net/maoxiaohei_/article/details/124216008

版权

javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

在这里插入图片描述

{
  "result" : 1,
  "msg" : "操作成功！",
  "data" : {
    "chart" : [ {
      "temp_stamp" : "2022-04-16 09:41:12",
      "temp_face" : 1,
      "temp_battery" : 11,
      "temp_a" : 0.0,
      "temp_line" : 1,
      "temp_b" : 0.0,
      "device_id" : 103,
      "temp_well" : 105,
      "temp_envir" : 1,
      "temp_c" : 0.0
    }, {
      "temp_stamp" : "2022-04-16 10:15:10",
      "temp_face" : 1,
      "temp_battery" : 1,
      "temp_a" : 0.0,
      "temp_line" : 1,
      "temp_b" : 0.0,
      "device_id" : 103,
      "temp_well" : 105,
      "temp_envir" : 1,
      "temp_c" : 0.0
    } ]
  }
}

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="title" label="设备名称" width="150"></el-table-column>
    <el-table-column label="温度">
      <template v-for="i in tableColumns">
        <el-table-column :prop="i" :label="i" border></el-table-column>
      </template>
    </el-table-column>
  </el-table>
</template>

export default {
  props: ['device_id'],
  name: 'charts',
  data() {
    return {
      chart: null,
      tableData: [],
      tableColumns: []
    }
  },

  beforeMount() {
    this.getConnectionCharts()
  },

  methods: {
    //获取信息
    getConnectionCharts() {
      getConnectionCharts({
        device_id: 422,
        // 查询全部数据
        type: 5
      }).then(res => {
        console.log(res, 'res')
        const [list, columns] = this.formatTableData(res.data.chart)
        this.tableData = list
        this.tableColumns = columns
      }).catch(err => {
        this.tableData = []
      })
    },
    formatTableData(data) {
      const keys = {
        temp_face: '表皮温度',
        temp_battery: '电池温度',
        temp_line: '线芯温度',
        temp_a: 'a相温度',
        temp_b: 'b相温度',
        temp_c: 'c相温度',
        temp_envir: '环境温度'
      }
      const result = Object.keys(keys).map(i => ({ title: keys[i], key: i }))
      console.log(keys, 'keys')

      result.forEach(item => {

        data.forEach(i => {
          const k = i.temp_stamp.split(' ')[1].substring(0, 5)
          item[k] = i[item.key]
        })
      })
      const tableColumns = data.map(i => i.temp_stamp.split(' ')[1].substring(0, 5))
      return [result, tableColumns]
    }
  }
}
</script>