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

BIN
src/assets/fonts/Alibaba-PuHuiTi-Bold.otf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Alibaba-PuHuiTi-Medium.otf Normal file
View File

Binary file not shown.

BIN
src/assets/fonts/Alibaba-PuHuiTi-Regular.otf Normal file
View File

Binary file not shown.

2
src/components/container.vue
View File

@ -23,7 +23,7 @@ const props = defineProps<{
border-radius: 8px; border-radius: 8px;
} }
.title { .title {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;

9
src/components/delete-modal.vue
View File

@ -7,8 +7,7 @@
<slot></slot> <slot></slot>
</a-modal> </a-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<style lang="less"> <style lang="less">
:deep(.arco-btn-status-danger) { :deep(.arco-btn-status-danger) {
background-color: red !important; background-color: red !important;
@ -20,7 +19,7 @@
} }
.delete-modal-title { .delete-modal-title {
margin-top: 24px; margin-top: 24px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: var(--Text-1, rgba(33, 31, 36, 1)); color: var(--Text-1, rgba(33, 31, 36, 1));
@ -36,14 +35,14 @@
border: 1px solid var(--BG-500, rgba(177, 178, 181, 1)); border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
border-radius: 4px; border-radius: 4px;
padding: 7px 20px; padding: 7px 20px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
:last-child { :last-child {
border-radius: 4px; border-radius: 4px;
padding: 7px 20px; padding: 7px 20px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
margin-left: 16px; margin-left: 16px;

6
src/components/join-modal.vue
View File

@ -1,7 +1,3 @@
<!--
* @Author: RenXiaoDong
* @Date: 2025-06-22 22:15:28
-->
<template> <template>
<Modal title="加入企业" @ok="handleJoin"> <Modal title="加入企业" @ok="handleJoin">
<div v-if="enterprise" class="join-body flex item-center"> <div v-if="enterprise" class="join-body flex item-center">
@ -38,7 +34,7 @@ onMounted(() => {
<style lang="less"> <style lang="less">
.join-body { .join-body {
margin: 0; margin: 0;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: var(--Text-1, rgba(33, 31, 36, 1)); color: var(--Text-1, rgba(33, 31, 36, 1));

10
src/components/modal.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs" > <a-modal title-align="start" modal-class="modal" body-class="body" v-bind="$attrs">
<slot></slot> <slot></slot>
</a-modal> </a-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<style lang="less"> <style lang="less">
.modal { .modal {
.arco-modal-header { .arco-modal-header {
@ -17,14 +15,14 @@
border: 1px solid var(--BG-500, rgba(177, 178, 181, 1)); border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
border-radius: 4px; border-radius: 4px;
padding: 7px 20px; padding: 7px 20px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
:last-child { :last-child {
border-radius: 4px; border-radius: 4px;
padding: 7px 20px; padding: 7px 20px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
margin-left: 16px; margin-left: 16px;

8
src/styles/components/table.scss
View File

@ -1,7 +1,7 @@
.arco-table { .arco-table {
@mixin table-cell-text { @mixin table-cell-text {
color: var(--Text-1, #211f24); color: var(--Text-1, #3C4043);
font-family: 'Alibaba PuHuiTi'; font-family: 'PuHuiTi-Regular';
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@ -19,6 +19,7 @@
padding: 13px 16px; padding: 13px 16px;
.arco-table-th-title { .arco-table-th-title {
@include table-cell-text; @include table-cell-text;
font-family: 'PingFangSC-Medium';
} }
} }
} }
@ -29,7 +30,8 @@
.arco-table-td { .arco-table-td {
.arco-table-cell { .arco-table-cell {
padding: 13px 16px; padding: 13px 16px;
.arco-table-cell-content { .arco-table-cell-content,
.arco-table-td-content {
@include table-cell-text; @include table-cell-text;
} }
} }

24
src/styles/font.scss Normal file
View File

@ -0,0 +1,24 @@
@font-face {
font-family: 'PuHuiTi-Medium';
src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.otf');
}
@font-face {
font-family: 'PuHuiTi-Regular';
src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.otf');
}
@font-face {
font-family: 'PuHuiTi-Bold';
src: url('@/assets/fonts/Alibaba-PuHuiTi-Bold.otf');
}
.font-family-puhui-bold {
font-family: PuHuiTi-Bold !important;
}
.font-family-puhui-medium {
font-family: PuHuiTi-Medium !important;
}
.font-family-puhui-regular {
font-family: PuHuiTi-Regular !important;
}

1
src/styles/index.ts
View File

@ -4,5 +4,6 @@
*/ */
import './vars.css'; import './vars.css';
import './components/index.scss'; import './components/index.scss';
import './font.scss';
import 'normalize.css'; import 'normalize.css';
import 'uno.css'; import 'uno.css';

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

@ -1,12 +1,15 @@
<template> <template>
<view> <view>
<topHeader ref="topHeaderRef" @search="search"></topHeader> <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"> <div class="title-row">
<span class="title mr-4px">行业词云</span> <span class="title mr-4px">行业词云</span>
<a-tooltip> <a-tooltip>
<template #content>基于行业内内容提取的高频词汇。</template> <template #content>基于行业内内容提取的高频词汇。</template>
<icon-question-circle size="16" class="color-#737478" /> <icon-question-circle size="16" class="!color-#737478" />
</a-tooltip> </a-tooltip>
</div> </div>
@ -213,7 +216,7 @@ a-tag:hover {
align-items: center; align-items: center;
.title { .title {
color: var(--Text-1, #211f24); color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi'; font-family: 'PuHuiTi-Medium';
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;

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

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

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

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

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

@ -3,12 +3,15 @@
<view> <view>
<topHeader ref="topHeaderRef" @search="search"></topHeader> <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"> <div class="title-row">
<span class="title mr-4px">关键词热度榜</span> <span class="title mr-4px">关键词热度榜</span>
<a-tooltip> <a-tooltip>
<template #content>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template> <template #content>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
<icon-question-circle size="16" class="color-#737478" /> <icon-question-circle size="16" class="!color-#737478" />
</a-tooltip> </a-tooltip>
</div> </div>
@ -25,7 +28,7 @@
<span>热度指数</span> <span>热度指数</span>
<a-tooltip> <a-tooltip>
<template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template> <template #content>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="color-#737478" /> <icon-question-circle size="14" class="!color-#737478" />
</a-tooltip> </a-tooltip>
</a-space> </a-space>
</template> </template>
@ -34,7 +37,7 @@
<span>变化幅度</span> <span>变化幅度</span>
<a-tooltip> <a-tooltip>
<template #content>仅基于关键词出现频次。</template> <template #content>仅基于关键词出现频次。</template>
<icon-question-circle size="14" class="color-#737478" /> <icon-question-circle size="14" class="!color-#737478" />
</a-tooltip> </a-tooltip>
</a-space> </a-space>
</template> </template>
@ -66,37 +69,41 @@
</a-table> </a-table>
</a-space> </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"> <div class="title-row">
<span class="title mr-4px">行业情绪</span> <span class="title mr-4px">行业情绪</span>
<a-tooltip> <a-tooltip>
<template #content <template #content
>对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。</template >对该行业下用户内容进行情绪分析，按情绪类别统计占比，提取占比最高者作为行业情绪代表。</template
> >
<icon-question-circle size="16" class="color-#737478" /> <icon-question-circle size="16" class="!color-#737478" />
</a-tooltip> </a-tooltip>
</div> </div>
<a-space align="center"> <div class="flex items-center w-100%">
<a-space> <div v-show="fellingRate.length > 0" class="w-500px flex items-center">
<a-space style="width: 320px"> <div id="container" class="w-300px h-300px"></div>
<div id="container" style="height: 180px; width: 180px"></div> <div class="flex flex-col">
<a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px"> <div class="mb-12px flex items-center">
<a-space> <div class="w-12px h-12px mr-10px bg-#25C883 rounded-50%"></div>
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span> <span
<span>正面情绪 </span> >正面情绪 <span class="num">{{ getFormatter(fellingRate[0] * 100) }}</span>
<span style="width: 40px">{{ getFormatter(fellingRate[0] * 100) }}</span> </span>
</a-space> </div>
<a-space> <div class="flex items-center">
<span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span> <div class="w-12px h-12px mr-10px bg-#F64B31 rounded-50%"></div>
<span>负面情绪 </span> <span>负面情绪 </span>
<span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span> <span style="width: 40px">{{ getFormatter(fellingRate[1] * 100) }}</span>
</a-space> </div>
</a-space> </div>
</a-space> </div>
<a-table <a-table
class="flex-1"
:columns="columns2" :columns="columns2"
:data="rowData" :data="sortedRowData"
:span-method="spanMethod" :span-method="spanMethod"
:filter-icon-align-left="alignLeft" :filter-icon-align-left="alignLeft"
:scroll="true" :scroll="true"
@ -104,35 +111,26 @@
@change="handleChange" @change="handleChange"
> >
<template #felling="{ record }"> <template #felling="{ record }">
<img <div class="flex items-center">
v-if="record.felling == '2'" <img :src="fellingStatus[record.felling].icon" class="w-20px h-20px mr-4px" />
src="@/assets/img/hottranslation/good.png" <span>{{ fellingStatus[record.felling].label }}</span>
style="width: 16px; height: 16px" </div>
/>
<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>
</a-table> </a-table>
</a-space> </div>
</a-space>
</a-space> </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"> <div class="title-row">
<span class="title mr-4px">新兴关键词</span> <span class="title mr-4px">新兴关键词</span>
<a-tooltip> <a-tooltip>
<template #content <template #content
>指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template >指当前周期中首次出现，或相较上一周期词频显著增长的关键词，反映近期出现的新关注点。</template
> >
<icon-question-circle size="16" class="color-#737478" /> <icon-question-circle size="16" class="!color-#737478" />
</a-tooltip> </a-tooltip>
</div> </div>
@ -168,7 +166,7 @@
/> />
</template> </template>
<template #first_appeared_at="{ record }"> <template #first_appeared_at="{ record }">
<div>{{ formatTimestamp(record.first_appeared_at) }}</div> {{ formatTimestamp(record.first_appeared_at) }}
</template> </template>
<template #hot="{ record }"> <template #hot="{ record }">
<img v-for="i in record.hot" :key="i" :src="starImages[i - 1]" style="width: 16px; height: 16px" /> <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 }"> <template #hotTitle="{ record }">
<a-space> <a-space>
<span>当前热度指数</span> <span>当前热度指数</span>
<a-popover position="tr"> <a-tooltip>
<a-button type="primary" class="pop-btn2"> <template #content>综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</template>
<template #icon> <icon-question-circle size="16" class="!color-#737478" />
<icon-question-circle /> </a-tooltip>
</template>
</a-button>
<template #content>
<p style="margin: 0">综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</p>
</template>
</a-popover>
</a-space> </a-space>
</template> </template>
<template #trendTitle="{ record }"> <template #trendTitle="{ record }">
<a-space> <a-space>
<span>变化幅度</span> <span>变化幅度</span>
<a-popover position="tr"> <a-tooltip>
<a-button type="primary" class="pop-btn2"> <template #content>仅基于关键词出现频次。</template>
<template #icon> <icon-question-circle size="16" class="!color-#737478" />
<icon-question-circle /> </a-tooltip>
</template>
</a-button>
<template #content>
<p style="margin: 0">仅基于关键词出现频次。</p>
</template>
</a-popover>
</a-space> </a-space>
</template> </template>
<template #tred="{ record }"> <template #tred="{ record }">
@ -217,63 +203,57 @@
</a-table> </a-table>
</a-space> </a-space>
<!-- modal --> <!-- 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> <template #title>
<span style="text-align: left; width: 100%">新兴关键词</span> <span style="text-align: left; width: 100%">新兴关键词</span>
</template> </template>
<div> <div>
<a-space direction="vertical"> <a-space direction="vertical">
<a-space> <div class="mb-12px flex items-center">
<span style="margin-right: 16px">关键词</span> <p class="cts !mr-16px flex-shrink-0 w-83px">话题名称</p>
<span>{{ topicInfo.name }}</span> <span class="cts">{{ 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> </div>
</a-space> <div class="mb-12px flex items-center">
<a-space> <p class="cts !mr-16px flex-shrink-0 w-83px">最大规模出现</p>
<span style="margin-right: 16px">热度指数</span> <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>
</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" /> <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"> <div class="flex items-start">
<span style="margin-right: 16px; width: 60px; font-size: 12px">原始来源 </span> <p class="!mr-16px w-83px cts relative top-2px">原始来源</p>
<a-space direction="vertical" style="margin-left: 15px"> <div class="flex flex-col">
<a-space v-for="item in topicInfo.industry_new_keyword_sources" :key="item"> <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">{{ item.title }}</a-link> <a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
<img src="@/assets/img/hottranslation/xhs.png" style="width: 16px; height: 16px" /> item.title
</a-space> }}</a-link>
</a-space> <img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
</a-space> </div>
</div>
</div>
</a-space> </a-space>
</div> </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> </a-modal>
</view> </view>
</template> </template>
@ -297,6 +277,25 @@ import top1 from '@/assets/img/captcha/top1.svg';
import top2 from '@/assets/img/captcha/top2.svg'; import top2 from '@/assets/img/captcha/top2.svg';
import top3 from '@/assets/img/captcha/top3.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 starImages = [star1, star2, star3, star4, star5];
const topImages = [top1, top2, top3]; const topImages = [top1, top2, top3];
@ -356,8 +355,8 @@ const columns2 = [
title: '情绪分布', title: '情绪分布',
dataIndex: 'felling', dataIndex: 'felling',
slotName: 'felling', slotName: 'felling',
width: 120, width: 160,
minWidth: 120, // minWidth: 120,
}, },
{ {
title: '主要观点', title: '主要观点',
@ -365,13 +364,48 @@ const columns2 = [
}, },
]; ];
const spanMethod = ({ record, columnIndex }) => { const sortedRowData = computed(() => {
// console.log(record.felling); return [...rowData.value].sort((a, b) => {
// if (record.felling === 2) { return b.felling - a.felling;
// return { });
// rowspan: 3, });
// };
// } 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 = [ const columns3 = [
@ -547,7 +581,7 @@ const drawChart = () => {
labelLine: { labelLine: {
show: false, // 不显示引导线 show: false, // 不显示引导线
}, },
radius: ['40%', '55%'], radius: ['50%', '70%'], // 调整半径范围
}, },
], ],
}; };
@ -616,11 +650,68 @@ onMounted(() => {
align-items: center; align-items: center;
.title { .title {
color: var(--Text-1, #211f24); color: var(--Text-1, #211f24);
font-family: 'Alibaba PuHuiTi'; font-family: 'PuHuiTi-Medium';
font-size: 16px; font-size: 16px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 24px; /* 150% */ 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> </style>

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

@ -3,27 +3,27 @@
<topHeader ref="topHeaderRef" @search="search"></topHeader> <topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- 用户痛点观察 --> <!-- 用户痛点观察 -->
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0"> <a-space
<a-space align="center"> direction="vertical"
<span>用户痛点观察 </span> style="background-color: #fff; width: 100%; padding: 0 20px"
<a-popover position="tl"> class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-24px"
<a-button type="primary" class="pop-btn"> >
<template #icon> <div class="title-row">
<icon-question-circle /> <span class="title mr-4px">用户痛点观察</span>
</template> <a-tooltip>
</a-button> <template #content
<template #content> >基于用户内容中的情绪分析与表达模式，提取反复出现的负面倾向主题，反映典型使用痛点。</template
<p style="margin: 0">基于用户内容中的情绪分析与表达模式，提取反复出现的负面倾向主题，反映典型使用痛点。</p> >
</template> <icon-question-circle size="16" class="!color-#737478" />
</a-popover> </a-tooltip>
</a-space> </div>
<a-table <a-table
:columns="columns" :columns="columns"
:data="dataList" :data="dataList"
:filter-icon-align-left="alignLeft" :filter-icon-align-left="alignLeft"
@change="handleChange"
:scroll="true" :scroll="true"
:pagination="false" :pagination="false"
@change="handleChange"
> >
<template #rank="{ record }"> <template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" /> <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@ -32,98 +32,84 @@
<span v-else>{{ record.rank }}</span> <span v-else>{{ record.rank }}</span>
</template> </template>
<template #keywords="{ record }"> <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>
<template #frequency="{ record }"> <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>
<template #optional="{ record }"> <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> </template>
</a-table> </a-table>
</a-space> </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> <template #title>
<span style="text-align: left; width: 100%">用户痛点观察</span> <span style="text-align: left; width: 100%">用户痛点观察</span>
</template> </template>
<div> <div>
<a-space direction="vertical" style="font-size: 12px"> <a-space direction="vertical" style="font-size: 12px">
<a-space> <div class="mb-12px flex items-center">
<span style="width: 80px">痛点</span> <p class="cts !mr-16px flex-shrink-0 w-60px">痛点</p>
<span>{{ topicInfo.name }}</span> <span class="cts">{{ topicInfo.name }}</span>
</a-space> </div>
<a-space> <div class="mb-12px flex items-center">
<span style="width: 80px; font-size: 12px">关键词</span> <p class="cts !mr-16px flex-shrink-0 w-60px">关键词</p>
<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
>
<a-tag <a-tag
v-else-if="topicInfo.frequency == 1" v-for="item in topicInfo.keywords"
style="margin-right: 5px; background-color: #fff5de; color: #cc8b00" :key="item"
>中频</a-tag 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 <a-tag
v-else-if="topicInfo.frequency == 2" :class="`!rounded-2px !px-8px !py-1px !bg-${
style="margin-right: 5px; background-color: #ffe7e4; color: #c53c27" frequencyStatus[topicInfo.frequency].bgColor
>高频</a-tag } !h-22px !color-${frequencyStatus[topicInfo.frequency].color}`"
>{{ frequencyStatus[topicInfo.frequency].label }}</a-tag
> >
</a-space> </div>
<a-space> <div class="mb-12px flex items-center">
<span style="width: 80px; font-size: 12px">代表性发言</span> <p class="cts !mr-16px flex-shrink-0 w-60px">代表性发言</p>
<span>{{ topicInfo.content }}</span> <span class="cts">{{ topicInfo.content }}</span>
</a-space> </div>
<a-space direction="top"> <div class="flex items-start">
<span style="width: 80px; font-size: 12px; display: inline-block">原始来源</span> <p class="cts !mr-16px flex-shrink-0 w-60px">原始来源</p>
<a-space direction="vertical"> <div class="flex flex-col">
<a-space v-for="item in topicInfo.user_pain_point_sources" :key="item"> <div v-for="item in topicInfo.user_pain_point_sources" :key="item" class="mb-18px flex items-center">
<a-link <a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
style=" item.title
background-color: initial; }}</a-link>
display: inline-block; <img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
width: 280px; </div>
text-overflow: ellipsis; </div>
" </div>
: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>
</a-space> </a-space>
</div> </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> </a-modal>
</view> </view>
</template> </template>
@ -144,6 +130,23 @@ const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory); const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod); const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
const dataList = ref([]); 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 = [ const columns = [
{ {
title: '排名', title: '排名',
@ -239,7 +242,7 @@ const search = () => {
}; };
</script> </script>
<style scoped> <style scoped lang="scss">
/* 自定义样式 */ /* 自定义样式 */
:deep(.arco-table-th) { :deep(.arco-table-th) {
background-color: var(--color-fill-2); background-color: var(--color-fill-2);
@ -263,4 +266,63 @@ const search = () => {
color: #6d4cfe !important; color: #6d4cfe !important;
border-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> </style>

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

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

2
src/views/components/login/style.scss
View File

@ -24,7 +24,7 @@
transform: translateX(-50%); transform: translateX(-50%);
.text { .text {
font-family: Alibaba PuHuiTi; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;

20
src/views/components/management/account/index.vue
View File

@ -180,7 +180,7 @@ onMounted(() => {
padding-right: 8px; padding-right: 8px;
padding-left: 8px; padding-left: 8px;
background: var(--Brand-Brand-1, rgba(240, 237, 255, 1)); background: var(--Brand-Brand-1, rgba(240, 237, 255, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -191,7 +191,7 @@ onMounted(() => {
padding-right: 8px; padding-right: 8px;
padding-left: 8px; padding-left: 8px;
background: var(--Functional-Warning-1, rgba(255, 245, 222, 1)); background: var(--Functional-Warning-1, rgba(255, 245, 222, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: var(--Functional-Warning-6, rgba(255, 174, 0, 1)); color: var(--Functional-Warning-6, rgba(255, 174, 0, 1));
@ -200,7 +200,7 @@ onMounted(() => {
border-radius: 4px; border-radius: 4px;
padding: 2px 12px; padding: 2px 12px;
border: 1px solid var(--Functional-Danger-6, rgba(246, 75, 49, 1)); border: 1px solid var(--Functional-Danger-6, rgba(246, 75, 49, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -210,7 +210,7 @@ onMounted(() => {
border-radius: 4px; border-radius: 4px;
padding: 5px 16px; padding: 5px 16px;
border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1)); border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: var(--Brand-Brand-6, rgba(109, 76, 254, 1)); color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
@ -220,14 +220,14 @@ onMounted(() => {
margin-bottom: 12px; margin-bottom: 12px;
.add-account-title { .add-account-title {
margin: 0; margin: 0;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: var(--Text-1, rgba(33, 31, 36, 1)); color: var(--Text-1, rgba(33, 31, 36, 1));
} }
.add-account-subtitle { .add-account-subtitle {
margin: 4px 0 0 0; margin: 4px 0 0 0;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1)); color: var(--Text-2, rgba(60, 64, 67, 1));
@ -239,7 +239,7 @@ onMounted(() => {
border-radius: 4px; border-radius: 4px;
padding: 12px 16px; padding: 12px 16px;
background: var(--BG-200, rgba(242, 243, 245, 1)); background: var(--BG-200, rgba(242, 243, 245, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1)); color: var(--Text-2, rgba(60, 64, 67, 1));
@ -250,7 +250,7 @@ onMounted(() => {
} }
.cannot-add-account-title { .cannot-add-account-title {
margin: 0; margin: 0;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: var(--Text-1, rgba(33, 31, 36, 1)); color: var(--Text-1, rgba(33, 31, 36, 1));
@ -263,7 +263,7 @@ onMounted(() => {
.cannot-add-account-subtitle { .cannot-add-account-subtitle {
margin: 16px 0 0 0; margin: 16px 0 0 0;
padding-left: 32px; padding-left: 32px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1)); color: var(--Text-2, rgba(60, 64, 67, 1));
@ -272,7 +272,7 @@ onMounted(() => {
.delete-modal-content { .delete-modal-content {
margin-left: 34px; margin-left: 34px;
margin-top: 16px; margin-top: 16px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: var(--Text-2, rgba(60, 64, 67, 1)); color: var(--Text-2, rgba(60, 64, 67, 1));

12
src/views/components/management/enterprise/index.vue
View File

@ -99,7 +99,7 @@ async function handleOk() {
padding: 10px 16px; padding: 10px 16px;
background: var(--BG-100, rgba(247, 248, 250, 1)); background: var(--BG-100, rgba(247, 248, 250, 1));
border: 1px solid var(--BG-300, rgba(230, 230, 232, 1)); border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
span { span {
@ -112,7 +112,7 @@ async function handleOk() {
align-items: center; align-items: center;
} }
:deep(.arco-form-item-label) { :deep(.arco-form-item-label) {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
@ -120,12 +120,12 @@ async function handleOk() {
:deep(.arco-input-wrapper) { :deep(.arco-input-wrapper) {
background: white; background: white;
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1)); border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
padding: 4px 12px; padding: 4px 12px;
input::placeholder { input::placeholder {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: var(--Text-4, rgba(147, 148, 153, 1)); color: var(--Text-4, rgba(147, 148, 153, 1));
@ -135,7 +135,7 @@ async function handleOk() {
background: var(--BG-200, rgba(242, 243, 245, 1)); background: var(--BG-200, rgba(242, 243, 245, 1));
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1)); border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
.arco-input:disabled { .arco-input:disabled {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
@ -150,7 +150,7 @@ async function handleOk() {
border: 1px solid rgba(109, 76, 254, 1); border: 1px solid rgba(109, 76, 254, 1);
border-radius: 4px; border-radius: 4px;
padding: 2px 12px; padding: 2px 12px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: rgba(109, 76, 254, 1); color: rgba(109, 76, 254, 1);

10
src/views/components/management/person/index.vue
View File

@ -255,7 +255,7 @@ function getFileExtension(filename: string): string {
align-items: center; align-items: center;
} }
:deep(.arco-form-item-label) { :deep(.arco-form-item-label) {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
@ -263,12 +263,12 @@ function getFileExtension(filename: string): string {
:deep(.arco-input-wrapper) { :deep(.arco-input-wrapper) {
background: white; background: white;
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1)); border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
padding: 4px 12px; padding: 4px 12px;
input::placeholder { input::placeholder {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: var(--Text-4, rgba(147, 148, 153, 1)); color: var(--Text-4, rgba(147, 148, 153, 1));
@ -278,7 +278,7 @@ function getFileExtension(filename: string): string {
background: var(--BG-200, rgba(242, 243, 245, 1)); background: var(--BG-200, rgba(242, 243, 245, 1));
border: 1px solid var(--BG-400, rgba(215, 215, 217, 1)); border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
.arco-input:disabled { .arco-input:disabled {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
@ -298,7 +298,7 @@ function getFileExtension(filename: string): string {
border-radius: 4px; border-radius: 4px;
padding: 2px 12px; padding: 2px 12px;
border: 1px solid var(--BG-500, rgba(177, 178, 181, 1)); border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
vertical-align: middle; vertical-align: middle;

8
src/views/components/workplace/modules/case.vue
View File

@ -139,7 +139,7 @@ interface SuccessCase {
max-width: 100%; max-width: 100%;
} }
.title { .title {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
@ -151,7 +151,7 @@ interface SuccessCase {
margin: 0; margin: 0;
padding: 0; padding: 0;
.keyword { .keyword {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -169,7 +169,7 @@ interface SuccessCase {
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
.unit { .unit {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 24px; line-height: 24px;
@ -178,7 +178,7 @@ interface SuccessCase {
} }
} }
.label { .label {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
line-height: 100%; line-height: 100%;

14
src/views/components/workplace/modules/product.vue
View File

@ -131,7 +131,7 @@ const gotoModule = (menuId: number) => {
border-radius: 4px; border-radius: 4px;
padding-right: 8px; padding-right: 8px;
padding-left: 8px; padding-left: 8px;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -165,7 +165,7 @@ const gotoModule = (menuId: number) => {
background: rgba(255, 245, 222, 1); background: rgba(255, 245, 222, 1);
:deep(.arco-statistic-title) { :deep(.arco-statistic-title) {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: var(--Functional-Warning-7, rgba(204, 139, 0, 1)); color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@ -175,7 +175,7 @@ const gotoModule = (menuId: number) => {
} }
:deep(.arco-statistic-value) { :deep(.arco-statistic-value) {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
color: var(--Functional-Warning-7, rgba(204, 139, 0, 1)); color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@ -190,7 +190,7 @@ const gotoModule = (menuId: number) => {
margin-top: 12px; margin-top: 12px;
.title { .title {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
@ -199,7 +199,7 @@ const gotoModule = (menuId: number) => {
} }
.desc { .desc {
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -216,7 +216,7 @@ const gotoModule = (menuId: number) => {
gap: 8px; gap: 8px;
padding: 2px 12px; padding: 2px 12px;
background-color: rgba(109, 76, 254, 1) !important; background-color: rgba(109, 76, 254, 1) !important;
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
@ -232,7 +232,7 @@ const gotoModule = (menuId: number) => {
gap: 8px; gap: 8px;
padding: 2px 12px; padding: 2px 12px;
border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1)); border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
font-family: Alibaba PuHuiTi, serif; font-family: 'PuHuiTi-Medium';
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;