lg_frontend/pages/visual/table/index.vue

<template>
  <div class="table-content">
    <custom-table :table-title="tableTitle" :standard-value="standardValue" :data-source="dataSource"/>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      tableTitle: [
        {
          title: '监测设备',
          dataIndex: 'pointName',
          width: '160px'
        },
        {
          title: '一氧化碳[0.5%VOL]',
          dataIndex: 'COValue',
          width: '160px'
        },
        {
          title: '二氧化硫[30mg/m³]',
          dataIndex: 'SO2Value',
          width: '160px'
        },
        {
          title: '氮氧化物[10mg/L]',
          dataIndex: 'NOValue',
          width: '160px'
        },
        {
          title: '臭氧[80⏜ppm]',
          dataIndex: 'O3Value',
          width: '160px'
        },
        {
          title: 'PM10[50μg/m³]',
          dataIndex: 'PM10Value',
          width: '160px'
        }
      ],
      standardValue: {
        COValue: 0.5,
        SO2Value: 30,
        NOValue: 10,
        O3Value: 80,
        PM10Value: 50
      },
      dataSource: [
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        },
        {
          pointName: '监测设备名称',
          COValue: 2,
          COUnit: '%VOL',
          SO2Value: 30,
          SO2Unit: 'mg/m³',
          NOValue: 20,
          NOUnit: 'mg/L',
          O3Value: 10,
          O3Unit: 'ppm',
          PM10Value: 10,
          PM10Unit: 'μg/m³',
          PM25Value: 30,
          PM25Unit: 'μg/m³'
        }
      ]

    }
  }
}
</script>

<style scoped lang="less">
.table-content {
  height: 800px;
  width: 1000px;
}
</style>