front/src/views/career/zhiyuan/yfyd.vue

<template>
  <div class="simulation">
    <el-card class="mt20 mb20">
      <div
        :style="{ 'background-image': backimg }"
        class="back"
      >
        <p class="f24 bold" style="color: #a6a6a6">
          SEGMENT OF RANKING
        </p>
        <p class="f24" style="color: #414141;">
          一分一段
        </p>
        <hr
          class="layui-bg-orange f24 bold mt10"
          style="width: 40px; height: 4px"
        />
      </div>
    </el-card>
    <el-card>
      <mx-search-group class="mb10" justify="end" :span="6" v-model="scoreRank" placeholder="请输入分数或位次"
                       @search="getList"/>
      <mx-condition ref="condition" :query-params="queryParams" :require-fields="requireFields"
                    :invisible-fields="invisibleFields"
                    use-alias-mapping tiny-margin-bottom @query="handleQuery"/>
      <div class="content mt15">
        <div class="table-wrap" v-loading="loading">
          <mx-table :rows="batchData" :propDefines="propDefines">
            <template #rank="{row}">
              <p>
                {{ row.highestRank == row.lowestRank ? `${row.highestRank}` : `${row.highestRank}~${row.lowestRank}` }}</p>
            </template>
            <template #score="{row}">
              <p>{{ row.score == row.maxScore ? `${row.score}` : `${row.score}~${row.maxScore}` }}</p>
            </template>
          </mx-table>
        </div>

        <pagination :total="pageForm.total" :autoScroll="false" :page.sync="pageForm.pageNum"
                    :limit.sync="pageForm.pageSize" @pagination="getList"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import {yfydList} from '@/api/webApi/career-other'
import MxCondition from '@/components/MxCondition/mx-condition'
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import Pagination from '@/components/Pagination'
import {mapGetters} from 'vuex'

export default {
  components: {
    MxCondition,
    Pagination,
    MxSearchGroup
  },
  data() {
    return {
      loading: false,
      queryParams: {
        yfydLocation: '',
        yfydYear: '',
        yfydMode: ''
      },
      requireFields: ['yfydLocation', 'yfydYear', 'yfydMode'],
      invisibleFields: ['yfydLocation'],
      firedParams: null,
      pageForm: {pageNum: 1, pageSize: 20, total: 0},
      backimg:
        'url(' + require('@/assets/images/career/icon_colleges.png') + ')',
      batchData: [],
      scoreRank: '',
      propDefines: {
        location: {
          label: '地域'
        },
        year: {
          label: '年份'
        },
        mode: {
          label: '科类'
        },
        score: {
          label: '分数',
          slot: 'score'
        },
        lowestRank: {
          label: '位次',
          slot: 'rank'
        },
        num: {
          label: '人数'
        },
        numTotal: {
          label: '累计人数'
        }
      }
    }
  },
  computed: {
    ...mapGetters(['currentUser']),
  },
  created() {
    this.queryParams.yfydLocation = this.currentUser.provinceName
  },
  methods: {
    getList() {
      this.getYfydList()
    },
    onChangePage(page) {
      this.getYfydList()
    },
    handleQuery(model) {
      this.firedParams = model
      this.pageForm.pageNum = 1
      this.getYfydList()
    },
    getYfydList() {
      this.loading = true
      yfydList({
        ...this.firedParams,
        scoreRank: this.scoreRank,
        ...this.pageForm
      }).then((res) => {
        this.batchData = res.rows
        this.pageForm.total = res.total
        console.log(res)
      }).finally(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: #47c6a2;
  margin-left: 0;
}

.back {
  padding: 30px;
  margin: 10px 0;
  background-color: white;
  background-repeat: no-repeat;
  background-position: bottom right;
}
</style>