464 lines
16 KiB
Vue
464 lines
16 KiB
Vue
<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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
<a-table :data="dataList" :pagination="false">
|
||
<template #columns>
|
||
<a-table-column title="排名" data-index="rank">
|
||
<template #cell="{ 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>
|
||
</a-table-column>
|
||
<a-table-column title="关键词名称" data-index="name" />
|
||
<a-table-column title="热度指数" data-index="heatLevel">
|
||
<template #cell="{ record }">
|
||
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="变化幅度" data-index="heatLevel">
|
||
<template #cell="{ 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-fall />
|
||
</template>
|
||
<template #suffix>%</template>
|
||
</a-statistic>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="情感倾向" data-index="sentiment">
|
||
<template #cell="{ 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-column>
|
||
</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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
<a-space align="center">
|
||
<a-space direction="vertical">
|
||
<template>
|
||
<div ref="chartRef" style="width: 400px; height: 400px"></div>
|
||
</template>
|
||
</a-space>
|
||
<a-space>
|
||
<a-space>
|
||
<div id="container" style="height: 180px; width: 180px"></div>
|
||
<a-space direction="vertical" style="font-size: 14px" v-if="fellingRate.length > 0">
|
||
<a-space>
|
||
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
|
||
<span>正面情绪 </span>
|
||
<span style="width: 40px">{{ 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">{{ fellingRate[1] * 100 }}%</span>
|
||
</a-space>
|
||
</a-space>
|
||
</a-space>
|
||
<a-table :pagination="false" :span-method="dataSpanMethod" :data="rowData" style="margin-left: 40px">
|
||
<template #columns>
|
||
<a-table-column title="情绪分布">
|
||
<template #cell="{ record }">
|
||
<a-space v-if="record.felling == '2'">
|
||
<img src="@/assets/img/hottranslation/good.png" style="width: 16px; height: 16px" />
|
||
<a-space>正面情绪</a-space>
|
||
</a-space>
|
||
<a-space v-else-if="record.felling == '1'">
|
||
<img src="@/assets/img/hottranslation/normal.png" style="width: 16px; height: 16px" />
|
||
<a-space>中性情绪</a-space>
|
||
</a-space>
|
||
<a-space v-else-if="record.felling == '0'">
|
||
<img src="@/assets/img/hottranslation/poor.png" style="width: 16px; height: 16px" />
|
||
<a-space>负面情绪</a-space>
|
||
</a-space>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="主要观点" data-index="content" />
|
||
</template>
|
||
</a-table>
|
||
</a-space>
|
||
</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>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
||
</template>
|
||
</a-popover>
|
||
</a-space>
|
||
<a-table :data="keywordList" :pagination="false">
|
||
<template #columns>
|
||
<a-table-column title="排名" data-index="rank" />
|
||
<a-table-column title="新兴关键词名称" data-index="name" />
|
||
<a-table-column title="首次大规模出现" data-index="first_appeared_at">
|
||
<template #cell="{ record }">
|
||
<div>{{ formatTimestamp(record.first_appeared_at) }}</div>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="当前热度指数" data-index="heatLevel">
|
||
<template #cell="{ record }">
|
||
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="变化幅度" data-index="trend">
|
||
<template #cell="{ 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>
|
||
</template>
|
||
</a-table-column>
|
||
<a-table-column title="操作" data-index="optional">
|
||
<template #cell="{ record }">
|
||
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
||
</template>
|
||
</a-table-column>
|
||
</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>
|
||
</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>
|
||
</a-space>
|
||
<a-space>
|
||
<span style="margin-right: 16px">热度指数</span>
|
||
<img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
|
||
</a-space>
|
||
|
||
<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>
|
||
</a-space>
|
||
</div>
|
||
</a-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import topHeader from './topHeader.vue';
|
||
import {
|
||
fetchKeywordTrendsList,
|
||
fetchIndustryEmotions,
|
||
fetchNewKeywordList,
|
||
fetchNewKeywordDetail,
|
||
} from '@/api/all/index';
|
||
import { ref, onMounted, onBeforeUnmount, watchEffect, computed } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
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 starImages = [star1, star2, star3, star4, star5];
|
||
const topImages = [top1, top2, top3];
|
||
|
||
const chartRef = (ref < HTMLElement) | (null > null);
|
||
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 rowData = ref([]);
|
||
const keywordList = ref([]);
|
||
const fellingRate = ref([]);
|
||
const visible = ref(false);
|
||
const topicInfo = ref({});
|
||
const getIndustryEmotions = async () => {
|
||
const params = {
|
||
industry_id: selectedIndustry.value,
|
||
time_dimension: selectedTimePeriod.value,
|
||
};
|
||
if (selectedSubCategory.value != 0) {
|
||
params['industry_id'] = selectedSubCategory.value;
|
||
}
|
||
const res = await fetchIndustryEmotions(params);
|
||
fellingRate.value = [];
|
||
fellingRate.value.push(res['good_felling_rate']);
|
||
fellingRate.value.push(res['bad_felling_rate']);
|
||
|
||
drawChart();
|
||
rowData.value = res['industry_emotion_view_points'];
|
||
let items = groupedData();
|
||
console.log('行业情绪', items);
|
||
};
|
||
|
||
// 详情
|
||
const gotoDetail = async (record) => {
|
||
console.log(record);
|
||
const res = await fetchNewKeywordDetail(record.id);
|
||
console.log(res);
|
||
visible.value = true;
|
||
topicInfo.value = res;
|
||
};
|
||
const groupedData = () => {
|
||
const groups = {
|
||
negative: { name: '负面', items: [], color: '#F64B31' },
|
||
neutral: { name: '中性', items: [], color: '#FFAA16' },
|
||
positive: { name: '正面', items: [], color: '#25C883' },
|
||
};
|
||
rowData.value.forEach((item) => {
|
||
if (item.felling === 0) groups.negative.items.push(item);
|
||
else if (item.felling === 1) groups.neutral.items.push(item);
|
||
else if (item.felling === 2) groups.positive.items.push(item);
|
||
});
|
||
|
||
return groups;
|
||
};
|
||
// 弹窗的取消
|
||
const handleCancel = () => {
|
||
visible.value = false;
|
||
};
|
||
|
||
// 弹窗的确定
|
||
const handleOk = () => {
|
||
visible.value = false;
|
||
};
|
||
const getKeywordTrendsList = async () => {
|
||
const params = {
|
||
industry_id: selectedIndustry.value,
|
||
time_dimension: selectedTimePeriod.value,
|
||
};
|
||
if (selectedSubCategory.value != 0) {
|
||
params['industry_id'] = selectedSubCategory.value;
|
||
}
|
||
const res = await fetchKeywordTrendsList(params);
|
||
console.log('关键词热度榜', res);
|
||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||
dataList.value = res;
|
||
};
|
||
|
||
const formatTimestamp = (timestamp) => {
|
||
if (!timestamp) return '未记录';
|
||
try {
|
||
return dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm');
|
||
} catch (e) {
|
||
console.error('时间格式转换错误', e);
|
||
return '格式错误';
|
||
}
|
||
};
|
||
|
||
const getNewKeywordList = async () => {
|
||
const params = {
|
||
industry_id: selectedIndustry.value,
|
||
time_dimension: selectedTimePeriod.value,
|
||
};
|
||
if (selectedSubCategory.value != 0) {
|
||
params['industry_id'] = selectedSubCategory.value;
|
||
}
|
||
const res = await fetchNewKeywordList(params);
|
||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||
keywordList.value = res;
|
||
};
|
||
|
||
const drawChart = () => {
|
||
var dom = document.getElementById('container');
|
||
var myChart = echarts.init(dom, null, {
|
||
renderer: 'canvas',
|
||
useDirtyRect: false,
|
||
});
|
||
var option;
|
||
option = {
|
||
color: ['#25C883', '#F64B31'],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
avoidLabelOverlap: false,
|
||
data: fellingRate.value,
|
||
labelLine: {
|
||
show: false, // 不显示引导线
|
||
},
|
||
radius: ['40%', '55%'],
|
||
},
|
||
],
|
||
};
|
||
if (option && typeof option === 'object') {
|
||
myChart.setOption(option);
|
||
}
|
||
};
|
||
|
||
const search = () => {
|
||
getKeywordTrendsList();
|
||
getIndustryEmotions();
|
||
getNewKeywordList();
|
||
};
|
||
|
||
// 监听筛选条件变化
|
||
watch([selectedTimePeriod, selectedSubCategory], () => {
|
||
getKeywordTrendsList();
|
||
getIndustryEmotions();
|
||
getNewKeywordList();
|
||
});
|
||
|
||
watch([selectedIndustry], () => {
|
||
selectedSubCategory.value = 0;
|
||
getKeywordTrendsList();
|
||
getIndustryEmotions();
|
||
getNewKeywordList();
|
||
});
|
||
|
||
onMounted(() => {
|
||
getKeywordTrendsList();
|
||
getIndustryEmotions();
|
||
getNewKeywordList();
|
||
});
|
||
</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;
|
||
}
|
||
</style>
|