hi-ucs/front/src/views/abilityStatistics/components/AbilityRanking.vue

<template>
  <div class="ability-ranking">
    <div class="main">
      <div class="top">
        能力排行
        <span class="line"></span>
      </div>
      <div class="tabClass">
        <div v-for="(item, index) in tabData" :key="item" class="tabClass-son">
          <div
            class="tabClass-photo"
            @click="tabswitch(item, index)"
            :style="{
              backgroundImage: `url(${photoOld[index]}) `,
            }"
          ></div>
          <div
            style="position: relative"
            :class="taboldName == item ? 'bianlan' : ''"
            @click="tabswitch(item, index)"
          >
            {{ item }}
            <a-tooltip placement="right">
              <template #title>
                <span v-if="item === '好评榜'">
                  根据能力能力评价平均分排名，申请无评分则计3分，排名相同时按上架时间倒序排列
                </span>
                <span v-else-if="item === '热门榜'">
                  根据近30天能力申请量排名，申请量相同时按收藏量、访问量以及上架时间进行倒序排列
                </span>
                <span v-else-if="item === '明星榜'">
                  采取5分制，根据浏览量、收藏量、申请量以及评价平均分以占比1:2:3:4计算综合评分，综合评分相同时按上架时间倒序排列
                </span>
                <span v-else>
                  根据能力15日增幅排名，增幅相同时按上架时间倒序排列
                </span>
              </template>

              <svg
                t="1666146422372"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4749"
                width="20"
                height="20"
                style="position: absolute"
              >
                <path
                  d="M530.64 211.33a36 36 0 1 1-36 36 36 36 0 0 1 36-36z m66.86 193.53l-90.2 336.63a90.25 90.25 0 0 0 62.93-41.33c0-0.07 0.61-1 0 0a11.15 11.15 0 0 1 20.44 8.41l-6.44 24A108 108 0 0 1 452 809a36 36 0 0 1-25.45-44.09l90.2-336.63a90.26 90.26 0 0 0-62.93 41.34c0 0.06-0.61 1 0 0a11.15 11.15 0 0 1-20.44-8.42l6.44-24a108 108 0 0 1 132.28-76.37 36 36 0 0 1 25.4 44.03z"
                  p-id="4750"
                  fill="#707070"
                ></path>
              </svg>
            </a-tooltip>
          </div>
        </div>
      </div>
      <div class="content-bg">
        <div class="content">
          <div
            class="content-son"
            v-for="(item, index) in dataList"
            :key="item"
            @click="viewDetails(item.resourceId)"
          >
            <div class="content-son-css" style="position: relative">
              <div class="content-index">{{ index + 1 }}</div>
              <div class="content-neirong">{{ item.resourceName }}</div>
              <div class="content-fangwenliang" v-if="taboldName === '好评榜'">
                评分：{{ item.score }}
              </div>
              <div
                class="content-fangwenliang"
                v-else-if="taboldName === '热门榜'"
              >
                申请量：{{ item.applyCount }}
              </div>
              <div
                class="content-fangwenliang"
                v-else-if="taboldName === '明星榜'"
              >
                热度值：
                <a-rate v-model:value="item.fireNum" allow-half disabled>
                  <template #character>
                    <fire-outlined />
                  </template>
                </a-rate>
              </div>
              <div class="content-fangwenliang" v-else>
                <template v-if="item.isNew == 1">
                  增幅率：100%+
                  <svg
                    style="position: absolute; top: 6px; left: 0"
                    t="1666230976498"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3440"
                    width="50"
                    height="50"
                  >
                    <path
                      d="M0 0v1024L1024 0H0z m333.625806 576.412903L143.690323 540.077419l-1.651613 1.651613 112.309677 112.309678-21.470968 23.12258L82.580645 526.864516l23.122581-23.122581 188.283871 34.683871 1.651613-1.651612-112.309678-112.309678 23.122581-23.122581 150.296774 150.296775-23.122581 24.774193z m52.851613-52.851613l-150.296774-150.296774 107.354839-107.354839 19.819355 19.819355-84.232258 84.232258 42.941935 42.941936 79.277419-79.27742 19.819355 19.819355-79.277419 79.27742 47.896774 47.896774 89.187097-89.187097 19.819355 19.819355-112.309678 112.309677z m188.283871-188.283871l-24.774193 24.774194-193.23871-107.354839 26.425807-26.425806L528.516129 313.806452l1.651613-1.651613-85.883871-146.993549 24.774194-24.774193 146.993548 85.883871 1.651613-1.651613L528.516129 80.929032l26.425806-26.425806L660.645161 249.393548l-24.774193 24.774194-146.993549-85.883871-1.651613 1.651613 87.535484 145.341935z"
                      fill="#fa4002"
                      p-id="3441"
                    ></path>
                  </svg>
                </template>
                <template v-else>增幅率：{{ item.growthRate }}</template>
              </div>
            </div>
          </div>
        </div>
        <div class="cha-kan-geng-duo-father" @click="jumpPage()">
          <span>查看更多</span>
          <span class="cha-kan-geng-duo"></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  // import { onMounted } from 'vue'
  import {
    // pageWithAttrs,
    getPraiseList,
    getPopularList,
    getStarList,
    getPotentialList,
  } from '@/api/abilityStatistics'
  import { useRouter } from 'vue-router'
  import { FireOutlined } from '@ant-design/icons-vue'
  const router = useRouter()
  //查看详情方法
  function viewDetails(id) {
    console.log('id=========>', id)
    // router.push({
    //   path: '/details',
    //   query: {
    //     id: id,
    //   },
    // })
    const detailPage = router.resolve({
      path: '/details', // 跳转的页面路由
      query: {
        id: id,
        hiddenBackFlag: true,
      },
    })
    window.open(detailPage.href, '_blank')
  }
  // 获取榜单数据
  const praiseList = ref([])
  const popularList = ref([])
  const starList = ref([])
  const potentialList = ref([])
  getPraiseList().then((res) => {
    praiseList.value = res.data.data
    res.data.data.map((val) => {
      val.score = Math.round(val.score * 100) / 100
    })
    tabswitch('好评榜', 0)
  })
  getPopularList().then((res) => {
    popularList.value = res.data.data
  })
  getStarList().then((res) => {
    starList.value = res.data.data
  })
  getPotentialList().then((res) => {
    potentialList.value = res.data.data
  })
  //跳转查看更多页面
  function jumpPage() {
    let snum = {
      select: '',
    }
    router.push({
      path: '/DetailsPageconetent',
      query: snum,
    })
  }
  //tab标签
  const tabData = ref(['好评榜', '热门榜', '明星榜', '潜力榜'])
  let photoOld = ref([
    require('../../../assets/abilityStatistics/once.png'),
    require('../../../assets/abilityStatistics/two.png'),
    require('../../../assets/abilityStatistics/three.png'),
    require('../../../assets/abilityStatistics/four.png'),
  ])
  let photoOldJiLu = ref([
    require('../../../assets/abilityStatistics/one.png'),
    require('../../../assets/abilityStatistics/two.png'),
    require('../../../assets/abilityStatistics/three.png'),
    require('../../../assets/abilityStatistics/four.png'),
  ])
  let photoNew = ref([
    require('../../../assets/abilityStatistics/once.png'),
    require('../../../assets/abilityStatistics/twos.png'),
    require('../../../assets/abilityStatistics/threes.png'),
    require('../../../assets/abilityStatistics/fours.png'),
  ])
  //记录点击的tab页
  let taboldName = ref('好评榜')
  const tabswitch = (name, index) => {
    photoOldJiLu.value.map((item, index) => {
      photoOld.value[index] = item
    })
    photoOld.value[index] = photoNew.value[index]
    console.log('name===========>', name)
    switch (name) {
      case '好评榜':
        dataList.value = praiseList.value
        break
      case '热门榜':
        dataList.value = popularList.value
        break
      case '明星榜':
        dataList.value = starList.value
        break
      case '潜力榜':
        dataList.value = potentialList.value
        break
    }
    taboldName.value = name
  }
  //能力排行接口
  let dataList = ref([]) //数据初始化
  // const mySelectMostPopular = (name) => {
  //   const data = {
  //     deptIds: [],
  //     districtId: '',
  //     infoList: [],
  //     name: '',
  //     orderField: name,
  //     orderType: 'DESC',
  //     pageNum: 1,
  //     pageSize: 10,
  //     type: '',
  //   }
  //   pageWithAttrs(data).then((res) => {
  //     dataList.value = res.data.data.records
  //     console.log('aaaaaa111aaaaaaa', res)
  //   })
  // }
  // onMounted(() => {
  //   watch(
  //     tabName,
  //     (value) => {
  //       mySelectMostPopular(value)
  //     },
  //     { deep: true }
  //   )
  //   mySelectMostPopular(tabName.value)
  // })
