102 lines
3.1 KiB
Vue
102 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<a-spin :loading="loading" style="width: 100%">
|
||
|
|
<a-card class="general-card" :header-style="{ paddingBottom: '0' }" :body-style="{ padding: '17px 20px 21px 20px' }">
|
||
|
|
<template #title>
|
||
|
|
{{ $t('workplace.popularContent') }}
|
||
|
|
</template>
|
||
|
|
<template #extra>
|
||
|
|
<a-link>{{ $t('workplace.viewMore') }}</a-link>
|
||
|
|
</template>
|
||
|
|
<a-space direction="vertical" :size="10" fill>
|
||
|
|
<a-radio-group v-model:model-value="type" type="button" @change="typeChange as any">
|
||
|
|
<a-radio value="text">
|
||
|
|
{{ $t('workplace.popularContent.text') }}
|
||
|
|
</a-radio>
|
||
|
|
<a-radio value="image">
|
||
|
|
{{ $t('workplace.popularContent.image') }}
|
||
|
|
</a-radio>
|
||
|
|
<a-radio value="video">
|
||
|
|
{{ $t('workplace.popularContent.video') }}
|
||
|
|
</a-radio>
|
||
|
|
</a-radio-group>
|
||
|
|
<a-table :data="renderList" :pagination="false" :bordered="false" :scroll="{ x: '100%', y: '264px' }">
|
||
|
|
<template #columns>
|
||
|
|
<a-table-column title="排名" data-index="key"></a-table-column>
|
||
|
|
<a-table-column title="内容标题" data-index="title">
|
||
|
|
<template #cell="{ record }">
|
||
|
|
<a-typography-paragraph
|
||
|
|
:ellipsis="{
|
||
|
|
rows: 1,
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
{{ record.title }}
|
||
|
|
</a-typography-paragraph>
|
||
|
|
</template>
|
||
|
|
</a-table-column>
|
||
|
|
<a-table-column title="点击量" data-index="clickNumber"></a-table-column>
|
||
|
|
<a-table-column
|
||
|
|
title="日涨幅"
|
||
|
|
data-index="increases"
|
||
|
|
:sortable="{
|
||
|
|
sortDirections: ['ascend', 'descend'],
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<template #cell="{ record }">
|
||
|
|
<div class="increases-cell">
|
||
|
|
<span>{{ record.increases }}%</span>
|
||
|
|
<icon-caret-up v-if="record.increases !== 0" style="color: #f53f3f; font-size: 8px" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</a-table-column>
|
||
|
|
</template>
|
||
|
|
</a-table>
|
||
|
|
</a-space>
|
||
|
|
</a-card>
|
||
|
|
</a-spin>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import useLoading from '@/hooks/loading'
|
||
|
|
import { queryPopularList } from '@/api/dashboard'
|
||
|
|
import type { TableData } from '@arco-design/web-vue/es/table/interface'
|
||
|
|
|
||
|
|
const type = ref('text')
|
||
|
|
const { loading, setLoading } = useLoading()
|
||
|
|
const renderList = ref<TableData[]>()
|
||
|
|
const fetchData = async (contentType: string) => {
|
||
|
|
try {
|
||
|
|
setLoading(true)
|
||
|
|
const { data } = await queryPopularList({ type: contentType })
|
||
|
|
renderList.value = data
|
||
|
|
} catch (err) {
|
||
|
|
// you can report use errorHandler or other
|
||
|
|
} finally {
|
||
|
|
setLoading(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const typeChange = (contentType: string) => {
|
||
|
|
fetchData(contentType)
|
||
|
|
}
|
||
|
|
fetchData('text')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
.general-card {
|
||
|
|
min-height: 395px;
|
||
|
|
}
|
||
|
|
:deep(.arco-table-tr) {
|
||
|
|
height: 44px;
|
||
|
|
.arco-typography {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.increases-cell {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
span {
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|