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

191
src/views/components/dataEngine/userPainPoints.vue Normal file
View File

@ -0,0 +1,191 @@
<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="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>
</template>
</a-table>
</a-space>
<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" style="font-size: 12px">
<a-space>
<span style="margin-right: 16px; width: 60px">痛点</span>
<span>{{ topicInfo.name }}</span>
</a-space>
<a-space>
<span style="margin-right: 16px; width: 60px; 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>
<a-tag v-if="topicInfo.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
>低频</a-tag
>
<a-tag
v-else-if="topicInfo.frequency == 1"
style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
>中频</a-tag
>
<a-tag
v-else-if="topicInfo.frequency == 2"
style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
>高频</a-tag
>
</a-space>
<a-space>
<span style="margin-right: 16px; width: 60px; 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">
<a-space v-for="item in topicInfo.user_pain_point_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 { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue';
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 topImages = [top1, top2, top3];
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);
const dataList = ref([]);
// 详情
const gotoDetail = async (record) => {
console.log(record);
const res = await fetchUserPainPointsDetail(record.id);
console.log(res);
visible.value = true;
topicInfo.value = res;
};
const getUserPainPointsList = async () => {
const params = {
industry_id: selectedIndustry.value,
time_dimension: selectedTimePeriod.value,
};
const res = await fetchUserPainPointsList(params);
console.log('关键词热度榜', res);
// 这里需要根据API返回的数据结构处理成tagRows需要的格式
dataList.value = res;
};
// 弹窗的取消
const handleCancel = () => {
visible.value = false;
};
// 弹窗的确定
const handleOk = () => {
visible.value = false;
};
// 监听筛选条件变化
watch([selectedIndustry, selectedTimePeriod], () => {
getUserPainPointsList();
});
onMounted(() => {
getUserPainPointsList();
});
</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;
}
:deep(.arco-btn-outline) {
color: #6d4cfe !important;
border-color: #6d4cfe !important;
}
</style>