studenthotel_data/src/components/rightCenter.vue

<template>
  <div class="cointan">
    <div class="title1">
      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
      <div style="margin-left:25px;line-height: 22px;">班级未归人员统计</div>
    </div>
    <!-- 表格 -->
    <div class="xia-table">
      <el-table
        v-loading="loading"
        :data="tableData"  size="mini"
        :row-style="tableRowClassName"
        :header-cell-style="{ color: 'rgba(0, 218, 216, 1)',background: 'transparent',height:'32 !important',fontSize:'16' }"
      >
      <!-- :cell-style="{background: '#4EC8FF'}" -->
        <el-table-column prop="clazz" label="班级名称" align="center"/>
        <el-table-column prop="totalPeople" label="入住人数" align="center" />
        <el-table-column prop="noReturnBedroom" label="闭寝未归" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rightCenter',
  props: {
    msg: String
  },
  data() {
    return {
      loading:false,
      tableData:[
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
      ],
      size:0,//总条数
      build:'',//楼栋
      token:'',//请求头token
    }
  },
  mounted(){
    this.token=sessionStorage.getItem('token')
    this.build=sessionStorage.getItem('build')
    this.getWeigui()
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      let stylejson = {};
      if(rowIndex%2==1){
        return stylejson;
      }else{
        stylejson.background = "rgba(0, 72, 91, 0.4)";// 背景颜色
        return stylejson;
      }
    },
    //班级未归人员统计
    getWeigui(){
      this.tableData=[]
      this.$axios.get('/auto/face-recognition/classesCounted?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
      {
        headers: {
        "token": this.token,
        },
      }
      ).then(res => {
        if (res.data.success) {
          this.size=res.data.data.total
          // console.log(this.studentList)

          this.$axios.get('/auto/face-recognition/classesCounted?build=1栋&build=2栋&size='+this.size,
          {
            headers: {
            "token": this.token,
            },
          }
          ).then(res => {
          if (res.data.success) {
            // 未归班级人员
            res.data.data.records.forEach(data => {
              this.tableData.push(data)
            })
            // console.log(this.studentList)
          }
        })
        }
      })
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 428px;
  height: 296px;
  background-image: url('../assets/rightCenter/background.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 表格
.xia-table{
  position: absolute;
  margin: 47px 0 0 21px;
  height: 228px;
  width: 383px;
  overflow-y: auto;
  // overflow-x: hidden;
}
/* eslint-disable */
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
  }
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    color: #fff;
    background-color: transparent;
    font-size: 14px !important;
    height: 38px !important;
  }
  ::v-deep .el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 0px;
    padding-right: 0px;
}
  // 鼠标悬停时背景颜色设置
  ::v-deep .el-table tbody tr:hover > td {
    background-color: rgba(0, 72, 91, 0.4) !important;
  }
  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background:rgba(0, 72, 91, 0.4);
  }
  ::v-deep .el-table__header-wrapper {
    background-color: transparent;
  }
  // 斑马线隔行换色设置颜色
  ::v-deep
    .el-table--striped
    .el-table__body
    tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
    td {
    background-color: rgba($color: #00485B, $alpha: 0.4);
  }
  // 表格间横线
  // 清除表格默认下边框
  ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
      border-bottom: 0px solid #EBEEF5;
  }
  ::v-deep .el-table__cell,
  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }
  ::v-deep .el-table::before {
    width: 0 !important;
  }
  ::v-deep .el-table__inner-wrapper::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px !important;
  }
  ::v-deep .el-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 30px !important;
}
// 加载中
>>>.el-loading-mask {
    position: absolute;
    z-index: 2000;
    background-color: rgba(255,255,255,0);
    margin: 0;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .3s;
}
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
// 表格隔行颜色不同
>>>.el-table .warning-row {
    background: #f7faff;
  }
  >>>.el-table .success-row {
    background: #ebf1fb;
  }
</style>