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

修改table样式

Browse Source
This commit is contained in:
lq
2025-06-22 16:01:48 +08:00
parent 1bdff03e9a
commit e51711304d
5 changed files with 680 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

478
src/views/components/dataEngine/keyWord.vue
View File

@ -16,68 +16,92 @@
</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" />
<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>
<span v-else>{{ record.rank }}</span>
<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 #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>
<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>
<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>
</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 #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,51 +184,95 @@
</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 />
<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>
<template #hot="{ record }">
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
</template>
<template #hotTitle="{ record }">
<a-space>
<span>当前热度指数</span>
<a-popover position="tr">
<a-button type="primary" class="pop-btn2">
<template #icon>
<icon-question-circle />
</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 />
</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>
<template #suffix>%</template>
</a-statistic>
</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"
:value-style="{ color: '#F64B31' }"
v-if="record.trend > 0"
>
<template #prefix>
<icon-arrow-rise />
</template>
</a-table-column>
<a-table-column title="操作" data-index="optional">
<template #cell="{ record }">
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
<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>
</a-table-column>
<template #suffix>%</template>
</a-statistic>
</template>
<template #optional="{ record }">
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
</template>
</a-table>
</a-space>
@ -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);
fellingRate.value = [];
fellingRate.value.push(res['good_felling_rate']);
fellingRate.value.push(res['bad_felling_rate']);
if (res.code == 200) {
let data = res['data'];
fellingRate.value = [];
fellingRate.value.push(data['good_felling_rate']);
fellingRate.value.push(data['bad_felling_rate']);
drawChart();
rowData.value = res['industry_emotion_view_points'];
let items = groupedData();
console.log('行业情绪', items);
drawChart();
rowData.value = data['industry_emotion_view_points'];
let items = groupedData();
}
};
// 详情
const gotoDetail = async (record) => {
console.log(record);
const res = await fetchNewKeywordDetail(record.id);
console.log(res);
visible.value = true;
topicInfo.value = res;
if (res.code === 200) {
visible.value = true;
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>