<template>
|
<div class="event-top5">
|
<div class="little-title">同类事件TOP5统计</div>
|
<div class="top5Content">
|
<div class="top5Item" v-for="(item, index) in list.filter(i => i.name)">
|
<div class="top5ItemImg" />
|
<div class="top5ItemIndex" :style="{ color: item.color }">{{ index + 1 }}</div>
|
<div class="top5ItemName">{{ item.name }}</div>
|
<div class="top5ItemRatio">
|
<div class="top5ItemRatioInner" :style="ratioFun(item)"></div>
|
</div>
|
<div class="top5ItemCount">
|
<span>{{ item.value }}</span
|
>件
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { getEventTopFive } from '@/api/home/event'
|
import indexPoint from '@/assets/images/home/eventOverviewDetail/indexPoint.png'
|
|
const params = inject('eventOverviewParams')
|
|
watch(params, () => {
|
getData()
|
})
|
|
const ratioFun = row => ({
|
background: row.bGColor,
|
width: `${row.width}%`,
|
})
|
|
const colorOptions = [
|
{ color: '#F02C2C', bGColor: 'linear-gradient( 90deg, rgba(165,12,12,0) 0%, #F02C2C 78%, #DDECFD 100%)' },
|
{ color: '#FFA500', bGColor: 'linear-gradient( 90deg, rgba(229,154,33,0) 0%, #E59A21 78%, #EAFEFF 100%)' },
|
{ color: '#FFFF00', bGColor: 'linear-gradient( 90deg, rgba(242,255,54,0) 0%, #F2FF36 78%, #FFF2D9 100%)' },
|
{ color: '#7D7BFF', bGColor: 'linear-gradient( 90deg, rgba(29,27,155,0) 0%, #322EE2 67%, #C7C6FF 100%)' },
|
{ color: '#23BDF5', bGColor: 'linear-gradient( 90deg, rgba(35,189,245,0) 0%, #23BDF5 67%, #C7C6FF 100%)' },
|
]
|
|
const list = ref([])
|
// 获取数据
|
const getData = async () => {
|
const res = await getEventTopFive(params.value)
|
const resData = res?.data?.data || []
|
const maxVal = resData[0]?.value || 100
|
list.value = resData
|
list.value.forEach((item, index) => {
|
list.value[index] = {
|
...item,
|
...colorOptions[index],
|
width: (item.value / maxVal) * 100,
|
}
|
})
|
|
}
|
|
onMounted(() => {
|
getData()
|
})
|
</script>
|
<style scoped lang="scss">
|
.event-top5 {
|
height: 288px;
|
|
|
.top5Content {
|
margin-top: 10px;
|
display: flex;
|
flex-direction: column;
|
gap: 14px 0;
|
height: 250px;
|
|
.top5Item {
|
display: flex;
|
align-items: center;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: 400;
|
font-size: 12px;
|
color: #7883a7;
|
line-height: 14px;
|
width: 328px;
|
height: 32px;
|
background: rgba(14, 21, 40, 0.5);
|
border-radius: 1px 1px 1px 1px;
|
padding-left: 6px;
|
|
.top5ItemImg {
|
width: 7px;
|
height: 7px;
|
background: #5294E1;
|
border-radius: 1px;
|
}
|
|
.top5ItemIndex {
|
margin-left: 6px;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: normal;
|
font-size: 16px;
|
color: #e94545;
|
line-height: 19px;
|
margin-right: 2px;
|
}
|
|
.top5ItemName {
|
width: 48px;
|
}
|
|
.top5ItemRatio {
|
width: 198px;
|
height: 4px;
|
background: #2d3a5c;
|
border-radius: 0px 0px 0px 0px;
|
margin: 0 7px;
|
position: relative;
|
|
.top5ItemRatioInner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
height: 100%;
|
&:after {
|
display: block;
|
content: '';
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 1px;
|
height: 12px;
|
background: #B8DAFF;
|
box-shadow: 0px 0px 8px 0px rgba(212,231,252,0.5);
|
border-radius: 0px 0px 0px 0px;
|
}
|
}
|
}
|
|
.top5ItemCount {
|
font-family: Segoe UI, Segoe UI;
|
font-weight: bold;
|
font-size: 14px;
|
line-height: 16px;
|
text-align: left;
|
font-style: normal;
|
text-transform: none;
|
|
span {
|
color: white;
|
}
|
}
|
}
|
}
|
}
|
|
.little-title {
|
background: url('@/assets/images/little-title-bg.png') no-repeat center / 100% 100%;
|
width: 372px;
|
height: 28px;
|
line-height: 28px;
|
padding-left: 16px;
|
font-size: 14px;
|
}
|
</style>
|
