wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

排行榜功能开发

This commit is contained in:
a0049873 2022-10-20 10:09:41 +08:00
parent c6429869a4
commit 6b1c3f30a4
2 changed files with 179 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
front/src/api/abilityStatistics.js
View File

@ -47,6 +47,38 @@ export function pageWithAttrs(data) {
data,
})
}
//获取好评榜
export function getPraiseList(params) {
return request({
url: '/resource/getPraiseList',
method: 'get',
params,
})
}
//获取热门榜
export function getPopularList(params) {
return request({
url: '/resource/getPopularList',
method: 'get',
params,
})
}
//获取明星榜
export function getStarList(params) {
return request({
url: '/resource/getStarList',
method: 'get',
params,
})
}
//获取潜力榜
export function getPotentialList(params) {
return request({
url: '/resource/getPotentialList',
method: 'get',
params,
})
}
//能力统计-能力需求
export function capabilityRequirements(params) {
return request({

187
front/src/views/abilityStatistics/components/AbilityRanking.vue
View File

@ -15,10 +15,45 @@
}"
></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>
@ -28,12 +63,54 @@
class="content-son"
v-for="(item, index) in dataList"
:key="item"
@click="viewDetails(item.id)"
@click="viewDetails(item.resourceId)"
>
<div class="content-son-css">
<div class="content-son-css" style="position: relative">
<div class="content-index">{{ index + 1 }}</div>
<div class="content-neirong">{{ item.name }}</div>
<div class="content-fangwenliang">访问量：{{ item.visits }}</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>
@ -46,10 +123,17 @@
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
import { onMounted } from 'vue'
import { pageWithAttrs } from '@/api/abilityStatistics'
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) {
@ -61,6 +145,27 @@
},
})
}
// 获取榜单数据
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 = {
@ -93,7 +198,6 @@
])
//记录点击的tab页
let taboldName = ref('好评榜')
let tabName = ref('score')
const tabswitch = (name, index) => {
photoOldJiLu.value.map((item, index) => {
photoOld.value[index] = item
@ -102,49 +206,49 @@
console.log('name===========>', name)
switch (name) {
case '好评榜':
tabName.value = 'score'
dataList.value = praiseList.value
break
case '热门榜':
tabName.value = 'total'
dataList.value = popularList.value
break
case '明星榜':
tabName.value = 'visits'
dataList.value = starList.value
break
case '潜力榜':
tabName.value = 'collectCount'
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)
})
// 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 {
@ -234,6 +338,9 @@
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;
@ -242,7 +349,7 @@
padding-top: 5px;
padding: 2px;
.content-index {
padding-left: 15px;
// padding-left: 15px;
text-align: center;
margin-bottom: 20px;
font-size: 20px;