310 lines
9.2 KiB
Vue
310 lines
9.2 KiB
Vue
<template>
|
||
<view>
|
||
<topHeader ref="topHeaderRef" @click="search"></topHeader>
|
||
<!-- 重点品牌列表 -->
|
||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||
<a-space align="center">
|
||
<span>重点品牌列表 </span>
|
||
<a-popover position="tl">
|
||
<a-button type="primary" class="pop-btn">
|
||
<template #icon>
|
||
<icon-question-circle />
|
||
</template>
|
||
</a-button>
|
||
<template #content>
|
||
<p style="margin: 0">基于该行业中近期提及频次高、用户互动活跃的品牌内容，筛选出关注度较高的代表性品牌。</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
<a-table
|
||
:columns="columns"
|
||
:data="dataList"
|
||
:filter-icon-align-left="alignLeft"
|
||
@change="handleChange"
|
||
:scroll="true"
|
||
:pagination="false"
|
||
>
|
||
<template #hotTitle>
|
||
<a-space>
|
||
<span>热度指数</span>
|
||
<a-popover position="tl">
|
||
<a-button type="primary" class="pop-btn2">
|
||
<template #icon>
|
||
<icon-question-circle />
|
||
</template>
|
||
</a-button>
|
||
<template #content>
|
||
<p style="margin: 0">综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
</template>
|
||
<template #trendTitle>
|
||
<a-space>
|
||
<span>变化幅度</span>
|
||
<a-popover position="tl">
|
||
<a-button type="primary" class="pop-btn2">
|
||
<template #icon>
|
||
<icon-question-circle />
|
||
</template>
|
||
</a-button>
|
||
<template #content>
|
||
<p style="margin: 0">仅基于品牌出现频次。</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
</template>
|
||
<template #volume_rateTitle>
|
||
<a-space>
|
||
<span>占总声量比例</span>
|
||
<a-popover position="tr">
|
||
<a-button type="primary" class="pop-btn2">
|
||
<template #icon>
|
||
<icon-question-circle />
|
||
</template>
|
||
</a-button>
|
||
<template #content>
|
||
<p style="margin: 0">该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
</template>
|
||
<template #rank="{ record }">
|
||
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
|
||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||
<img v-else-if="record.rank == 3" :src="topImages[2]" style="width: 25px; height: 17px" />
|
||
<span v-else>{{ record.rank }}</span>
|
||
</template>
|
||
<template #hot="{ record }">
|
||
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||
</template>
|
||
<template #trend="{ record }">
|
||
<a-statistic
|
||
style="font-size: 14px"
|
||
v-if="record.trend > 0"
|
||
:value="record.trend * 100"
|
||
:value-style="{ color: '#F64B31' }"
|
||
>
|
||
<template #prefix>
|
||
<icon-arrow-rise />
|
||
</template>
|
||
<template #suffix>%</template>
|
||
</a-statistic>
|
||
<a-statistic v-else style="font-size: 14px" :value="record.trend * 100" :value-style="{ color: '#25C883' }">
|
||
<template #prefix>
|
||
<icon-arrow-rise />
|
||
</template>
|
||
<template #suffix>%</template>
|
||
</a-statistic>
|
||
</template>
|
||
<template #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
|
||
</a-table>
|
||
</a-space>
|
||
<!-- 舆情 & 敏感动态-->
|
||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0">
|
||
<a-space align="center">
|
||
<span>舆情 & 敏感动态 </span>
|
||
<a-popover position="tl">
|
||
<a-button type="primary" class="pop-btn">
|
||
<template #icon>
|
||
<icon-question-circle />
|
||
</template>
|
||
</a-button>
|
||
<template #content>
|
||
<p style="margin: 0">
|
||
基于情绪分析与敏感词识别，对行业内容中的负面或争议性话题进行监测，辅助判断舆情风险动态。
|
||
</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
|
||
</a-table>
|
||
</a-space>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import topHeader from './topHeader.vue';
|
||
import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
|
||
import { ref, onMounted, computed } from 'vue';
|
||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||
import star2 from '@/assets/img/hottranslation/star-fill2.png';
|
||
import star3 from '@/assets/img/hottranslation/star-fill3.png';
|
||
import star4 from '@/assets/img/hottranslation/star-fill4.png';
|
||
import star5 from '@/assets/img/hottranslation/star-fill5.png';
|
||
import top1 from '@/assets/img/captcha/top1.svg';
|
||
import top2 from '@/assets/img/captcha/top2.svg';
|
||
import top3 from '@/assets/img/captcha/top3.svg';
|
||
const topImages = [top1, top2, top3];
|
||
const starImages = [star1, star2, star3, star4, star5];
|
||
const topHeaderRef = ref();
|
||
// 从topHeader获取统一的状态
|
||
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
|
||
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
|
||
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
|
||
const dataList = ref([]);
|
||
const otherList = ref([]);
|
||
const columns = [
|
||
{
|
||
title: '排名',
|
||
dataIndex: 'rank',
|
||
slotName: 'rank',
|
||
width: 60,
|
||
minWidth: 60,
|
||
},
|
||
{
|
||
title: '品牌名称',
|
||
dataIndex: 'name',
|
||
width: 120,
|
||
minWidth: 120,
|
||
},
|
||
{
|
||
titleSlotName: 'hotTitle',
|
||
width: 180,
|
||
minWidth: 180,
|
||
title: '热度指数',
|
||
dataIndex: 'hot',
|
||
sortable: {
|
||
sortDirections: ['ascend', 'descend'],
|
||
},
|
||
slotName: 'hot',
|
||
},
|
||
{
|
||
titleSlotName: 'trendTitle',
|
||
title: '变化幅度',
|
||
dataIndex: 'trend',
|
||
width: 180,
|
||
minWidth: 180,
|
||
sortable: {
|
||
sortDirections: ['ascend', 'descend'],
|
||
},
|
||
slotName: 'trend',
|
||
},
|
||
{
|
||
titleSlotName: 'volume_rateTitle',
|
||
title: '占总声量比例',
|
||
dataIndex: 'volumeRate',
|
||
width: 180,
|
||
minWidth: 180,
|
||
sortable: {
|
||
sortDirections: ['ascend', 'descend'],
|
||
},
|
||
slotName: 'volumeRate',
|
||
},
|
||
];
|
||
const columns2 = [
|
||
{
|
||
title: '品牌',
|
||
dataIndex: 'brand',
|
||
width: 100,
|
||
minWidth: 100,
|
||
},
|
||
{
|
||
title: '事件标题',
|
||
dataIndex: 'title',
|
||
width: 180,
|
||
minWidth: 180,
|
||
sortable: {},
|
||
},
|
||
{
|
||
title: '事件详情',
|
||
dataIndex: 'content',
|
||
width: 220,
|
||
minWidth: 220,
|
||
sortable: {},
|
||
},
|
||
];
|
||
const search = () => {
|
||
getFocusBrandsList();
|
||
getEventDynamicsList();
|
||
};
|
||
const getFocusBrandsList = async () => {
|
||
const params = {
|
||
industry_id: selectedIndustry.value,
|
||
time_dimension: selectedTimePeriod.value,
|
||
};
|
||
if (selectedIndustry.value == undefined) {
|
||
return;
|
||
}
|
||
if (selectedSubCategory.value == undefined) {
|
||
return;
|
||
}
|
||
if (selectedSubCategory.value != 0) {
|
||
params['industry_id'] = selectedSubCategory.value;
|
||
}
|
||
const res = await fetchFocusBrandsList(params);
|
||
if (res.code == 200) {
|
||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||
dataList.value = res.data;
|
||
}
|
||
};
|
||
|
||
const getEventDynamicsList = async () => {
|
||
const params = {
|
||
industry_id: selectedIndustry.value,
|
||
time_dimension: selectedTimePeriod.value,
|
||
};
|
||
if (selectedIndustry.value == undefined) {
|
||
return;
|
||
}
|
||
if (selectedSubCategory.value == undefined) {
|
||
return;
|
||
}
|
||
if (selectedSubCategory.value != 0) {
|
||
params['industry_id'] = selectedSubCategory.value;
|
||
}
|
||
const res = await fetchEventDynamicsList(params);
|
||
if (res.code == 200) {
|
||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||
otherList.value = res.data;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
getFocusBrandsList();
|
||
getEventDynamicsList();
|
||
});
|
||
// 监听筛选条件变化
|
||
watch([selectedTimePeriod, selectedSubCategory], () => {
|
||
getFocusBrandsList();
|
||
getEventDynamicsList();
|
||
});
|
||
watch(selectedIndustry, () => {
|
||
selectedSubCategory.value = 0;
|
||
getFocusBrandsList();
|
||
getEventDynamicsList;
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 自定义样式 */
|
||
:deep(.arco-table-th) {
|
||
background-color: var(--color-fill-2);
|
||
}
|
||
|
||
:deep(.arco-table-tr):hover {
|
||
background-color: var(--color-fill-1);
|
||
}
|
||
:deep(.arco-statistic-content .arco-statistic-value-integer) {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.pop-btn {
|
||
background: #fff !important;
|
||
border-color: #fff !important;
|
||
color: #737478 !important;
|
||
margin-left: -5px;
|
||
}
|
||
|
||
:deep(.arco-btn-outline) {
|
||
color: #6d4cfe !important;
|
||
border-color: #6d4cfe !important;
|
||
}
|
||
.pop-btn2 {
|
||
background: transparent !important;
|
||
border-color: transparent !important;
|
||
color: #737478 !important;
|
||
margin-left: -10px;
|
||
}
|
||
</style>
|