修改table样式
This commit is contained in:
lq
@ -16,7 +16,46 @@
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-table :columns="columns" :data="dataList" :filter-icon-align-left="alignLeft" @change="handleChange">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #hotTitle>
|
||||
<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-space>
|
||||
</template>
|
||||
<template #sentimentTitle>
|
||||
<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-space>
|
||||
</template>
|
||||
<template #rank="{ 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" />
|
||||
@ -127,17 +166,26 @@ const columns = [
|
||||
title: '排名',
|
||||
dataIndex: 'rank',
|
||||
slotName: 'rank',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '话题名称',
|
||||
dataIndex: 'name',
|
||||
width: 300,
|
||||
minWidth: 300,
|
||||
},
|
||||
{
|
||||
title: '关键词',
|
||||
dataIndex: 'keywords',
|
||||
slotName: 'keywords',
|
||||
width: 250,
|
||||
minWidth: 250,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'hotTitle',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '热度指数',
|
||||
dataIndex: 'hot',
|
||||
sortable: {
|
||||
@ -146,13 +194,18 @@ const columns = [
|
||||
slotName: 'hot',
|
||||
},
|
||||
{
|
||||
titleSlotName: 'sentimentTitle',
|
||||
title: '情感倾向',
|
||||
dataIndex: 'sentiment',
|
||||
slotName: 'sentiment',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slotName: 'optional',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
// 切换排序方向
|
||||
@ -273,7 +326,14 @@ const handleOk = () => {
|
||||
background: #fff !important;
|
||||
border-color: #fff !important;
|
||||
color: #737478 !important;
|
||||
margin-left: -5px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.pop-btn2 {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: #737478 !important;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
:deep(.arco-icon) {
|
||||
|
||||
@ -16,24 +16,69 @@
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-table :data="dataList" :pagination="false" style="font-size: 12px">
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank">
|
||||
<template #cell="{ record }">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #hotTitle>
|
||||
<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-space>
|
||||
</template>
|
||||
<template #trendTitle>
|
||||
<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-space>
|
||||
</template>
|
||||
<template #volume_rateTitle>
|
||||
<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-space>
|
||||
</template>
|
||||
<template #rank="{ 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 }">
|
||||
<template #hot="{ 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="frequency">
|
||||
<template #cell="{ record }">
|
||||
<template #trend="{ record }">
|
||||
<a-statistic
|
||||
style="font-size: 14px"
|
||||
v-if="record.trend > 0"
|
||||
@ -45,18 +90,14 @@
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
<a-statistic
|
||||
v-else
|
||||
style="font-size: 14px"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#25C883' }"
|
||||
></a-statistic>
|
||||
<a-statistic v-else style="font-size: 14px" :value="record.trend * 100" :value-style="{ color: '#25C883' }">
|
||||
<template #prefix>
|
||||
<icon-arrow-rise />
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="占总声量比例" data-index="content">
|
||||
<template #cell="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
|
||||
</a-table-column>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</template>
|
||||
<template #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
<!-- 舆情 & 敏感动态-->
|
||||
@ -76,12 +117,7 @@
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-table :data="otherList" :pagination="false" style="font-size: 12px">
|
||||
<template #columns>
|
||||
<a-table-column title="品牌" data-index="brand" />
|
||||
<a-table-column title="事件标题" data-index="title" />
|
||||
<a-table-column title="事件详情" data-index="content" />
|
||||
</template>
|
||||
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
|
||||
</a-table>
|
||||
</a-space>
|
||||
</view>
|
||||
@ -108,7 +144,76 @@ const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCatego
|
||||
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
|
||||
const dataList = ref([]);
|
||||
const otherList = ref([]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '排名',
|
||||
dataIndex: 'rank',
|
||||
slotName: 'rank',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '品牌名称',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'hotTitle',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '热度指数',
|
||||
dataIndex: 'hot',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'hot',
|
||||
},
|
||||
{
|
||||
titleSlotName: 'trendTitle',
|
||||
title: '变化幅度',
|
||||
dataIndex: 'trend',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'trend',
|
||||
},
|
||||
{
|
||||
titleSlotName: 'volume_rateTitle',
|
||||
title: '占总声量比例',
|
||||
dataIndex: 'volumeRate',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'volumeRate',
|
||||
},
|
||||
];
|
||||
const columns2 = [
|
||||
{
|
||||
title: '品牌',
|
||||
dataIndex: 'brand',
|
||||
width: 100,
|
||||
minWidth: 100,
|
||||
},
|
||||
{
|
||||
title: '事件标题',
|
||||
dataIndex: 'title',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
sortable: {},
|
||||
},
|
||||
{
|
||||
title: '事件详情',
|
||||
dataIndex: 'content',
|
||||
width: 220,
|
||||
minWidth: 220,
|
||||
sortable: {},
|
||||
},
|
||||
];
|
||||
const search = () => {
|
||||
getFocusBrandsList();
|
||||
getEventDynamicsList();
|
||||
@ -128,8 +233,10 @@ const getFocusBrandsList = async () => {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchFocusBrandsList(params);
|
||||
if (res.code == 200) {
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
dataList.value = res;
|
||||
dataList.value = res.data;
|
||||
}
|
||||
};
|
||||
|
||||
const getEventDynamicsList = async () => {
|
||||
@ -147,8 +254,10 @@ const getEventDynamicsList = async () => {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchEventDynamicsList(params);
|
||||
if (res.code == 200) {
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
otherList.value = res;
|
||||
otherList.value = res.data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
@ -191,4 +300,10 @@ watch(selectedIndustry, () => {
|
||||
color: #6d4cfe !important;
|
||||
border-color: #6d4cfe !important;
|
||||
}
|
||||
.pop-btn2 {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: #737478 !important;
|
||||
margin-left: -10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,51 +16,58 @@
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-table :data="dataList" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank">
|
||||
<template #cell="{ record }">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
>
|
||||
<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-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-space>
|
||||
</template>
|
||||
|
||||
<template #rank="{ 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 }">
|
||||
<template #keywords="{ record }">
|
||||
<a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
|
||||
</template>
|
||||
<template #hot="{ 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 }">
|
||||
<template #sentiment="{ record }">
|
||||
<img
|
||||
v-if="record.felling == '2'"
|
||||
src="@/assets/img/hottranslation/good.png"
|
||||
@ -77,7 +84,24 @@
|
||||
style="width: 16px; height: 16px"
|
||||
/>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<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>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
@ -99,46 +123,47 @@
|
||||
</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>
|
||||
<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>
|
||||
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
|
||||
<span>正面情绪 </span>
|
||||
<span style="width: 40px">{{ fellingRate[0] * 100 }}%</span>
|
||||
<span style="width: 40px">{{ getFormatter(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>
|
||||
<span style="width: 40px">{{ getFormatter(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" />
|
||||
<a-table
|
||||
:columns="columns2"
|
||||
:data="rowData"
|
||||
:span-method="spanMethod"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #felling="{ 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>
|
||||
</a-space>
|
||||
@ -159,22 +184,75 @@
|
||||
</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 }">
|
||||
<a-table
|
||||
:columns="columns3"
|
||||
:data="keywordList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #rank="{ 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>
|
||||
<template #felling="{ 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>
|
||||
<template #first_appeared_at="{ record }">
|
||||
<div>{{ formatTimestamp(record.first_appeared_at) }}</div>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="当前热度指数" data-index="heatLevel">
|
||||
<template #cell="{ record }">
|
||||
<template #hot="{ 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 }">
|
||||
|
||||
<template #hotTitle="{ record }">
|
||||
<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-space>
|
||||
</template>
|
||||
<template #trendTitle="{ record }">
|
||||
<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-space>
|
||||
</template>
|
||||
<template #tred="{ record }">
|
||||
<a-statistic
|
||||
style="font-size: 14px"
|
||||
:value="record.trend * 100"
|
||||
@ -186,25 +264,16 @@
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
<a-statistic
|
||||
v-else
|
||||
style="font-size: 14px"
|
||||
:value="record.trend * 100"
|
||||
:value-style="{ color: '#25C883' }"
|
||||
>
|
||||
<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 }">
|
||||
<template #optional="{ record }">
|
||||
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
<!-- modal -->
|
||||
@ -303,6 +372,119 @@ const keywordList = ref([]);
|
||||
const fellingRate = ref([]);
|
||||
const visible = ref(false);
|
||||
const topicInfo = ref({});
|
||||
const columns = [
|
||||
{
|
||||
title: '排名',
|
||||
dataIndex: 'rank',
|
||||
slotName: 'rank',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '关键词名称',
|
||||
dataIndex: 'name',
|
||||
width: 250,
|
||||
minWidth: 250,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'heatLevel',
|
||||
title: '热度指数',
|
||||
dataIndex: 'hot',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'hot',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
titleSlotName: 'trendTitle',
|
||||
title: '变化幅度',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
dataIndex: 'tred',
|
||||
slotName: 'tred',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: '情感倾向',
|
||||
dataIndex: 'sentiment',
|
||||
slotName: 'sentiment',
|
||||
},
|
||||
];
|
||||
const columns2 = [
|
||||
{
|
||||
title: '情绪分布',
|
||||
dataIndex: 'felling',
|
||||
slotName: 'felling',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '主要观点',
|
||||
dataIndex: 'content',
|
||||
},
|
||||
];
|
||||
|
||||
const spanMethod = ({ record, columnIndex }) => {
|
||||
// console.log(record.felling);
|
||||
// if (record.felling === 2) {
|
||||
// return {
|
||||
// rowspan: 3,
|
||||
// };
|
||||
// }
|
||||
};
|
||||
|
||||
const columns3 = [
|
||||
{
|
||||
title: '排名',
|
||||
dataIndex: 'rank',
|
||||
slotName: 'rank',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: '新兴关键词名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '首次大规模出现',
|
||||
dataIndex: 'first_appeared_at',
|
||||
slotName: 'first_appeared_at',
|
||||
},
|
||||
{
|
||||
titleSlotName: 'hotTitle',
|
||||
title: '当前热度指数',
|
||||
dataIndex: 'hot',
|
||||
slotName: 'hot',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
titleSlotName: 'trendTitle',
|
||||
title: '变化幅度',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
dataIndex: 'tred',
|
||||
slotName: 'tred',
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slotName: 'optional',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
const getFormatter = (value) => {
|
||||
const formattedValue = Number.isInteger(value) ? value.toString() : value.toFixed(2);
|
||||
return formattedValue + '%';
|
||||
};
|
||||
const getIndustryEmotions = async () => {
|
||||
const params = {
|
||||
industry_id: selectedIndustry.value,
|
||||
@ -318,23 +500,25 @@ const getIndustryEmotions = async () => {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchIndustryEmotions(params);
|
||||
if (res.code == 200) {
|
||||
let data = res['data'];
|
||||
fellingRate.value = [];
|
||||
fellingRate.value.push(res['good_felling_rate']);
|
||||
fellingRate.value.push(res['bad_felling_rate']);
|
||||
fellingRate.value.push(data['good_felling_rate']);
|
||||
fellingRate.value.push(data['bad_felling_rate']);
|
||||
|
||||
drawChart();
|
||||
rowData.value = res['industry_emotion_view_points'];
|
||||
rowData.value = data['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);
|
||||
if (res.code === 200) {
|
||||
visible.value = true;
|
||||
topicInfo.value = res;
|
||||
topicInfo.value = res.data;
|
||||
}
|
||||
};
|
||||
const groupedData = () => {
|
||||
const groups = {
|
||||
@ -374,9 +558,9 @@ const getKeywordTrendsList = async () => {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchKeywordTrendsList(params);
|
||||
console.log('关键词热度榜', res);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
dataList.value = res;
|
||||
if (res.code === 200) {
|
||||
dataList.value = res.data;
|
||||
}
|
||||
};
|
||||
|
||||
const formatTimestamp = (timestamp) => {
|
||||
@ -384,7 +568,6 @@ const formatTimestamp = (timestamp) => {
|
||||
try {
|
||||
return dayjs.unix(timestamp).format('YYYY-MM-DD HH:mm');
|
||||
} catch (e) {
|
||||
console.error('时间格式转换错误', e);
|
||||
return '格式错误';
|
||||
}
|
||||
};
|
||||
@ -480,6 +663,13 @@ onMounted(() => {
|
||||
background: #fff !important;
|
||||
border-color: #fff !important;
|
||||
color: #737478 !important;
|
||||
margin-left: -5px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.pop-btn2 {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
color: #737478 !important;
|
||||
margin-left: -8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,45 +17,54 @@
|
||||
</template>
|
||||
</a-popover>
|
||||
</a-space>
|
||||
<a-table :data="dataList" :pagination="false">
|
||||
<template #columns>
|
||||
<a-table-column title="排名" data-index="rank">
|
||||
<template #cell="{ record }">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="dataList"
|
||||
:filter-icon-align-left="alignLeft"
|
||||
@change="handleChange"
|
||||
:scroll="true"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #rank="{ 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 }">
|
||||
<template #keywords="{ 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="frequency">
|
||||
<template #cell="{ record }">
|
||||
<template #frequency="{ record }">
|
||||
<a-tag v-if="record.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
|
||||
>低频</a-tag
|
||||
>
|
||||
<a-tag
|
||||
v-else-if="record.frequency == 1"
|
||||
style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
|
||||
<a-tag v-else-if="record.frequency == 1" style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
|
||||
>中频</a-tag
|
||||
>
|
||||
<a-tag
|
||||
v-else-if="record.frequency == 2"
|
||||
style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
|
||||
<a-tag v-else-if="record.frequency == 2" style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
|
||||
>高频</a-tag
|
||||
>
|
||||
</template>
|
||||
</a-table-column>
|
||||
<a-table-column title="代表性发言" data-index="content"> </a-table-column>
|
||||
<a-table-column title="操作" data-index="optional">
|
||||
<template #cell="{ record }">
|
||||
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
||||
<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"
|
||||
/>
|
||||
</template>
|
||||
</a-table-column>
|
||||
|
||||
<template #optional="{ record }">
|
||||
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-space>
|
||||
@ -67,15 +76,15 @@
|
||||
<div>
|
||||
<a-space direction="vertical" style="font-size: 12px">
|
||||
<a-space>
|
||||
<span style="margin-right: 16px; width: 60px">痛点</span>
|
||||
<span style="width: 80px">痛点</span>
|
||||
<span>{{ topicInfo.name }}</span>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span style="margin-right: 16px; width: 60px; font-size: 12px">关键词</span>
|
||||
<span style="width: 80px; font-size: 12px">关键词</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; width: 60px; font-size: 12px">频次</span>
|
||||
<span style="width: 80px; font-size: 12px">频次</span>
|
||||
<a-tag v-if="topicInfo.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
|
||||
>低频</a-tag
|
||||
>
|
||||
@ -91,14 +100,24 @@
|
||||
>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span style="margin-right: 16px; width: 60px; font-size: 12px">代表性发言</span>
|
||||
<span style="width: 80px; font-size: 12px">代表性发言</span>
|
||||
<span>{{ topicInfo.content }}</span>
|
||||
</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">
|
||||
<span style="width: 80px; font-size: 12px; display: inline-block">原始来源</span>
|
||||
<a-space direction="vertical">
|
||||
<a-space v-for="item in topicInfo.user_pain_point_sources" :key="item">
|
||||
<a-link style="background-color: initial" :href="item.link" target="_blank">{{ item.title }}</a-link>
|
||||
<a-link
|
||||
style="
|
||||
background-color: initial;
|
||||
display: inline-block;
|
||||
width: 280px;
|
||||
text-overflow: ellipsis;
|
||||
"
|
||||
: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>
|
||||
@ -125,14 +144,58 @@ const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
|
||||
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
|
||||
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
|
||||
const dataList = ref([]);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '排名',
|
||||
dataIndex: 'rank',
|
||||
slotName: 'rank',
|
||||
width: 60,
|
||||
minWidth: 60,
|
||||
},
|
||||
{
|
||||
title: '痛点名称',
|
||||
dataIndex: 'name',
|
||||
width: 300,
|
||||
minWidth: 300,
|
||||
},
|
||||
{
|
||||
title: '关键词',
|
||||
dataIndex: 'keywords',
|
||||
slotName: 'keywords',
|
||||
width: 250,
|
||||
minWidth: 250,
|
||||
},
|
||||
{
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
title: '频次',
|
||||
dataIndex: 'frequency',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
slotName: 'frequency',
|
||||
},
|
||||
{
|
||||
title: '代表性发言',
|
||||
dataIndex: 'content',
|
||||
slotName: 'content',
|
||||
width: 320,
|
||||
minWidth: 320,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slotName: 'optional',
|
||||
width: 120,
|
||||
minWidth: 120,
|
||||
},
|
||||
];
|
||||
// 详情
|
||||
const gotoDetail = async (record) => {
|
||||
console.log(record);
|
||||
const res = await fetchUserPainPointsDetail(record.id);
|
||||
console.log(res);
|
||||
if (res.code == 200) {
|
||||
topicInfo.value = res.data;
|
||||
visible.value = true;
|
||||
topicInfo.value = res;
|
||||
}
|
||||
};
|
||||
|
||||
const getUserPainPointsList = async () => {
|
||||
@ -150,9 +213,9 @@ const getUserPainPointsList = async () => {
|
||||
params['industry_id'] = selectedSubCategory.value;
|
||||
}
|
||||
const res = await fetchUserPainPointsList(params);
|
||||
console.log('关键词热度榜', res);
|
||||
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
|
||||
dataList.value = res;
|
||||
if (res.code === 200) {
|
||||
dataList.value = res.data;
|
||||
}
|
||||
};
|
||||
// 弹窗的取消
|
||||
const handleCancel = () => {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<view>
|
||||
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
||||
<a-space style="width: 100%; display: flex">
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1">
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
|
||||
<a-space align="center">
|
||||
<span>性别分布</span>
|
||||
<a-popover position="tl">
|
||||
@ -37,7 +37,7 @@
|
||||
</a-space>
|
||||
</a-space>
|
||||
</a-space>
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1">
|
||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
|
||||
<a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
|
||||
<a-space align="center">
|
||||
<span>年龄分布</span>
|
||||
|
||||
Reference in New Issue
Block a user