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

357
src/views/components/dataEngine/keyWord.vue
View File

@ -3,12 +3,15 @@
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- 关键词热度榜 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<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" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
@ -25,7 +28,7 @@
<span>热度指数</span>
<a-tooltip>
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="color-#737478" />
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
@ -34,7 +37,7 @@
<span>变化幅度</span>
<a-tooltip>
<template #content>仅基于关键词出现频次。</template>
<icon-question-circle size="14" class="color-#737478" />
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
@ -66,73 +69,68 @@
</a-table>
</a-space>
<!-- 行业情绪 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<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" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-space align="center">
<a-space>
<a-space style="width: 320px">
<div id="container" style="height: 180px; width: 180px"></div>
<a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
<a-space>
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
<span>正面情绪 </span>
<span style="width: 40px">{{ getFormatter(fellingRate[0] * 100) }}</span>
</a-space>
<a-space>
<span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
<span>负面情绪 </span>
<span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
</a-space>
</a-space>
</a-space>
<a-table
:columns="columns2"
:data="rowData"
:span-method="spanMethod"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<template #felling="{ record }">
<img
v-if="record.felling == '2'"
src="@/assets/img/hottranslation/good.png"
style="width: 16px; height: 16px"
/>
<img
v-else-if="record.felling == '1'"
src="@/assets/img/hottranslation/normal.png"
style="width: 16px; height: 16px"
/>
<img
v-else-if="record.felling == '0'"
src="@/assets/img/hottranslation/poor.png"
style="width: 16px; height: 16px"
/>
</template>
</a-table>
</a-space>
</a-space>
<div class="flex items-center w-100%">
<div v-show="fellingRate.length > 0" class="w-500px flex items-center">
<div id="container" class="w-300px h-300px"></div>
<div class="flex flex-col">
<div class="mb-12px flex items-center">
<div class="w-12px h-12px mr-10px bg-#25C883 rounded-50%"></div>
<span
>正面情绪 <span class="num">{{ getFormatter(fellingRate[0] * 100) }}</span>
</span>
</div>
<div class="flex items-center">
<div class="w-12px h-12px mr-10px bg-#F64B31 rounded-50%"></div>
<span>负面情绪 </span>
<span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
</div>
</div>
</div>
<a-table
class="flex-1"
:columns="columns2"
:data="sortedRowData"
:span-method="spanMethod"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<template #felling="{ record }">
<div class="flex items-center">
<img :src="fellingStatus[record.felling].icon" class="w-20px h-20px mr-4px" />
<span>{{ fellingStatus[record.felling].label }}</span>
</div>
</template>
</a-table>
</div>
</a-space>
<!-- 新兴关键词 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px"
>
<div class="title-row">
<span class="title mr-4px">新兴关键词</span>
<a-tooltip>
<template #content
>指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
>
<icon-question-circle size="16" class="color-#737478" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
@ -168,7 +166,7 @@
/>
</template>
<template #first_appeared_at="{ record }">
<div>{{ formatTimestamp(record.first_appeared_at) }}</div>
{{ formatTimestamp(record.first_appeared_at) }}
</template>
<template #hot="{ record }">
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
@ -177,31 +175,19 @@
<template #hotTitle="{ record }">
<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="16" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
<template #trendTitle="{ record }">
<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="16" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
<template #tred="{ record }">
@ -217,63 +203,57 @@
</a-table>
</a-space>
<!-- modal -->
<a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
<a-modal
:visible="visible"
modal-class="keyword-modal"
unmountOnClose
width="640px"
@ok="handleOk"
@cancel="handleCancel"
>
<template #title>
<span style="text-align: left; width: 100%">新兴关键词</span>
</template>
<div>
<a-space direction="vertical">
<a-space>
<span style="margin-right: 16px">关键词</span>
<span>{{ topicInfo.name }}</span>
</a-space>
<a-space>
<span style="margin-right: 16px">最大规模出现</span>
<span>{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
</a-space>
<a-space>
<span style="margin-right: 16px">变化幅度</span>
<div>
<a-statistic
v-if="topicInfo?.trend > 0"
style="font-size: 14px"
:value="topicInfo.trend * 100"
:value-style="{ color: '#F64B31' }"
>
<template #prefix>
<IconArrowRise />
</template>
<template #suffix>%</template>
</a-statistic>
<a-statistic
v-else
style="font-size: 14px"
:value="topicInfo?.trend * 100 || 0"
:value-style="{ color: '#25C883' }"
>
<template #prefix>
<IconArrowFall />
</template>
<template #suffix>%</template>
</a-statistic>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">话题名称</p>
<span class="cts">{{ topicInfo.name }}</span>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">最大规模出现</p>
<span class="cts">{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">变化幅度</p>
<div class="flex items-center" :class="topicInfo.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
<icon-arrow-up v-if="topicInfo.trend > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ `${topicInfo.trend * 100}%` }}
</div>
</a-space>
<a-space>
<span style="margin-right: 16px">热度指数</span>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">热度指数</p>
<img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
</a-space>
</div>
<a-space direction="top">
<span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span>
<a-space direction="vertical" style="margin-left: 15px">
<a-space v-for="item in topicInfo.industry_new_keyword_sources" :key="item">
<a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
<img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
</a-space>
</a-space>
</a-space>
<div class="flex items-start">
<p class="!mr-16px w-83px cts relative top-2px">原始来源</p>
<div class="flex flex-col">
<div v-for="item in topicInfo.industry_new_keyword_sources" :key="item" class="mb-18px flex items-center">
<a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
item.title
}}</a-link>
<img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
</div>
</div>
</div>
</a-space>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
</template>
</a-modal>
</view>
</template>
@ -297,6 +277,25 @@ import top1 from '@/assets/img/captcha/top1.svg';
import top2 from '@/assets/img/captcha/top2.svg';
import top3 from '@/assets/img/captcha/top3.svg';
import icon1 from '@/assets/img/hottranslation/good.png';
import icon2 from '@/assets/img/hottranslation/normal.png';
import icon3 from '@/assets/img/hottranslation/poor.png';
const fellingStatus = {
2: {
icon: icon1,
label: '正面情绪',
},
1: {
icon: icon2,
label: '中性情绪',
},
0: {
icon: icon3,
label: '负面情绪',
},
};
const starImages = [star1, star2, star3, star4, star5];
const topImages = [top1, top2, top3];
@ -356,8 +355,8 @@ const columns2 = [
title: '情绪分布',
dataIndex: 'felling',
slotName: 'felling',
width: 120,
minWidth: 120,
width: 160,
// minWidth: 120,
},
{
title: '主要观点',
@ -365,13 +364,48 @@ const columns2 = [
},
];
const spanMethod = ({ record, columnIndex }) => {
// console.log(record.felling);
// if (record.felling === 2) {
// return {
// rowspan: 3,
// };
// }
const sortedRowData = computed(() => {
return [...rowData.value].sort((a, b) => {
return b.felling - a.felling;
});
});
const spanMethod = ({ record, columnIndex, rowIndex }) => {
if (columnIndex === 0) {
const currentFelling = record.felling;
let rowspan = 1;
for (let i = rowIndex + 1; i < sortedRowData.value.length; i++) {
if (sortedRowData.value[i].felling === currentFelling) {
rowspan++;
} else {
break;
}
}
// eslint-disable-next-line no-unreachable-loop
for (let i = rowIndex - 1; i >= 0; i--) {
if (sortedRowData.value[i].felling === currentFelling) {
return {
rowspan: 0,
colspan: 0,
};
} else {
break;
}
}
return {
rowspan,
colspan: 1,
};
}
// 其他列不合并
return {
rowspan: 1,
colspan: 1,
};
};
const columns3 = [
@ -547,7 +581,7 @@ const drawChart = () => {
labelLine: {
show: false, // 不显示引导线
},
radius: ['40%', '55%'],
radius: ['50%', '70%'], // 调整半径范围
},
],
};
@ -616,11 +650,68 @@ onMounted(() => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
&.num {
font-family: 'HarmonyOS Sans SC';
}
}
</style>
<style lang="scss">
.keyword-modal {
.arco-modal-header {
border-bottom: none;
height: 56px;
padding: 0 20px;
.arco-modal-title {
justify-content: flex-start;
}
}
.arco-modal-body {
padding: 12px 20px 0;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
p {
margin: 0;
padding: 0;
}
}
.arco-modal-footer {
display: flex;
height: 64px;
padding: 0px 20px;
justify-content: flex-end;
align-items: center;
border-top: 1px solid var(--Border-1, #d7d7d9);
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}
</style>