hycw-ui/src/views/home/components/PointsRanking/index.vue

<template>
  <div class="ranking-c">
    <div class="c-title flex-center">
      <span>积分排行榜</span>
      <div>
        <el-select
          style="width: 110px"
          v-model="tabType"
          size="mini"
          @change="getList"
        >
          <el-option label="班组" :value="1"></el-option>
          <el-option label="工作负责人" :value="2"></el-option>
          <el-option label="作业人员" :value="3"></el-option>
        </el-select>
        <el-select
          class="ml10"
          style="width: 90px"
          v-if="tabType == 1"
          v-model="queryParams.teamType"
          size="mini"
          @change="getList"
        >
          <el-option label="内部" :value="1"></el-option>
          <el-option label="外部" :value="2"></el-option>
        </el-select>
        <el-select
          class="ml10"
          size="mini"
          style="width: 90px"
          v-model="queryParams.isBlack"
          @change="getList"
        >
          <el-option label="红榜" value=""></el-option>
          <el-option label="黑榜" value="1"></el-option>
        </el-select>
      </div>
    </div>

    <el-table
      :v-loading="loading"
      :data="tableData"
      height="100%"
      v-if="tabType == 1"
    >
      <el-table-column prop="rankNum" label="排名" width="80" align="center">
        <template slot-scope="scope">
          <img
            class="icon-box"
            v-if="scope.$index < 3"
            :src="iconMap[`no${scope.$index + 1}`]"
          />
          <span v-else> {{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="teamName" label="队伍名称" align="center">
      </el-table-column>
      <el-table-column prop="score" label="得分" align="center">
      </el-table-column>
    </el-table>

    <el-table
      :v-loading="loading"
      :data="tableData"
      height="100%"
      v-if="tabType == 2"
    >
      <el-table-column prop="rankNum" label="排名" width="80" align="center">
        <template slot-scope="scope">
          <img
            class="icon-box"
            v-if="scope.$index < 3"
            :src="iconMap[`no${scope.$index + 1}`]"
          />
          <span v-else> {{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="单位" align="center">
      </el-table-column>
      <el-table-column prop="managerName" label="负责人名称" align="center">
      </el-table-column>
      <el-table-column prop="score" label="得分" align="center">
      </el-table-column>
    </el-table>

    <el-table
      :v-loading="loading"
      :data="tableData"
      height="100%"
      v-if="tabType == 3"
    >
      <el-table-column prop="rankNum" label="排名" width="80" align="center">
        <template slot-scope="scope">
          <img
            class="icon-box"
            v-if="scope.row['rankNum'] < 4"
            :src="iconMap[`no${scope.row['rankNum']}`]"
          />
          <span v-else> {{ scope.row["rankNum"] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="单位" align="center">
      </el-table-column>
      <el-table-column prop="workUserName" label="作业人员" align="center">
      </el-table-column>
      <el-table-column prop="score" label="得分" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import no1 from "@/assets/images/名次-第1名.png";
import no2 from "@/assets/images/名次-第2名.png";
import no3 from "@/assets/images/名次-第3名.png";
import {
  managerRankList,
  teamRankList,
  workerRankList,
} from "@/api/secure/pdm-score-rank";
import moment from "moment/moment";
export default {
  data() {
    return {
      iconMap: {
        no1,
        no2,
        no3,
      },
      loading: false,
      tabType: 1,
      queryParams: {
        type: "reportYear",
        teamType: 1,
        isBlack: "",
        reportYear: moment(new Date()).format("yyyy"),
        pageNum: 1,
        pageSize: 99,
      },
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      const funMap = {
        1: teamRankList,
        2: managerRankList,
        3: workerRankList,
      };
      funMap[this.tabType](this.queryParams).then((response) => {
        this.tableData = response.rows;
        // this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.c-title {
  border-left: 4px solid #00a4ff;
  padding-left: 10px;
  color: #00a4ff;
}
.ranking-c {
  height: 100%;
  width: 100%;
}
::v-deep {
  .el-table__empty-text {
    color: #fff;
  }
  .el-table tr {
    background-color: transparent !important;
  }
  /* 修改表格单元格边框颜色 */
  .el-table th,
  .el-table td {
    border-bottom-color: #02367c !important;
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(11, 42, 96, 0.8) !important;
  }
  .el-radio {
    color: #fff;
  }
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon-box {
  width: 23px;
  height: 23px;
}
.ml10 {
  margin-left: 10px;
}
</style>