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

perf: 全域数据引擎页面优化

Browse Source
This commit is contained in:
rd
2025-07-01 14:34:16 +08:00
parent a486d42fa5
commit 57e45d991e
22 changed files with 739 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/components/dataEngine/hotCloud.vue
View File

@ -1,12 +1,15 @@
<template>
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px 32px; margin: 24px 0">
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">行业词云</span>
<a-tooltip>
<template #content>基于行业内内容提取的高频词汇。</template>
<icon-question-circle size="16" class="color-#737478" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
@ -213,7 +216,7 @@ a-tag:hover {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;

20
src/views/components/dataEngine/hotTranslation.vue
View File

@ -4,14 +4,13 @@
<!-- tabel -->
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid"
style="background-color: #fff; width: 100%; padding: 0px 20px; margin-bottom: 24px"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">行业热门话题洞察</span>
<a-tooltip>
<template #content>基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</template>
<icon-question-circle size="16" class="color-#737478" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-table
@ -27,7 +26,7 @@
<span>热度指数</span>
<a-tooltip>
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="color-#737478" />
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
@ -38,7 +37,7 @@
<template #content
>统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
>
<icon-question-circle size="14" class="color-#737478" />
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
@ -52,8 +51,7 @@
<a-tag
v-for="item in record.keywords"
:key="item"
style="margin-right: 5px"
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px"
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-5px"
>{{ item }}</a-tag
>
</template>
@ -121,11 +119,11 @@
<div class="flex items-start">
<p class="!mr-16px w-48px cts relative top-2px">原始来源</p>
<div class="flex flex-col">
<div v-for="item in topicInfo.industry_topic_sources" :key="item" class="mb-18px">
<div v-for="item in topicInfo.industry_topic_sources" :key="item" class="mb-18px flex items-center">
<a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
item.title
}}</a-link>
<img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" />
<img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
</div>
</div>
</div>
@ -353,7 +351,7 @@ const handleOk = () => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
@ -377,7 +375,7 @@ const handleOk = () => {
padding: 12px 20px 0;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Regular';
font-size: 12px;
font-style: normal;
font-weight: 400;

140
src/views/components/dataEngine/keyBrandMovement.vue
View File

@ -1,72 +1,54 @@
<!-- eslint-disable vue/no-duplicate-attributes -->
<template>
<view>
<topHeader ref="topHeaderRef" @click="search"></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 style="margin: 0">基于该行业中近期提及频次高、用户互动活跃的品牌内容，筛选出关注度较高的代表性品牌。</p>
</template>
</a-popover>
</a-space>
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">重点品牌列表</span>
<a-tooltip>
<template #content
>基于该行业中近期提及频次高、用户互动活跃的品牌内容，筛选出关注度较高的代表性品牌。</template
>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-table
:columns="columns"
:data="dataList"
:filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<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-tooltip>
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</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-tooltip>
<template #content>仅基于品牌出现频次。</template>
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</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-tooltip>
<template #content>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
<template #rank="{ record }">
@ -79,44 +61,30 @@
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
</template>
<template #trend="{ 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-rise />
</template>
<template #suffix>%</template>
</a-statistic>
<div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
<icon-arrow-up v-if="record.trend > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ `${record.trend * 100}%` }}
</div>
</template>
<template #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
</a-table>
</a-space>
<!-- 舆情 & 敏感动态-->
<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 style="margin: 0">
基于情绪分析与敏感词识别，对行业内容中的负面或争议性话题进行监测，辅助判断舆情风险动态。
</p>
</template>
</a-popover>
</a-space>
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">舆情 & 敏感动态</span>
<a-tooltip>
<template #content
>基于情绪分析与敏感词识别，对行业内容中的负面或争议性话题进行监测，辅助判断舆情风险动态。</template
>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-table :data="otherList" :columns="columns2" :pagination="false" :scroll="true" style="font-size: 12px">
</a-table>
</a-space>
@ -276,7 +244,7 @@ watch(selectedIndustry, () => {
});
</script>
<style scoped>
<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
background-color: var(--color-fill-2);
@ -306,4 +274,18 @@ watch(selectedIndustry, () => {
color: #737478 !important;
margin-left: -10px;
}
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style>

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

@ -3,12 +3,15 @@
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- 关键词热度榜 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">关键词热度榜</span>
<a-tooltip>
<template #content>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
<icon-question-circle size="16" class="color-#737478" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
@ -25,7 +28,7 @@
<span>热度指数</span>
<a-tooltip>
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="color-#737478" />
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
@ -34,7 +37,7 @@
<span>变化幅度</span>
<a-tooltip>
<template #content>仅基于关键词出现频次。</template>
<icon-question-circle size="14" class="color-#737478" />
<icon-question-circle size="14" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
@ -66,73 +69,68 @@
</a-table>
</a-space>
<!-- 行业情绪 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mb-24px"
>
<div class="title-row">
<span class="title mr-4px">行业情绪</span>
<a-tooltip>
<template #content
>对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。</template
>
<icon-question-circle size="16" class="color-#737478" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-space align="center">
<a-space>
<a-space style="width: 320px">
<div id="container" style="height: 180px; width: 180px"></div>
<a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
<a-space>
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
<span>正面情绪 </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">{{ getFormatter(fellingRate[1] * 100) }}</span>
</a-space>
</a-space>
</a-space>
<a-table
:columns="columns2"
:data="rowData"
:span-method="spanMethod"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<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>
</a-space>
<div class="flex items-center w-100%">
<div v-show="fellingRate.length > 0" class="w-500px flex items-center">
<div id="container" class="w-300px h-300px"></div>
<div class="flex flex-col">
<div class="mb-12px flex items-center">
<div class="w-12px h-12px mr-10px bg-#25C883 rounded-50%"></div>
<span
>正面情绪 <span class="num">{{ getFormatter(fellingRate[0] * 100) }}</span>
</span>
</div>
<div class="flex items-center">
<div class="w-12px h-12px mr-10px bg-#F64B31 rounded-50%"></div>
<span>负面情绪 </span>
<span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
</div>
</div>
</div>
<a-table
class="flex-1"
:columns="columns2"
:data="sortedRowData"
:span-method="spanMethod"
:filter-icon-align-left="alignLeft"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<template #felling="{ record }">
<div class="flex items-center">
<img :src="fellingStatus[record.felling].icon" class="w-20px h-20px mr-4px" />
<span>{{ fellingStatus[record.felling].label }}</span>
</div>
</template>
</a-table>
</div>
</a-space>
<!-- 新兴关键词 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 0 20px" class="mb-24px">
<a-space
direction="vertical"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px"
>
<div class="title-row">
<span class="title mr-4px">新兴关键词</span>
<a-tooltip>
<template #content
>指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
>
<icon-question-circle size="16" class="color-#737478" />
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
@ -168,7 +166,7 @@
/>
</template>
<template #first_appeared_at="{ record }">
<div>{{ formatTimestamp(record.first_appeared_at) }}</div>
{{ formatTimestamp(record.first_appeared_at) }}
</template>
<template #hot="{ record }">
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
@ -177,31 +175,19 @@
<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-tooltip>
<template #content>综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</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-tooltip>
<template #content>仅基于关键词出现频次。</template>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</a-space>
</template>
<template #tred="{ record }">
@ -217,63 +203,57 @@
</a-table>
</a-space>
<!-- modal -->
<a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
<a-modal
:visible="visible"
modal-class="keyword-modal"
unmountOnClose
width="640px"
@ok="handleOk"
@cancel="handleCancel"
>
<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>{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
</a-space>
<a-space>
<span style="margin-right: 16px">变化幅度</span>
<div>
<a-statistic
v-if="topicInfo?.trend > 0"
style="font-size: 14px"
:value="topicInfo.trend * 100"
:value-style="{ color: '#F64B31' }"
>
<template #prefix>
<IconArrowRise />
</template>
<template #suffix>%</template>
</a-statistic>
<a-statistic
v-else
style="font-size: 14px"
:value="topicInfo?.trend * 100 || 0"
:value-style="{ color: '#25C883' }"
>
<template #prefix>
<IconArrowFall />
</template>
<template #suffix>%</template>
</a-statistic>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">话题名称</p>
<span class="cts">{{ topicInfo.name }}</span>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">最大规模出现</p>
<span class="cts">{{ formatTimestamp(topicInfo.first_appeared_at) }}</span>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">变化幅度</p>
<div class="flex items-center" :class="topicInfo.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
<icon-arrow-up v-if="topicInfo.trend > 0" size="16" />
<icon-arrow-down v-else size="16" />
{{ `${topicInfo.trend * 100}%` }}
</div>
</a-space>
<a-space>
<span style="margin-right: 16px">热度指数</span>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">热度指数</p>
<img v-for="i in topicInfo.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" />
</a-space>
</div>
<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_new_keyword_sources" :key="item">
<a-link style="background-color: initial" :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>
</a-space>
<div class="flex items-start">
<p class="!mr-16px w-83px cts relative top-2px">原始来源</p>
<div class="flex flex-col">
<div v-for="item in topicInfo.industry_new_keyword_sources" :key="item" class="mb-18px flex items-center">
<a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
item.title
}}</a-link>
<img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
</div>
</div>
</div>
</a-space>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
</template>
</a-modal>
</view>
</template>
@ -297,6 +277,25 @@ import top1 from '@/assets/img/captcha/top1.svg';
import top2 from '@/assets/img/captcha/top2.svg';
import top3 from '@/assets/img/captcha/top3.svg';
import icon1 from '@/assets/img/hottranslation/good.png';
import icon2 from '@/assets/img/hottranslation/normal.png';
import icon3 from '@/assets/img/hottranslation/poor.png';
const fellingStatus = {
2: {
icon: icon1,
label: '正面情绪',
},
1: {
icon: icon2,
label: '中性情绪',
},
0: {
icon: icon3,
label: '负面情绪',
},
};
const starImages = [star1, star2, star3, star4, star5];
const topImages = [top1, top2, top3];
@ -356,8 +355,8 @@ const columns2 = [
title: '情绪分布',
dataIndex: 'felling',
slotName: 'felling',
width: 120,
minWidth: 120,
width: 160,
// minWidth: 120,
},
{
title: '主要观点',
@ -365,13 +364,48 @@ const columns2 = [
},
];
const spanMethod = ({ record, columnIndex }) => {
// console.log(record.felling);
// if (record.felling === 2) {
// return {
// rowspan: 3,
// };
// }
const sortedRowData = computed(() => {
return [...rowData.value].sort((a, b) => {
return b.felling - a.felling;
});
});
const spanMethod = ({ record, columnIndex, rowIndex }) => {
if (columnIndex === 0) {
const currentFelling = record.felling;
let rowspan = 1;
for (let i = rowIndex + 1; i < sortedRowData.value.length; i++) {
if (sortedRowData.value[i].felling === currentFelling) {
rowspan++;
} else {
break;
}
}
// eslint-disable-next-line no-unreachable-loop
for (let i = rowIndex - 1; i >= 0; i--) {
if (sortedRowData.value[i].felling === currentFelling) {
return {
rowspan: 0,
colspan: 0,
};
} else {
break;
}
}
return {
rowspan,
colspan: 1,
};
}
// 其他列不合并
return {
rowspan: 1,
colspan: 1,
};
};
const columns3 = [
@ -547,7 +581,7 @@ const drawChart = () => {
labelLine: {
show: false, // 不显示引导线
},
radius: ['40%', '55%'],
radius: ['50%', '70%'], // 调整半径范围
},
],
};
@ -616,11 +650,68 @@ onMounted(() => {
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi';
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Medium';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
&.num {
font-family: 'HarmonyOS Sans SC';
}
}
</style>
<style lang="scss">
.keyword-modal {
.arco-modal-header {
border-bottom: none;
height: 56px;
padding: 0 20px;
.arco-modal-title {
justify-content: flex-start;
}
}
.arco-modal-body {
padding: 12px 20px 0;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
p {
margin: 0;
padding: 0;
}
}
.arco-modal-footer {
display: flex;
height: 64px;
padding: 0px 20px;
justify-content: flex-end;
align-items: center;
border-top: 1px solid var(--Border-1, #d7d7d9);
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}
</style>

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

@ -3,27 +3,27 @@
<topHeader ref="topHeaderRef" @search="search"></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 style="margin: 0">基于用户内容中的情绪分析与表达模式，提取反复出现的负面倾向主题，反映典型使用痛点。</p>
</template>
</a-popover>
</a-space>
<a-space
direction="vertical"
style="background-color: #fff; width: 100%; padding: 0 20px"
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-24px"
>
<div class="title-row">
<span class="title mr-4px">用户痛点观察</span>
<a-tooltip>
<template #content
>基于用户内容中的情绪分析与表达模式，提取反复出现的负面倾向主题，反映典型使用痛点。</template
>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-table
:columns="columns"
:data="dataList"
:filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true"
:pagination="false"
@change="handleChange"
>
<template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@ -32,98 +32,84 @@
<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>
<a-tag
v-for="item in record.keywords"
:key="item"
class="!rounded-2px !px-8px !py-1px !bg-#F2F3F5 !h-22px !color-#3C4043 mb-5px mr-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
:class="`!rounded-2px !px-8px !py-1px !bg-${frequencyStatus[record.frequency].bgColor} !h-22px !color-${
frequencyStatus[record.frequency].color
}`"
>{{ frequencyStatus[record.frequency].label }}</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>
<a-button type="outline" class="!rounded-4px" @click="gotoDetail(record)">详情</a-button>
</template>
</a-table>
</a-space>
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
<a-modal
:visible="visible"
modal-class="user-pain-points-modal"
unmountOnClose
width="640px"
@ok="handleOk"
@cancel="handleCancel"
>
<template #title>
<span style="text-align: left; width: 100%">用户痛点观察</span>
</template>
<div>
<a-space direction="vertical" style="font-size: 12px">
<a-space>
<span style="width: 80px">痛点</span>
<span>{{ topicInfo.name }}</span>
</a-space>
<a-space>
<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="width: 80px; font-size: 12px">频次</span>
<a-tag v-if="topicInfo.frequency == 0" style="margin-right: 5px; background-color: #ebf7f2; color: #1bae71"
>低频</a-tag
>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-60px">痛点</p>
<span class="cts">{{ topicInfo.name }}</span>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-60px">关键词</p>
<a-tag
v-else-if="topicInfo.frequency == 1"
style="margin-right: 5px; background-color: #fff5de; color: #cc8b00"
>中频</a-tag
v-for="item in topicInfo.keywords"
:key="item"
class="mr-8px py-10px px-8px rounded-4px bg-#F2F3F5 cts !h-24px"
>{{ item }}</a-tag
>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-60px">频次</p>
<a-tag
v-else-if="topicInfo.frequency == 2"
style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27"
>高频</a-tag
:class="`!rounded-2px !px-8px !py-1px !bg-${
frequencyStatus[topicInfo.frequency].bgColor
} !h-22px !color-${frequencyStatus[topicInfo.frequency].color}`"
>{{ frequencyStatus[topicInfo.frequency].label }}</a-tag
>
</a-space>
<a-space>
<span style="width: 80px; font-size: 12px">代表性发言</span>
<span>{{ topicInfo.content }}</span>
</a-space>
<a-space direction="top">
<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;
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>
</a-space>
</div>
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-60px">代表性发言</p>
<span class="cts">{{ topicInfo.content }}</span>
</div>
<div class="flex items-start">
<p class="cts !mr-16px flex-shrink-0 w-60px">原始来源</p>
<div class="flex flex-col">
<div v-for="item in topicInfo.user_pain_point_sources" :key="item" class="mb-18px flex items-center">
<a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
item.title
}}</a-link>
<img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
</div>
</div>
</div>
</a-space>
</div>
<template #footer>
<a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
<a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
</template>
</a-modal>
</view>
</template>
@ -144,6 +130,23 @@ const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
const dataList = ref([]);
const frequencyStatus = {
0: {
label: '低频',
color: '#1bae71',
bgColor: '#ebf7f2',
},
1: {
label: '中频',
color: '#cc8b00',
bgColor: '#fff5de',
},
2: {
label: '高频',
color: '#c53c27',
bgColor: '#ffe7e4',
},
};
const columns = [
{
title: '排名',
@ -239,7 +242,7 @@ const search = () => {
};
</script>
<style scoped>
<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
background-color: var(--color-fill-2);
@ -263,4 +266,63 @@ const search = () => {
color: #6d4cfe !important;
border-color: #6d4cfe !important;
}
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
</style>
<style lang="scss">
.user-pain-points-modal {
.arco-modal-header {
border-bottom: none;
height: 56px;
padding: 0 20px;
.arco-modal-title {
justify-content: flex-start;
}
}
.arco-modal-body {
padding: 12px 20px 0;
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
}
p {
margin: 0;
padding: 0;
}
}
.arco-modal-footer {
display: flex;
height: 64px;
padding: 0px 20px;
justify-content: flex-end;
align-items: center;
border-top: 1px solid var(--Border-1, #d7d7d9);
.cancel-btn {
border-radius: 4px;
border: 1px solid var(--BG-500, #b1b2b5);
background: var(--BG-white, #fff);
&:hover {
border: 1px solid var(--BG-500, #b1b2b5);
}
}
}
}
</style>

337
src/views/components/dataEngine/userPersona.vue
View File

@ -1,57 +1,47 @@
<template>
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<a-space style="width: 100%; display: flex">
<a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
<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>
<div class="h-360px w-100% flex mb-24px">
<!-- 1. 性别分布 -->
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px w-600px mr-24px">
<div class="title-row">
<span class="title mr-4px">性别分布</span>
<a-tooltip>
<template #content>基于社交内容平台中用户资料、互动行为及语义特征进行智能识别与估算。</template>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-space>
<div id="container" style="height: 180px; width: 180px"></div>
<div id="container" class="w-300px h-300px"></div>
<a-space direction="vertical" style="font-size: 14px">
<a-space>
<span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
<span>女性</span>
<span style="width: 40px" v-if="genderData.length > 0">{{ genderData[0].rate * 100 }}%</span>
<span v-if="genderData.length > 0" style="width: 40px">{{ genderData[0].rate * 100 }}%</span>
<span>TGI</span>
<span v-if="genderData.length > 0">{{ genderData[0].tgi }}</span>
</a-space>
<a-space>
<span style="width: 8px; height: 8px; background-color: #2a59f3; border-radius: 50%"></span>
<span>男性</span>
<span style="width: 40px" v-if="genderData.length > 1">{{ genderData[1].rate * 100 }}%</span>
<span v-if="genderData.length > 1" style="width: 40px">{{ genderData[1].rate * 100 }}%</span>
<span>TGI</span>
<span v-if="genderData.length > 1">{{ genderData[1].tgi }}</span>
</a-space>
</a-space>
</a-space>
</a-space>
<a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
</div>
<!-- 2. 年龄分布 -->
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 flex flex-col">
<a-space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
<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>
<div class="title-row">
<span class="title mr-4px">年龄分布</span>
<a-tooltip>
<template #content>基于社交平台的公开信息、内容偏好与行为模式，通过算法进行年龄段归类和统计。</template>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<a-space align="center">
<span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
<span style="color: #6d4cfe">占比</span>
@ -60,32 +50,24 @@
</a-space>
</a-space>
<a-space>
<div id="age-container" style="height: 180px; width: 480px"></div>
</a-space>
</a-space>
</a-space>
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1; margin-top: 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-space>
<div id="age-container" class="w-100% flex-1"></div>
</div>
</div>
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 pb-20px">
<div class="title-row">
<span class="title mr-4px">地域分布</span>
<a-tooltip>
<template #content>基于社交平台的IP归属地、位置标签、内容发布地等数据推测用户活跃区域。</template>
<icon-question-circle size="16" class="!color-#737478" />
</a-tooltip>
</div>
<div class="flex">
<a-space direction="vertical">
<div id="chinaMap" style="height: 416px; width: 640px"></div>
<a-space direction="vertical" style="font-size: 14px">
<span>搜索指数</span>
<span class="cts">搜索指数</span>
<a-space>
<span>高</span>
<span class="cts">高</span>
<span
v-for="item in 5"
:key="item"
@ -98,14 +80,14 @@
margin: '0 2px',
}"
></span>
<span>低</span>
<span class="cts">低</span>
</a-space>
</a-space>
</a-space>
<a-space>
<a-tabs default-active-key="1" @change="tabChange">
<div class="flex flex-col h-486px">
<a-tabs default-active-key="1" class="h-100%" @change="tabChange">
<a-tab-pane key="1" title="省份">
<a-table :data="geoList" :pagination="false">
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
<template #columns>
<a-table-column title="排名" data-index="rank" />
<a-table-column title="省份" data-index="geo" />
@ -116,20 +98,24 @@
</a-table>
</a-tab-pane>
<a-tab-pane key="2" title="城市">
<a-table :data="geoList" :pagination="false">
<a-table :data="geoList" :pagination="false" class="h-100%" :scroll="{ y: '100%' }">
<template #columns>
<a-table-column title="排名" data-index="rank" />
<a-table-column title="城市" data-index="geo" />
<a-table-column title="分布占比" data-index="rate" />
<a-table-column title="分布占比" data-index="rate">
<template #cell="{ record }">
<span class="cts">{{ (record.rate * 100).toFixed(2) }}%</span>
</template>
</a-table-column>
<a-table-column title="TGI指数" data-index="tgi" />
</template>
</a-table>
</a-tab-pane>
</a-tabs>
</a-space>
</a-space>
</a-space>
</div>
</div>
</div>
</view>
</template>
@ -141,7 +127,7 @@ import * as echarts from 'echarts';
import chinaJson from '@/assets/maps/china.json';
echarts.registerMap('china', chinaJson);
const scope = ref(1); //地域范围，1-省，2-市
const scope = ref(1); // 地域范围，1-省，2-市
const chartInstance = (ref < echarts.ECharts) | (null > null);
const topHeaderRef = ref();
// 从topHeader获取统一的状态
@ -180,12 +166,13 @@ const getAgeDistributionsList = async () => {
return;
}
if (selectedSubCategory.value != 0) {
parms['industry_id'] = selectedSubCategory.value;
params['industry_id'] = selectedSubCategory.value;
}
const { code, data } = await fetchAgeDistributionsList(params);
if (code === 200) {
ageValueData.value = data;
drawAgeChart();
}
const res = await fetchAgeDistributionsList(params);
console.log('年龄分布：', res);
ageValueData.value = res;
drawAgeChart();
};
// 获得地理分布列表
@ -202,11 +189,12 @@ const getGeoDistributionsList = async () => {
return;
}
if (selectedSubCategory.value != 0) {
parms['industry_id'] = selectedSubCategory.value;
params['industry_id'] = selectedSubCategory.value;
}
const { code, data } = await fetchGeoDistributionsList(params);
if (code === 200) {
geoList.value = data;
}
const res = await fetchGeoDistributionsList(params);
console.log('地理分布：', res);
geoList.value = res;
};
// 获取性别分布列表
const getGenderDistributionsList = async () => {
@ -221,46 +209,78 @@ const getGenderDistributionsList = async () => {
return;
}
if (selectedSubCategory.value != 0) {
parms['industry_id'] = selectedSubCategory.value;
}
const res = await fetchGenderDistributionsList(params);
genderData.value = [];
genderData.value = [...res];
await nextTick();
genderValueData.value = [];
for (let i = 0; i < res.length; i++) {
genderValueData.value.push({
value: res[i].rate * 100,
});
params['industry_id'] = selectedSubCategory.value;
}
const { code, data } = await fetchGenderDistributionsList(params);
if (code === 200) {
genderData.value = [];
genderValueData.value = [];
drawChart();
genderData.value = [...data];
await nextTick();
genderValueData.value = data.map((item) => ({
value: item.rate * 100,
tgi: item.tgi,
name: item.gender === 1 ? '女性' : '男性',
}));
drawChart();
}
};
const drawChart = () => {
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
let dom = document.getElementById('container');
let myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false,
});
var option;
option = {
let option = {
color: ['#F64B31', '#2A59F3'],
tooltip: {
trigger: 'item',
backgroundColor: '#fff',
borderColor: 'rgba(0,0,0,0.05)',
borderWidth: 1,
textStyle: {
color: '#222',
fontSize: 14,
},
extraCssText: 'box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);border-radius:8px;',
formatter: function (params) {
return `
<div class="w-140px">
<div style="font-weight:500;margin-bottom:8px;">${params.name}</div>
<div style="display:flex;align-items:center;margin-bottom:4px;">
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#2a59f3;margin-right:8px;"></span>
<span>占比</span>
<span style="margin-left:auto;">${params.value}%</span>
</div>
<div style="display:flex;align-items:center;">
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#F64B31;margin-right:8px;"></span>
<span>TGI</span>
<span style="margin-left:auto;">${params.data.tgi || '-'}</span>
</div>
</div>
`;
},
},
series: [
{
type: 'pie',
avoidLabelOverlap: false,
data: genderValueData.value,
label: {
show: false, // 关闭扇区外的文字
},
labelLine: {
show: false, // 不显示引导线
show: false,
},
radius: ['40%', '55%'],
},
],
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
myChart.setOption(option);
};
const drawAgeChart = () => {
@ -269,7 +289,7 @@ const drawAgeChart = () => {
const xAxis = ageValueData.value.map((item) => item.age);
const yAxis = ageValueData.value.map((item) => item.rate * 100);
const yAxis2 = ageValueData.value.map((item) => item.tgi);
const average = yAxis2.reduce((sum, val) => sum + val, 0) / yAxis2.length;
// const average = yAxis2.reduce((sum, val) => sum + val, 0) / yAxis2.length;
// 图表初始化（强制使用2D渲染）
const myChart = echarts.init(dom, null, {
@ -289,19 +309,47 @@ const drawAgeChart = () => {
animation: false, // 小尺寸下关闭动画提升性能
tooltip: {
trigger: 'axis',
confine: true, // 确保tooltip不超出容器
confine: true,
axisPointer: {
type: 'shadow',
label: {
fontSize: 12, // 调小提示标签字号
fontSize: 12,
backgroundColor: 'rgba(0,0,0,0.7)',
},
},
backgroundColor: '#fff',
borderColor: 'rgba(0,0,0,0.05)',
borderWidth: 1,
textStyle: {
color: '#333',
fontSize: 14,
},
extraCssText: 'box-shadow:0 2px 8px 0 rgba(0,0,0,0.08);border-radius:8px;',
formatter: function (params) {
const name = params[0].name;
const percent = params[0].value;
const tgi = params[1].value;
return `
<div class="w-140px">
<div style="margin-bottom: 4px;" class="color-#000">${name}岁</div>
<div style="display: flex;align-items: center;margin-bottom:2px;">
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#6d4cfe;margin-right:6px;"></span>
<span>占比</span>
<span style="color:#333;margin-left:auto;">${percent.toFixed(2)}%</span>
</div>
<div style="display: flex;align-items: center;">
<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#F64B31;margin-right:6px;"></span>
<span>TGI</span>
<span style="color:#333;margin-left:auto;">${tgi}</span>
</div>
</div>
`;
},
},
grid: {
top: 10,
top: 25,
right: 30,
bottom: 25,
bottom: 40,
left: 40,
containLabel: false,
},
@ -312,8 +360,9 @@ const drawAgeChart = () => {
interval: 0,
rotate: 0,
fontSize: 12,
margin: 2,
margin: 10,
hideOverlap: true, // 自动隐藏重叠标签
color: '#939499',
},
axisTick: {
alignWithLabel: true,
@ -330,51 +379,61 @@ const drawAgeChart = () => {
// 左侧百分比轴
type: 'value',
name: '占比',
nameLocation: 'top',
nameGap: 8,
nameLocation: 'end',
nameGap: 10,
nameTextStyle: {
color: '#939499',
fontSize: 12,
padding: [0, 0, 3, 0], // 微调名称位置
padding: [0, 50, 0, 0], // 微调名称位置
},
min: 0,
max: Math.ceil(Math.max(...yAxis) / 20) * 20,
interval: calcInterval(yAxis, 20),
axisLabel: {
formatter: '{value}%',
fontSize: 8,
margin: 4,
fontSize: 12,
margin: 10,
showMinLabel: true,
showMaxLabel: true,
color: '#939499',
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.3)',
width: 0.8,
// color: 'rgba(255,255,255,0.3)',
// width: 0.8,
},
},
},
{
// 右侧TGI轴
type: 'value',
name: 'TGI指数',
nameLocation: 'top',
nameGap: 8,
name: 'TGI',
nameLocation: 'end',
nameGap: 10,
nameTextStyle: {
fontSize: 10,
color: '#F64B31',
padding: [0, 0, 3, 0],
fontSize: 12,
color: '#939499',
padding: [0, 0, 0, 20],
},
min: Math.floor(Math.min(...yAxis2) / 50) * 50,
max: Math.ceil(Math.max(...yAxis2) / 50) * 50,
interval: calcInterval(yAxis2, 50),
axisLabel: {
fontSize: 8,
fontSize: 12,
margin: 4,
color: '#F64B31',
color: '#939499',
},
splitLine: {
lineStyle: {
type: 'dashed',
// color: 'rgba(255,255,255,0.3)',
// width: 0.8,
},
},
axisLine: {
lineStyle: {
type: 'dashed',
color: '#F64B31',
width: 0.8,
},
@ -386,7 +445,7 @@ const drawAgeChart = () => {
// 柱状图
name: '占比',
type: 'bar',
barWidth: 10,
barWidth: 16,
itemStyle: {
color: '#6d4cfe',
borderRadius: [1, 1, 0, 0], // 微圆角
@ -395,7 +454,7 @@ const drawAgeChart = () => {
show: true,
position: 'top',
formatter: '{c}%',
fontSize: 8,
fontSize: 12,
color: '#fff',
distance: 1, // 减小标签与柱子的距离
},
@ -420,14 +479,15 @@ const drawAgeChart = () => {
type: 'dashed',
},
label: {
fontSize: 8,
fontSize: 12,
color: '#FFAE00',
formatter: (params) => {
// 改用回调函数
const avg = params.data.coord[1]; // 获取平均值坐标
return 'TGI:' + avg.toFixed(0); // 格式化显示
},
position: 'end',
position: 'insideEnd',
offset: [0, -10],
},
data: [{ type: 'average' }],
},
@ -498,7 +558,7 @@ onMounted(() => {
});
</script>
<style scoped>
<style scoped lang="scss">
/* 自定义样式 */
:deep(.arco-table-th) {
background-color: var(--color-fill-2);
@ -522,4 +582,41 @@ onMounted(() => {
color: #6d4cfe !important;
border-color: #6d4cfe !important;
}
.title-row {
display: flex;
height: 64px;
padding: 10px 0 2px 0;
align-items: center;
.title {
color: var(--Text-1, #211f24);
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
}
.cts {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 157.143% */
&.num {
font-family: 'HarmonyOS Sans SC';
}
}
:deep(.arco-tabs) {
display: flex;
flex-direction: column;
.arco-tabs-content {
flex: 1;
.arco-tabs-content-list,
.arco-tabs-pane,
.arco-table-container {
height: 100%;
}
}
}
</style>