jiahe_device/src/views/energySources/component/equipmentLoad.vue

<template>
  <div class="equipmentLoad box">
    <tit :title="'设备负载监控'">
      <div class="tit-r">监测明细</div>
    </tit>
    <el-table :data="tableData" style="width: 100%;" height="92%" :stripe="true" :size="mini"
      :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="设备名称">
      </el-table-column>
      <el-table-column prop="address" label="负载率">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="负载最长时段">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tit from "./tit.vue";
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: 29,
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: 0,
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: 29,
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: 29,
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: 29,
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: 29,
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: 29,
      }]
    };
  },
  components: {
    tit
  },
  created() {

  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        if (row.address > 0) {
          return 'trEven colorFB5E2D';
        } else {
          return 'trEven';
        }

      } else {
        if (row.address > 0) {
          return 'trOdd colorFB5E2D';
        } else {
          return 'trOdd';
        }
      }
    }
  },
};
</script>
<style></style>
<style lang="scss" scoped>
.equipmentLoad /deep/ .el-table,
.equipmentLoad /deep/ .el-table__expanded-cell {
  background-color: transparent;
  border: 0 !important;
}

.equipmentLoad /deep/ .el-table th,
.equipmentLoad /deep/ .el-table tr,
.equipmentLoad /deep/ .el-table td {
  background-color: transparent !important;
  border: 0 !important;
}
.equipmentLoad /deep/ .el-table td span{
  font-size: 0.14rem !important;
}

.equipmentLoad /deep/ .el-table::before {
  height: 0 !important;
}

.equipmentLoad /deep/ .trOdd td {
  color: #fff;
}

.equipmentLoad /deep/ .trEven td {
  color: #fff;
  background: rgba($color: #0de5ff, $alpha: 0.1) !important;
}

.equipmentLoad /deep/.colorFB5E2D td {
  color: #FB5E2D !important;
}

.box {
  width: 4.68rem;
  height: 3.7rem;
  box-sizing: border-box;
  background: url("../../../../public/img/energySources/equipmentLoad.png");
  background-size: 100% 100%;
  margin-right: 0.22rem;
  padding: 0.54rem 0.22rem 0 0.22rem;
  position: relative;
  .tit-r {
    font-size: 0.14rem;
    color: #0096FF;
    margin-top: 0.04rem;
  }

}
</style>