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

first commit

Browse Source
This commit is contained in:
muzi
2025-06-16 14:42:26 +08:00
commit 6f06721506
149 changed files with 56883 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
src/views/components/dataEngine/keyWord.vue Normal file
View File

@ -0,0 +1,359 @@
<template>
<view>
<topHeader ref="topHeaderRef"></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' }"
></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"
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>
</template>
</a-table-column>
</template>
</a-table>
</a-space>
</view>
</template>
<script setup>
import topHeader from './topHeader.vue';
import { fetchKeywordTrendsList, fetchIndustryEmotions, fetchNewKeywordList } 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 getIndustryEmotions = async () => {
const params = {
industry_id: selectedIndustry.value,
time_dimension: selectedTimePeriod.value,
};
const res = await fetchIndustryEmotions(params);
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 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 getKeywordTrendsList = async () => {
const params = {
industry_id: selectedIndustry.value,
time_dimension: selectedTimePeriod.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,
};
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);
}
};
// 监听筛选条件变化
watch([selectedIndustry, selectedTimePeriod], () => {
getKeywordTrendsList();
getIndustryEmotions();
getNewKeywordList();
});
onMounted(() => {
getKeywordTrendsList();
getIndustryEmotions();
getNewKeywordList();
});
// const chartData = computed(() => {
// const result = [
// { name: '正面', value: 0, color: '#25C883' },
// { name: '中性', value: 0, color: '#FFAA16' },
// { name: '负面', value: 0, color: '#F64B31' },
// ];
// rawData.value.forEach((item) => {
// if (item.felling === 2) result[0].value++;
// else if (item.felling === 1) result[1].value++;
// else result[2].value++;
// });
// return result.filter((item) => item.value > 0); // 过滤空数据
// });
</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>