renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 全域数据引擎页面优化

Browse Source
This commit is contained in:
rd
2025-07-01 14:34:16 +08:00
parent a486d42fa5
commit 57e45d991e
22 changed files with 739 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/components/dataEngine/keyBrandMovement.vue
View File

@ -1,72 +1,54 @@
<!-- eslint-disable vue/no-duplicate-attributes -->
<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-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">重点品牌列表</span>
<a-tooltip>
<template #content
>基于该行业中近期提及频次高、用户互动活跃的品牌内容，筛选出关注度较高的代表性品牌。</template
>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-table
:columns="columns"
:data="dataList"
:filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<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-tooltip>
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</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-tooltip>
<template #content>仅基于品牌出现频次。</template>
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</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-tooltip>
<template #content>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
<template #rank="{ record }">
@ -79,44 +61,30 @@
<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>
<div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
<icon-arrow-up v-if="record.trend > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ `${record.trend * 100}%` }}
</div>
</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-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">舆情 & 敏感动态</span>
<a-tooltip>
<template #content
>基于情绪分析与敏感词识别，对行业内容中的负面或争议性话题进行监测，辅助判断舆情风险动态。</template
>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
</a-table>
</a-space>
@ -276,7 +244,7 @@ watch(selectedIndustry, () => {
});
</script>
<style scoped>
<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
background-color: var(--color-fill-2);
@ -306,4 +274,18 @@ watch(selectedIndustry, () => {
color: #737478 !important;
margin-left: -10px;
}
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style>