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

feat: space组件处理

Browse Source
This commit is contained in:
rd
2025-09-04 16:50:20 +08:00
parent 15357b6bc8
commit aaa8a320c8
28 changed files with 417 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<a-space direction="vertical" class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
<div class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
<div class="title-row">
<span class="title mr-4px">行业词云</span>
<Tooltip>
@ -39,16 +39,14 @@
@mouseenter="hoverTag = tag"
@mouseleave="hoverTag = null"
>
<a-space>
<Tooltip :title="`性价比:${Number(tag.rate * 100)}%`" placement="topLeft">
<a-space>{{ tag.term }}</a-space>
<span>{{ tag.term }}</span>
</Tooltip>
</a-space>
</a-tag>
</div>
</template>
</div>
</a-space>
</div>
</view>
</template>

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

@ -2,7 +2,7 @@
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- tabel -->
<a-space direction="vertical" class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
<div class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px">
<div class="title-row">
<span class="title mr-4px">行业热门话题洞察</span>
<Tooltip>
@ -22,24 +22,24 @@
<NoData />
</template>
<template #hotTitle>
<a-space>
<span>热度指数</span>
<div class="flex items-center">
<span class="mr-8px">热度指数</span>
<Tooltip>
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="!color-#737478" />
</Tooltip>
</a-space>
</div>
</template>
<template #sentimentTitle>
<a-space>
<span>情感倾向</span>
<div class="flex items-center">
<span class="mr-8px">情感倾向</span>
<Tooltip>
<template #title
>统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
>
<icon-question-circle size="14" class="!color-#737478" />
</Tooltip>
</a-space>
</div>
</template>
<template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@ -74,7 +74,7 @@
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template>
</a-table>
</a-space>
</div>
<Modal
v-model:open="visible"
unmountOnClose
@ -87,7 +87,7 @@
<span style="text-align: left; width: 100%">行业热门话题洞察</span>
</template>
<div>
<a-space direction="vertical">
<Space direction="vertical">
<div class="mb-4px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-48px">话题名称</p>
<span class="cts">{{ topicInfo.name }}</span>
@ -134,7 +134,7 @@
</div>
</div>
</div>
</a-space>
</Space>
</div>
<template #footer>
<Button size="large" @click="handleCancel">取消</Button>
@ -146,8 +146,7 @@
<script setup>
import topHeader from './topHeader.vue';
import { Tooltip } from 'ant-design-vue';
import { Modal, Button } from 'ant-design-vue';
import { Modal, Button, Tooltip,Space } from 'ant-design-vue';
import { ref, computed } from 'vue';
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
import star1 from '@/assets/img/hottranslation/star-fill1.png';

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

@ -3,7 +3,7 @@
<view>
<topHeader ref="topHeaderRef" @click="search"></topHeader>
<!-- 重点品牌列表 -->
<a-space
<Space
direction="vertical"
class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px"
>
@ -28,31 +28,31 @@
<NoData />
</template>
<template #hotTitle>
<a-space>
<Space>
<span>热度指数</span>
<Tooltip>
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="!color-#737478" />
</Tooltip>
</a-space>
</Space>
</template>
<template #trendTitle>
<a-space>
<Space>
<span>变化幅度</span>
<Tooltip>
<template #title>仅基于品牌出现频次。</template>
<icon-question-circle size="14" class="!color-#737478" />
</Tooltip>
</a-space>
</Space>
</template>
<template #volume_rateTitle>
<a-space>
<Space>
<span>占总声量比例</span>
<Tooltip>
<template #title>该品牌在当前周期内被提及的内容量，占整个行业内容总量的比例。</template>
<icon-question-circle size="14" class="!color-#737478" />
</Tooltip>
</a-space>
</Space>
</template>
<template #rank="{ record }">
<img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@ -72,9 +72,9 @@
</template>
<template #volumeRate="{ record }"> <a-statistic :value="record.volume_rate * 100" />% </template>
</a-table>
</a-space>
</Space>
<!-- 舆情 & 敏感动态-->
<a-space
<Space
direction="vertical"
class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px"
>
@ -93,13 +93,13 @@
<NoData />
</template>
</a-table>
</a-space>
</Space>
</view>
</template>
<script setup>
import topHeader from './topHeader.vue';
import { Tooltip } from 'ant-design-vue';
import { Tooltip, Space } from 'ant-design-vue';
import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue';
import star1 from '@/assets/img/hottranslation/star-fill1.png';

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

