提示语的修改
This commit is contained in:
@ -1,5 +1,4 @@
|
||||
import Http from '@/api';
|
||||
|
||||
// 导出一个函数,用于获取行业树
|
||||
export const fetchIndustriesTree = (params = {}) => {
|
||||
// 发送GET请求,获取行业树
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin: 0">基于行业内内容提取的高频词汇。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
|
||||
@ -12,11 +12,12 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin: 0">基于社交内容平台的行业数据,分析用户关注的热门话题与趋势。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-table :data="dataList">
|
||||
|
||||
<a-table :data="dataList" @change="handleTableChange">
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank">
|
||||
<template #cell="{ record }">
|
||||
@ -32,7 +33,36 @@
|
||||
<a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="热度" data-index="heatLevel">
|
||||
<a-table-column title="热度" data-index="hot">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 4px">
|
||||
<!-- 左侧问号提示 -->
|
||||
<a-popover position="tl">
|
||||
<a-button
|
||||
type="text"
|
||||
size="mini"
|
||||
style="padding: 0; width: 16px; height: 16px; color: #737478"
|
||||
@click.stop
|
||||
>
|
||||
<icon-question-circle style="font-size: 12px" />
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p style="margin: 0; font-size: 12px">基于社交内容平台的行业数据,热度值越高表示话题讨论度越高</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
|
||||
<span style="margin: 0 4px"></span>
|
||||
<a-button
|
||||
type="text"
|
||||
size="mini"
|
||||
style="padding: 0; width: 16px; height: 16px; color: #6d4cfe"
|
||||
@click="toggleHeatSort"
|
||||
>
|
||||
<icon-arrow-up v-if="heatSortDirection === 'asc'" style="font-size: 12px" />
|
||||
<icon-arrow-down v-else style="font-size: 12px" />
|
||||
</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell="{ record }">
|
||||
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||||
</template>
|
||||
@ -67,7 +97,7 @@
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
<!-- modal -->
|
||||
|
||||
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
|
||||
<template #title>
|
||||
<span style="text-align: left; width: 100%">行业热门话题洞察</span>
|
||||
@ -135,12 +165,31 @@ 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';
|
||||
import { IconQuestionCircle, IconArrowUp, IconArrowDown } from '@arco-design/web-vue/es/icon';
|
||||
// 新增排序状态和函数
|
||||
const heatSortDirection = ref('desc'); // 默认降序排列
|
||||
|
||||
// 切换排序方向
|
||||
const toggleHeatSort = () => {
|
||||
heatSortDirection.value = heatSortDirection.value === 'asc' ? 'desc' : 'asc';
|
||||
sortDataByHeat();
|
||||
};
|
||||
|
||||
// 实际排序逻辑
|
||||
const sortDataByHeat = () => {
|
||||
dataList.value.sort((a, b) => {
|
||||
return heatSortDirection.value === 'asc' ? a.hot - b.hot : b.hot - a.hot;
|
||||
});
|
||||
// 排序后更新排名
|
||||
dataList.value.forEach((item, index) => {
|
||||
item.rank = index + 1;
|
||||
});
|
||||
};
|
||||
|
||||
const starImages = [star1, star2, star3, star4, star5];
|
||||
const topImages = [top1, top2, top3];
|
||||
// 行业大类
|
||||
const industriesTree = ref([]);
|
||||
|
||||
// 行业热门话题洞察
|
||||
const dataList = ref([]);
|
||||
// 显示详情
|
||||
@ -174,6 +223,10 @@ const getIndustriesTree = async () => {
|
||||
getIndustryTopics();
|
||||
};
|
||||
|
||||
const handleSort = () => {
|
||||
console.log('table change');
|
||||
};
|
||||
|
||||
// 行业热门话题
|
||||
const getIndustryTopics = async () => {
|
||||
let parms = {
|
||||
@ -230,4 +283,14 @@ const handleOk = () => {
|
||||
color: #737478 !important;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
:deep(.arco-icon) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 按钮悬停效果 */
|
||||
:deep(.arco-btn-text:not(.arco-btn-disabled):hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin: 0">基于该行业中近期提及频次高、用户互动活跃的品牌内容,筛选出关注度较高的代表性品牌。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
@ -70,7 +70,9 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin: 0">
|
||||
基于情绪分析与敏感词识别,对行业内容中的负面或争议性话题进行监测,辅助判断舆情风险动态。
|
||||
</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin: 0">基于该行业用户内容中提及频率较高的关键词,按热度进行排序,反映近期关注焦点。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
@ -92,7 +92,9 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin: 0">
|
||||
对该行业下用户内容进行情绪分析,按情绪类别统计占比,提取占比最高者作为行业情绪代表。
|
||||
</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
@ -153,7 +155,7 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin: 0">指当前周期中首次出现,或相较上一周期词频显著增长的关键词,反映近期出现的新关注点。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
|
||||
@ -5,10 +5,9 @@
|
||||
direction="vertical"
|
||||
style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0; color: #737478; font-size: 14px"
|
||||
>
|
||||
<a-space align="center">
|
||||
<!-- 行业选择 -->
|
||||
<a-space align="center">
|
||||
<span>行业大类</span>
|
||||
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
|
||||
<span style="width: 60px; flex-shrink: 0; line-height: 28px">行业大类</span>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
|
||||
<a-tag
|
||||
size="Medium"
|
||||
v-for="item in industriesTree"
|
||||
@ -24,12 +23,12 @@
|
||||
"
|
||||
>{{ item.name }}</a-tag
|
||||
>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-space align="center" style="margin-left: 'auto'; margin-top: 20px">
|
||||
<!-- 二级类目 -->
|
||||
<a-space align="center">
|
||||
<span>二级类目</span>
|
||||
<!-- 二级类目 -->
|
||||
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
|
||||
<span style="width: 60px; flex-shrink: 0; line-height: 28px">二级类目</span>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
|
||||
<a-tag
|
||||
size="Medium"
|
||||
v-for="item in subCategories"
|
||||
@ -45,12 +44,12 @@
|
||||
"
|
||||
>{{ item.name }}</a-tag
|
||||
>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-space>
|
||||
<a-space align="center" style="margin-left: 'auto'; margin-top: 20px">
|
||||
<!-- 时间筛选 -->
|
||||
<a-space align="center">
|
||||
<span>时间筛选</span>
|
||||
<!-- </a-space> -->
|
||||
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
|
||||
<span style="width: 60px; flex-shrink: 0; line-height: 28px">时间筛选</span>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
|
||||
<a-tag
|
||||
size="Medium"
|
||||
v-for="item in timePeriods"
|
||||
@ -66,7 +65,7 @@
|
||||
"
|
||||
>{{ item.label }}
|
||||
</a-tag>
|
||||
</a-space>
|
||||
</div>
|
||||
</a-space>
|
||||
<!-- 搜索区域 -->
|
||||
<a-space style="margin-left: 'auto'; margin-top: 20px">
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<p>基于xxx获取数据xxx,一段文字描述该数据的获取方式和来源等xxx</p>
|
||||
<p style="margin:0">基于用户内容中的情绪分析与表达模式,提取反复出现的负面倾向主题,反映典型使用痛点。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
|
||||
Reference in New Issue
Block a user