225 lines
7.8 KiB
Vue
225 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<topHeader ref="topHeaderRef"></topHeader>
|
|||
|
|
<!-- tabel -->
|
|||
|
|
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin-bottom: 24px">
|
|||
|
|
<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">
|
|||
|
|
<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="keywords">
|
|||
|
|
<template #cell="{ record }">
|
|||
|
|
<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">
|
|||
|
|
<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="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>
|
|||
|
|
<a-table-column title="操作" data-index="optional">
|
|||
|
|
<template #cell="{ record }">
|
|||
|
|
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
|||
|
|
</template>
|
|||
|
|
</a-table-column>
|
|||
|
|
</template>
|
|||
|
|
<template #rank="{ record }">
|
|||
|
|
<a-tag color="blue" v-if="record.rank == 1">1</a-tag>
|
|||
|
|
</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>{{ topicInfo.intro }}</span>
|
|||
|
|
</a-space>
|
|||
|
|
<a-space>
|
|||
|
|
<span style="margin-right: 16px">关键词</span>
|
|||
|
|
<a-tag v-for="item in topicInfo.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
|
|||
|
|
</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>
|
|||
|
|
<span style="margin-right: 16px">情感指数</span>
|
|||
|
|
<img
|
|||
|
|
v-if="topicInfo.felling == '2'"
|
|||
|
|
src="@/assets/img/hottranslation/good.png"
|
|||
|
|
style="width: 16px; height: 16px"
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
v-else-if="topicInfo.felling == '1'"
|
|||
|
|
src="@/assets/img/hottranslation/normal.png"
|
|||
|
|
style="width: 16px; height: 16px"
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
v-else-if="topicInfo.felling == '0'"
|
|||
|
|
src="@/assets/img/hottranslation/poor.png"
|
|||
|
|
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_topic_sources" :key="item">
|
|||
|
|
<a-link style="background-color: initial" :href="item.link">{{ 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 { ref, computed } from 'vue';
|
|||
|
|
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
|
|||
|
|
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 industriesTree = ref([]);
|
|||
|
|
|
|||
|
|
// 行业热门话题洞察
|
|||
|
|
const dataList = ref([]);
|
|||
|
|
// 显示详情
|
|||
|
|
const visible = ref(false);
|
|||
|
|
const topicInfo = ref({});
|
|||
|
|
const topHeaderRef = ref();
|
|||
|
|
// 从topHeader获取统一的状态
|
|||
|
|
const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
|
|||
|
|
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
|
|||
|
|
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
|
|||
|
|
|
|||
|
|
// 监听筛选条件变化
|
|||
|
|
watch([selectedIndustry, selectedTimePeriod], () => {
|
|||
|
|
getIndustryTopics();
|
|||
|
|
});
|
|||
|
|
onMounted(() => {
|
|||
|
|
getIndustriesTree();
|
|||
|
|
});
|
|||
|
|
// 获取行业大类数据
|
|||
|
|
const getIndustriesTree = async () => {
|
|||
|
|
const res = await fetchIndustriesTree();
|
|||
|
|
industriesTree.value = res;
|
|||
|
|
selectedIndustry.value = res[0].id;
|
|||
|
|
getIndustryTopics();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 行业热门话题
|
|||
|
|
const getIndustryTopics = async () => {
|
|||
|
|
let parms = {
|
|||
|
|
industry_id: selectedIndustry.value,
|
|||
|
|
time_dimension: selectedTimePeriod.value,
|
|||
|
|
};
|
|||
|
|
const res = await fetchIndustryTopics(parms);
|
|||
|
|
console.log(res);
|
|||
|
|
dataList.value = res;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 详情
|
|||
|
|
const gotoDetail = async (record) => {
|
|||
|
|
console.log(record);
|
|||
|
|
const res = await fetchIndustryTopicDetail(record.id);
|
|||
|
|
console.log(res);
|
|||
|
|
visible.value = true;
|
|||
|
|
topicInfo.value = res;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 弹窗的取消
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
visible.value = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 弹窗的确定
|
|||
|
|
const handleOk = () => {
|
|||
|
|
visible.value = false;
|
|||
|
|
};
|
|||
|
|
</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-btn-outline) {
|
|||
|
|
color: #6d4cfe !important;
|
|||
|
|
border-color: #6d4cfe !important;
|
|||
|
|
}
|
|||
|
|
:deep(.arco-modal-body) {
|
|||
|
|
padding: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop-btn {
|
|||
|
|
background: #fff !important;
|
|||
|
|
border-color: #fff !important;
|
|||
|
|
color: #737478 !important;
|
|||
|
|
margin-left: -5px;
|
|||
|
|
}
|
|||
|
|
</style>
|