lg_frontend/components/peak-coal-monitoring/MonitorData.vue

<template>
<div class="monitor-data">
  <peak-secondary-title :title="title"/>
  <div class="table-content">
    <peak-custom-table :table-title="tableTitle" :data-source="dataSource" :limit-move-num="4"/>
  </div>
</div>
</template>

<script>
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable";
export default {
  name: "MonitorData",
  components: {PeakCustomTable, PeakSecondaryTitle},
  data(){
    return{
      title: '厂区环境趋势',
      tableTitle: [
        {
          title: '设备掉线',
          dataIndex: 'deviceName',
          width: '35%'
        },
        {
          title: '故障异常',
          dataIndex: 'errorName',
          width: '25%'
        },
        {
          title: '异常报警',
          dataIndex: 'errorImg',
          width: '40%'
        }
      ],
      dataSource: [
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        },
        {
          deviceName: '高炉',
          errorName: '异常',
          errorImg: '红灯'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";
.monitor-data{
  height: 100%;
  width: 100%;
  .flex-column;
  .table-content{
    padding-top: 20px;
    flex: 1;
    height: 0;
  }
}
</style>