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

171
src/views/components/dataEngine/userPainPoints.vue
View File

@ -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 }">
<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="frequency">
<template #cell="{ 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
>
<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>
</a-table-column>
<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>
<template #keywords="{ record }">
<a-tag v-for="item in record.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
</template>
<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
>
<a-tag v-else-if="record.frequency == 2" style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
>高频</a-tag
>
</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 #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);
visible.value = true;
topicInfo.value = res;
if (res.code == 200) {
topicInfo.value = res.data;
visible.value = true;
}
};
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 = () => {