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-06-30 18:37:27 +08:00
parent bce406d2ca
commit a486d42fa5
8 changed files with 354 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,57 +1,41 @@
<!-- eslint-disable vue/no-duplicate-attributes -->
<template>
<view>
<topHeader ref="topHeaderRef" @search="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" style="background-color: #fff; width: 100%; padding: 0 20px" class="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 #heatLevel>
<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="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>
@ -68,65 +52,36 @@
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
</template>
<template #sentiment="{ 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"
/>
<img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
<img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
<img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
</template>
<template #tred="{ 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' }"
></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>
</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" style="background-color: #fff; width: 100%; padding: 0 20px" class="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-space align="center">
<a-space>
<a-space style="width: 320px">
<div id="container" style="height: 180px; width: 180px"></div>
<a-space direction="vertical" style="font-size: 14px" v-if="fellingRate.length > 0">
<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>
@ -144,9 +99,9 @@
:data="rowData"
:span-method="spanMethod"
:filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<template #felling="{ record }">
<img
@ -170,27 +125,24 @@
</a-space>
</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" style="background-color: #fff; width: 100%; padding: 0 20px" class="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="columns3"
:data="keywordList"
:filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@ -253,23 +205,11 @@
</a-space>
</template>
<template #tred="{ record }">
<a-statistic
style="font-size: 14px"
:value="record.trend * 100"
:value-style="{ color: '#F64B31' }"
v-if="record.trend > 0"
>
<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-fall />
</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 #optional="{ record }">
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
@ -277,7 +217,7 @@
</a-table>
</a-space>
<!-- modal -->
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
<a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
<template #title>
<span style="text-align: left; width: 100%">新兴关键词</span>
</template>
@ -377,14 +317,12 @@ const columns = [
title: '排名',
dataIndex: 'rank',
slotName: 'rank',
width: 60,
minWidth: 60,
width: 100,
},
{
title: '关键词名称',
dataIndex: 'name',
width: 250,
minWidth: 250,
width: 300,
},
{
titleSlotName: 'heatLevel',
@ -394,8 +332,7 @@ const columns = [
sortDirections: ['ascend', 'descend'],
},
slotName: 'hot',
width: 180,
minWidth: 180,
width: 220,
},
{
titleSlotName: 'trendTitle',
@ -405,13 +342,13 @@ const columns = [
},
dataIndex: 'tred',
slotName: 'tred',
width: 180,
minWidth: 180,
width: 220,
},
{
title: '情感倾向',
dataIndex: 'sentiment',
slotName: 'sentiment',
width: 220,
},
];
const columns2 = [
@ -594,12 +531,12 @@ const getNewKeywordList = async () => {
};
const drawChart = () => {
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
let dom = document.getElementById('container');
let myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false,
});
var option;
let option;
option = {
color: ['#25C883', '#F64B31'],
series: [
@ -646,7 +583,7 @@ onMounted(() => {
});
</script>
<style scoped>
<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
background-color: var(--color-fill-2);
@ -672,4 +609,18 @@ onMounted(() => {
color: #737478 !important;
margin-left: -8px;
}
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style>