</script>
<style lang="less" scoped>
  .ability-ranking {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    .main {
      width: 100%;
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: wrap;
      .top {
        font-size: 30px;
        color: #000;
        text-align: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-bottom: -10px;
        .line {
          width: 34px;
          height: 3px;
          background-color: #0058e1;
          margin-top: 8px;
        }
      }
      .tabClass {
        height: 150px;
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        .tabClass-son {
          width: 260px;
          padding-top: 30px;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 18px;
          div {
            cursor: pointer;
          }
          .tabClass-photo {
            width: 106px;
            height: 106px;
          }
          .bianlan {
            color: #0058e1;
          }
        }
      }
      .content-bg {
        width: 100%;
        background: #f1f4fb;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 36px;
        padding-bottom: 80px;
        .content {
          width: 1300px;
          .content-son:nth-child(1) {
            background: url('~@/assets/abilityStatistics/ability-enhancement-one.png');
            background-position: center;
          }
          .content-son:nth-child(2) {
            background: url('~@/assets/abilityStatistics/ability-enhancement-two.png');
            background-position: center;
          }
          .content-son:nth-child(3) {
            background: url('~@/assets/abilityStatistics/ability-enhancement-three.png');
            background-position: center;
          }
          .content-son {
            display: inline-block;
            width: 245px;
            height: 150px;
            align-items: center;
            text-align: center;
            background: url('~@/assets/abilityStatistics/ability-enhancement-four.png');
            background-position: center;
            margin-bottom: 17px;
            margin-right: 5px;
            border-radius: 2px;
            border: 1px solid #f1f4fb;
            box-shadow: 0px 8px 20px rgba(0, 88, 225, 0);
            cursor: pointer;
            .content-son-css {
              display: flex;
              flex-direction: column;
              align-items: center;
              padding-top: 5px;
              padding: 2px;
              .content-index {
                // padding-left: 15px;
                text-align: center;
                margin-bottom: 20px;
                font-size: 20px;
                color: #734204;
              }
              .content-neirong {
                font-size: 18px;
                font-weight: 600;
                width: 215px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                margin-bottom: 20px;
                word-break: break-all;
              }
              .content-fangwenliang {
                width: 215px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                color: #999999;
                margin-bottom: 20px;
                word-break: break-all;
              }
            }
          }
          .content-son:hover {
            border-radius: 2px;
            border: 1px solid #0058e1;
            box-shadow: 0px 8px 20px rgba(0, 88, 225, 0.3);
          }
        }
        .cha-kan-geng-duo-father {
          cursor: pointer;
          text-align: center;
          margin-top: 24px;
          width: 100px;
          height: 24px;
          line-height: 24px;
          margin-left: center;
        }
        .cha-kan-geng-duo-father:hover {
          border-radius: 2px;
          background-color: rgba(1, 102, 255, 0.3);
        }
        .cha-kan-geng-duo {
          display: inline-block;
          height: 10px;
          width: 10px;
          background: url('~@/assets/newHome/gd2.png');
          margin-left: 3px;
        }
      }
    }
  }
</style>