@ -3,7 +3,7 @@
<view>
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- 关键词热度榜 -->
<a-space
<Space
direction="vertical"
class="bg-#fff rounded-8px w-100% py-0 px-20px mb-20px"
>
@ -27,22 +27,22 @@
<NoData />
</template>
<template #heatLevel>
<a-space>
<Space>
<span>热度指数</span>
<Tooltip>
<template #title>综合话题出现频次、互动数据（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="14" class="!color-#737478" />
</Tooltip>
</a-space>
</Space>
</template>
<template #trendTitle>
<a-space>
<Space>
<span>变化幅度</span>
<Tooltip>
<template #title>仅基于关键词出现频次。</template>
<icon-question-circle size="14" class="!color-#737478" />
</Tooltip>
</a-space>
</Space>
</template>
<template #rank="{ record }">
@ -70,9 +70,9 @@
</div>
</template>
</a-table>
</a-space>
</Space>
<!-- 行业情绪 -->
<a-space
<Space
direction="vertical"
class="bg-#fff rounded-8px w-100% py-0 px-20px mb-24px"
>
@ -124,9 +124,9 @@
</template>
</a-table>
</div>
</a-space>
</Space>
<!-- 新兴关键词 -->
<a-space
<Space
direction="vertical"
class="bg-#fff rounded-8px w-100% py-0 px-20px"
>
@ -182,22 +182,22 @@
</template>
<template #hotTitle>
<a-space>
<Space>
<span>当前热度指数</span>
<Tooltip>
<template #title>综合关键词出现频次、互动表现（如点赞、收藏、评论）加权计算的热度得分。</template>
<icon-question-circle size="16" class="!color-#737478" />
</Tooltip>
</a-space>
</Space>
</template>
<template #trendTitle>
<a-space>
<Space>
<span>变化幅度</span>
<Tooltip>
<template #title>仅基于关键词出现频次。</template>
<icon-question-circle size="16" class="!color-#737478" />
</Tooltip>
</a-space>
</Space>
</template>
<template #tred="{ record }">
<div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
@ -210,7 +210,7 @@
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template>
</a-table>
</a-space>
</Space>
<!-- modal -->
<Modal
v-model:open="visible"
@ -225,7 +225,7 @@
<span style="text-align: left; width: 100%">新兴关键词</span>
</template>
<div>
<a-space direction="vertical">
<Space direction="vertical">
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-83px">话题名称</p>
<span class="cts">{{ topicInfo.name }}</span>
@ -258,7 +258,7 @@
</div>
</div>
</div>
</a-space>
</Space>
</div>
<template #footer>
<Button size="large" @click="handleCancel">取消</Button>
@ -270,7 +270,7 @@
<script setup>
import topHeader from './topHeader.vue';
import { Checkbox, Modal, Button, Tooltip } from 'ant-design-vue';
import { Checkbox, Modal, Button, Tooltip, Space } from 'ant-design-vue';
import {
fetchKeywordTrendsList,
fetchIndustryEmotions,

24
src/views/components/dataEngine/topHeader.vue
View File

@ -1,12 +1,12 @@
<template>
<view>
<!-- 头部 -->
<a-space
<Space
direction="vertical"
class="bg-#fff rounded-8px mb-20px"
style="background-color: #fff; width: 100%; padding: 24px; color: #737478; font-size: 14px"
>
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<Space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">行业大类</span>
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag
@ -25,9 +25,9 @@
>{{ item.name }}</a-tag
>
</div>
</a-space>
</Space>
<!-- 二级类目 -->
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<Space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">二级类目</span>
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag
@ -46,9 +46,9 @@
>{{ item.name }}</a-tag
>
</div>
</a-space>
<!-- </a-space> -->
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
</Space>
<!-- </Space> -->
<Space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">时间筛选</span>
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
<a-tag
@ -67,9 +67,9 @@
>{{ item.label }}
</a-tag>
</div>
</a-space>
</Space>
<!-- 搜索区域 -->
<a-space style="margin-left: 'auto'">
<Space style="margin-left: 'auto'">
<Button type="primary" @click="handleSearch">
<template #icon>
<icon-search class="mr-8px"/>
@ -83,15 +83,15 @@
</template>
<template #default>重置</template>
</Button>
</a-space>
</a-space>
</Space>
</Space>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { fetchIndustriesTree } from '@/api/all/index';
import { Button } from 'ant-design-vue';
import { Button, Space } from 'ant-design-vue';
const emit = defineEmits<(e: 'search') => void>();
// 行业大类
const industriesTree = ref([]);

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

@ -3,7 +3,7 @@
<topHeader ref="topHeaderRef" @search="search"></topHeader>
<!-- 用户痛点观察 -->
<a-space
<Space
direction="vertical"
style="background-color: #fff; width: 100%; padding: 0 20px"
class="bg-#fff rounded-8px mb-24px"
@ -55,7 +55,7 @@
<Button type="primary" ghost @click="gotoDetail(record)">详情</Button>
</template>
</a-table>
</a-space>
</Space>
<Modal
v-model:open="visible"
@ -70,7 +70,7 @@
<span style="text-align: left; width: 100%">用户痛点观察</span>
</template>
<div>
<a-space direction="vertical" style="font-size: 12px">
<Space direction="vertical" style="font-size: 12px">
<div class="mb-12px flex items-center">
<p class="cts !mr-16px flex-shrink-0 w-60px">痛点</p>
<span class="cts">{{ topicInfo.name }}</span>
@ -108,7 +108,7 @@
</div>
</div>
</div>
</a-space>
</Space>
</div>
<template #footer>
<Button size="large" @click="handleCancel">取消</Button>
@ -120,7 +120,7 @@
<script setup>
import topHeader from './topHeader.vue';
import { Modal, Button, Tooltip } from 'ant-design-vue';
import { Modal, Button, Tooltip, Space } from 'ant-design-vue';
import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
import { ref, onMounted, computed } from 'vue';
import top1 from '@/assets/img/captcha/top1.svg';

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

@ -11,33 +11,33 @@
<icon-question-circle size="16" class="!color-#737478" />
</Tooltip>
</div>
<a-space v-if="genderData.length > 0">
<Space v-if="genderData.length > 0">
<div id="container" class="w-300px h-300px"></div>
<a-space direction="vertical" style="font-size: 14px">
<a-space>
<Space direction="vertical" style="font-size: 14px">
<Space>
<span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
<span>女性</span>
<span>{{ (girlData.rate * 100).toFixed(2) }}%</span>
<span>TGI</span>
<span>{{ girlData.tgi }}</span>
</a-space>
<a-space>
</Space>
<Space>
<span style="width: 8px; height: 8px; background-color: #2a59f3; border-radius: 50%"></span>
<span>男性</span>
<span>{{ (boyData.rate * 100).toFixed(2) }}%</span>
<span>TGI</span>
<span>{{ boyData.tgi }}</span>
</a-space>
</a-space>
</a-space>
</Space>
</Space>
</Space>
<div v-else>
<NoData class="w-100% h-100%" />
</div>
</div>
<!-- 2. 年龄分布 -->
<div class="bg-#fff rounded-8px 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">
<Space style="display: flex; justify-content: space-between; width: 100%; font-size: 12px">
<div class="title-row">
<span class="title mr-4px">年龄分布</span>
<Tooltip>
@ -45,13 +45,13 @@
<icon-question-circle size="16" class="!color-#737478" />
</Tooltip>
</div>
<a-space v-if="ageValueData.length > 0" align="center">
<Space v-if="ageValueData.length > 0" align="center">
<span style="width: 16px; height: 8px; background-color: #6d4cfe; border-radius: 2px"></span>
<span style="color: #6d4cfe">占比</span>
<span style="width: 16px; height: 8px; background-color: #f64b31; border-radius: 2px"></span>
<span style="color: #f64b31">TGI比</span>
</a-space>
</a-space>
</Space>
</Space>
<div v-if="ageValueData.length === 0" class="w-100% flex-1">
<NoData />
</div>
@ -67,11 +67,11 @@
</Tooltip>
</div>
<div class="flex">
<a-space direction="vertical">
<Space direction="vertical">
<div id="chinaMap" style="height: 416px; width: 640px"></div>
<a-space direction="vertical" style="font-size: 14px">
<Space direction="vertical" style="font-size: 14px">
<span class="cts">搜索指数</span>
<a-space>
<Space>
<span class="cts">高</span>
<span
v-for="item in 5"
@ -86,9 +86,9 @@
}"
></span>
<span class="cts">低</span>
</a-space>
</a-space>
</a-space>
</Space>
</Space>
</Space>
<div class="flex flex-col h-486px">
<Tabs defaultActiveKey="1" class="h-100%" @change="tabChange" size="large">
<TabPane key="1" tab="省份">
@ -138,7 +138,7 @@ import * as echarts from 'echarts';
import chinaJson from '@/assets/maps/china.json';
echarts.registerMap('china', chinaJson);
import { Tabs, Tooltip } from 'ant-design-vue';
import { Tabs, Tooltip, Space } from 'ant-design-vue';
const { TabPane } = Tabs;
const scope = ref(1); // 地域范围，1-省，2-市

10
src/views/components/login/index.vue
View File

@ -9,7 +9,7 @@
<img src="@/assets/img/Frame.svg" class="w-480 h-480 mr-40" alt="" />
</div>
<div class="flex items-center w-400 h-100%">
<a-space
<Space
direction="vertical"
size="large"
align="center"
@ -62,14 +62,14 @@
</Button>
</FormItem>
</Form>
<a-space class="text-12px color-#737478 justify-start items-center">
<Space class="text-12px color-#737478 justify-start items-center">
<Checkbox v-model:checked="hasCheck" class="!text-12px mr-8px"></Checkbox>
<span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
<a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
<span class="text-12px color-#737478">和</span>
<a-link href="link" class="form-link color-#211f24" target="_blank">隐私政策</a-link>
</a-space>
</a-space>
</Space>
</Space>
</div>
</section>
@ -125,7 +125,7 @@
</template>
<script setup lang="ts">
import { Checkbox, Modal, Button, Form, FormItem, Input } from 'ant-design-vue';
import { Checkbox, Modal, Button, Form, FormItem, Input, Space } from 'ant-design-vue';
import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
import { joinEnterpriseByInviteCode } from '@/api/all';