Merge remote-tracking branch 'origin/master' into feature/v1.3_营销资产中台
# Conflicts: # src/main.ts # src/styles/components/index.scss # src/styles/components/table.scss # src/styles/index.ts # src/views/components/dataEngine/keyWord.vue
This commit is contained in:
rd
@ -1,14 +1,10 @@
|
|||||||
<!--
|
|
||||||
* @Author: RenXiaoDong
|
|
||||||
* @Date: 2025-06-19 01:45:53
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh">
|
<html lang="zh">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>灵机AI营销平台1</title>
|
<title>灵机AI营销平台</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
BIN
src/assets/fonts/Alibaba-PuHuiTi-Bold.otf
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Bold.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Alibaba-PuHuiTi-Medium.otf
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Medium.otf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Alibaba-PuHuiTi-Regular.otf
Normal file
BIN
src/assets/fonts/Alibaba-PuHuiTi-Regular.otf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1009 B |
Binary file not shown.
|
Before Width: | Height: | Size: 865 B After Width: | Height: | Size: 736 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.0 KiB |
BIN
src/components/_base/exit-account-modal/img/icon1.png
Normal file
BIN
src/components/_base/exit-account-modal/img/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 B |
98
src/components/_base/exit-account-modal/index.vue
Normal file
98
src/components/_base/exit-account-modal/index.vue
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: RenXiaoDong
|
||||||
|
* @Date: 2025-06-26 17:23:52
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="visible"
|
||||||
|
width="400px"
|
||||||
|
modal-class="exit-account-modal"
|
||||||
|
show-close="false"
|
||||||
|
:footer="false"
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
|
<div class="flex items-center mb-16px">
|
||||||
|
<img :src="icon1" width="20" height="20" class="mr-12px" />
|
||||||
|
<span class="s1">确认退出登录吗？</span>
|
||||||
|
</div>
|
||||||
|
<p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
|
||||||
|
<div class="flex items-center justify-end">
|
||||||
|
<a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
|
||||||
|
<a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
|
||||||
|
>退出登录</a-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { fetchLogOut } from '@/api/all/login';
|
||||||
|
import { handleUserLogout } from '@/utils/user';
|
||||||
|
|
||||||
|
import icon1 from './img/icon1.png';
|
||||||
|
|
||||||
|
const visible = ref(false);
|
||||||
|
|
||||||
|
function onClose() {
|
||||||
|
visible.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const open = (record) => {
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
async function onLogout() {
|
||||||
|
const { code } = await fetchLogOut();
|
||||||
|
if (code === 200) {
|
||||||
|
handleUserLogout();
|
||||||
|
AMessage.success('退出登录成功');
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ open });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.exit-account-modal {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--BG-300, #e6e6e8) !important;
|
||||||
|
background-color: var(--BG-white, #fff) !important;
|
||||||
|
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
.arco-modal-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.arco-modal-body {
|
||||||
|
padding: 24px;
|
||||||
|
.s1 {
|
||||||
|
color: var(--Text-1, #211f24);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px; /* 157.143% */
|
||||||
|
}
|
||||||
|
.s2 {
|
||||||
|
color: var(--Text-2, #3c4043);
|
||||||
|
font-family: 'PuHuiTi-Regular';
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 20px; /* 166.667% */
|
||||||
|
}
|
||||||
|
.cancel-btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--BG-500, #b1b2b5);
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid var(--BG-500, #b1b2b5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.danger-btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--Functional-Danger-6, #f64b31) !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -121,7 +121,7 @@ export default defineComponent({
|
|||||||
auto-open={false}
|
auto-open={false}
|
||||||
selected-keys={selectedKey.value}
|
selected-keys={selectedKey.value}
|
||||||
auto-open-selected={true}
|
auto-open-selected={true}
|
||||||
level-indent={34}
|
level-indent={24}
|
||||||
style="height: 100%;width:100%;"
|
style="height: 100%;width:100%;"
|
||||||
onCollapse={setCollapse}
|
onCollapse={setCollapse}
|
||||||
>
|
>
|
||||||
@ -132,16 +132,59 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.arco-menu-inner) {
|
:deep(.arco-menu-inner) {
|
||||||
|
padding: 20px 24px 0 12px !important;
|
||||||
.arco-menu-inline-header {
|
.arco-menu-inline-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 40px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
.arco-menu-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.arco-menu-title {
|
||||||
|
color: var(--Text-2, #3c4043);
|
||||||
|
font-family: 'PuHuiTi-Regular';
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px; /* 137.5% */
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: var(--BG-200, #f2f3f5) !important;
|
||||||
|
}
|
||||||
|
&.arco-menu-selected {
|
||||||
|
.arco-menu-title {
|
||||||
|
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.arco-icon {
|
.arco-icon {
|
||||||
&:not(.arco-icon-down) {
|
&:not(.arco-icon-down) {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.arco-menu-item {
|
||||||
|
border-radius: 8px;
|
||||||
|
.arco-menu-item-inner {
|
||||||
|
color: var(--Text-3, #737478);
|
||||||
|
font-family: 'PuHuiTi-Regular';
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px; /* 137.5% */
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: var(--BG-200, #f2f3f5) !important;
|
||||||
|
}
|
||||||
|
&.arco-menu-selected {
|
||||||
|
background: var(--Brand-Brand-1, #f0edff) !important;
|
||||||
|
.arco-menu-item-inner {
|
||||||
|
color: var(--Brand-Brand-6, #6d4cfe) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
|
|||||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||||
import router from '@/router';
|
import router from '@/router';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
|
||||||
|
|
||||||
interface MenuItem {
|
interface MenuItem {
|
||||||
name: string;
|
name: string;
|
||||||
@ -20,7 +21,7 @@ interface MenuItem {
|
|||||||
const lists = ref<MenuItem[]>([]);
|
const lists = ref<MenuItem[]>([]);
|
||||||
const sidebarStore = useSidebarStore();
|
const sidebarStore = useSidebarStore();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const exitAccountModalRef = ref(null);
|
||||||
const selectedKey = computed(() => {
|
const selectedKey = computed(() => {
|
||||||
// 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
|
// 判断是否为工作台页面（假设路由名为 'Home' 或 path 为 '/'）
|
||||||
if (route.name === 'Home' || route.path === '/') {
|
if (route.name === 'Home' || route.path === '/') {
|
||||||
@ -31,10 +32,7 @@ const selectedKey = computed(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const clickExit = async () => {
|
const clickExit = async () => {
|
||||||
const { code } = await fetchLogOut();
|
exitAccountModalRef.value?.open();
|
||||||
if (code === 200) {
|
|
||||||
handleUserLogout();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
const getMenus = async () => {
|
const getMenus = async () => {
|
||||||
const res = await fetchMenusTree();
|
const res = await fetchMenusTree();
|
||||||
@ -80,27 +78,30 @@ const handleDopdownClick = (index: any, ind: any) => {
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="left-side">
|
<div class="left-side">
|
||||||
<a-space>
|
<a-space class="cursor-pointer" @click="router.push('/')">
|
||||||
<img src="@/assets/logo.svg" alt="" />
|
<img src="@/assets/logo.svg" alt="" />
|
||||||
</a-space>
|
</a-space>
|
||||||
</div>
|
</div>
|
||||||
<div class="center-side">
|
<div class="center-side">
|
||||||
<div class="menu-demo">
|
<div class="menu-demo h-100%">
|
||||||
<a-menu
|
<a-menu
|
||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
:selected-keys="selectedKey"
|
:selected-keys="selectedKey"
|
||||||
:default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
|
:default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
|
||||||
>
|
>
|
||||||
<a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
|
<a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
|
||||||
<view>工作台</view>
|
<span class="menu-item-text">工作台</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
<a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
|
<a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
|
||||||
<a-dropdown :popup-max-height="false">
|
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
|
||||||
<a-button>{{ item.name }}<icon-caret-down /></a-button>
|
<a-button>
|
||||||
|
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
|
||||||
|
<icon-caret-down size="16" class="arco-icon-down !mr-0" />
|
||||||
|
</a-button>
|
||||||
<template #content>
|
<template #content>
|
||||||
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">{{
|
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
|
||||||
child.name
|
<span class="menu-item-text"> {{ child.name }}</span>
|
||||||
}}</a-doption>
|
</a-doption>
|
||||||
</template>
|
</template>
|
||||||
</a-dropdown>
|
</a-dropdown>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
@ -109,31 +110,37 @@ const handleDopdownClick = (index: any, ind: any) => {
|
|||||||
</div>
|
</div>
|
||||||
<ul class="right-side">
|
<ul class="right-side">
|
||||||
<li>
|
<li>
|
||||||
<a-dropdown trigger="click">
|
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||||||
<a-avatar class="cursor-pointer" :size="32">
|
<a-avatar class="cursor-pointer" :size="32">
|
||||||
<img alt="avatar" src="@/assets/avatar.svg" />
|
<img alt="avatar" src="@/assets/avatar.svg" />
|
||||||
</a-avatar>
|
</a-avatar>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div style="padding: 14px">
|
<div>
|
||||||
<a-doption>
|
<a-doption>
|
||||||
<a-space @click="setServerMenu">
|
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||||
<img src="@/assets/option.svg" style="width: 16px; height: 16px" />
|
<div class="flex items-center">
|
||||||
<span style="width: 140px; font-size: 12px">管理中心</span>
|
<img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
|
||||||
<icon-right />
|
<span>管理中心</span>
|
||||||
|
</div>
|
||||||
|
<icon-right size="12" />
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-doption>
|
</a-doption>
|
||||||
<a-doption>
|
<!-- <a-doption>
|
||||||
<a-space>
|
<a-space class="flex justify-between w-100%">
|
||||||
<img src="@/assets/change.svg" style="width: 16px; height: 16px" />
|
<div class="flex items-center">
|
||||||
<span style="width: 140px; font-size: 12px">切换企业账号</span>
|
<img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
|
||||||
<icon-right />
|
<span>切换企业账号</span>
|
||||||
|
</div>
|
||||||
|
<icon-right size="12" />
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-doption>
|
</a-doption> -->
|
||||||
<a-doption>
|
<a-doption>
|
||||||
<a-space @click="clickExit">
|
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||||
<img src="@/assets/exit.svg" style="width: 16px; height: 16px" />
|
<div class="flex items-center">
|
||||||
<span style="width: 140px; font-size: 12px">退出登录</span>
|
<img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
|
||||||
<icon-right />
|
<span>退出登录</span>
|
||||||
|
</div>
|
||||||
|
<icon-right size="12" />
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-doption>
|
</a-doption>
|
||||||
</div>
|
</div>
|
||||||
@ -141,10 +148,11 @@ const handleDopdownClick = (index: any, ind: any) => {
|
|||||||
</a-dropdown>
|
</a-dropdown>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<ExitAccountModal ref="exitAccountModalRef" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="scss">
|
||||||
.navbar {
|
.navbar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -163,6 +171,46 @@ const handleDopdownClick = (index: any, ind: any) => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
margin-left: 40px;
|
margin-left: 40px;
|
||||||
|
.menu-item-text {
|
||||||
|
color: var(--Text-2, #3c4043);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
:deep(.arco-menu) {
|
||||||
|
height: 100%;
|
||||||
|
.arco-menu-inner {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.arco-menu-item {
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
&.arco-menu-selected {
|
||||||
|
.menu-item-text,
|
||||||
|
.arco-menu-selected-label {
|
||||||
|
color: #6d4cfe;
|
||||||
|
}
|
||||||
|
.arco-menu-selected-label {
|
||||||
|
background: var(--Brand-Brand-6, #6d4cfe);
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.arco-icon-down {
|
||||||
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.arco-dropdown-open .arco-icon-down {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.cneter-tip {
|
.cneter-tip {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@ -192,3 +240,53 @@ const handleDopdownClick = (index: any, ind: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.layout-menu-item-dropdown,
|
||||||
|
.layout-avatar-dropdown {
|
||||||
|
.arco-dropdown {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--BG-300, #e6e6e8);
|
||||||
|
background: var(--BG-white, #fff);
|
||||||
|
padding: 12px 0px;
|
||||||
|
.arco-dropdown-option {
|
||||||
|
padding: 0 12px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
&-content {
|
||||||
|
display: flex;
|
||||||
|
height: 40px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 24px;
|
||||||
|
align-items: center;
|
||||||
|
.menu-item-text {
|
||||||
|
color: var(--Text-2, #3c4043);
|
||||||
|
font-family: 'PuHuiTi-Regular';
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px; /* 137.5% */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(.arco-dropdown-option-disabled):hover {
|
||||||
|
background-color: transparent;
|
||||||
|
.arco-dropdown-option-content {
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--BG-200, #f2f3f5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.layout-avatar-dropdown {
|
||||||
|
width: 200px;
|
||||||
|
.arco-dropdown {
|
||||||
|
padding: 12px 4px;
|
||||||
|
.arco-dropdown-option {
|
||||||
|
padding: 0 !important;
|
||||||
|
&-content {
|
||||||
|
padding: 0 12px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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));
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
BIN
src/components/no-data/img/icon-empty.png
Normal file
BIN
src/components/no-data/img/icon-empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
49
src/components/no-data/index.vue
Normal file
49
src/components/no-data/index.vue
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: RenXiaoDong
|
||||||
|
* @Date: 2025-07-01 16:09:21
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="no-data">
|
||||||
|
<slot name="pic">
|
||||||
|
<img :src="emptyIcon" class="img" alt="" width="106" height="72" />
|
||||||
|
</slot>
|
||||||
|
<slot>
|
||||||
|
<div v-if="text" class="text mt-36px">{{ text }}</div>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import icon from './img/icon-empty.png';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: '暂无数据',
|
||||||
|
},
|
||||||
|
emptyIcon: {
|
||||||
|
type: String,
|
||||||
|
default: icon,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.no-data {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 10%;
|
||||||
|
padding-bottom: 10%;
|
||||||
|
line-height: 1.5em;
|
||||||
|
.text {
|
||||||
|
color: var(--Text-3, #737478);
|
||||||
|
font-family: 'PuHuiTi-Regular';
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
0
src/components/no-data/style.scss
Normal file
0
src/components/no-data/style.scss
Normal file
@ -11,8 +11,10 @@ const appStore = useAppStore();
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
|
console.log({ appStore });
|
||||||
|
|
||||||
useResponsive(true);
|
useResponsive(true);
|
||||||
const navbarHeight = `60px`;
|
const navbarHeight = `72px`;
|
||||||
const navbar = computed(() => appStore.navbar);
|
const navbar = computed(() => appStore.navbar);
|
||||||
const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
|
const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
|
||||||
const hideMenu = computed(() => appStore.hideMenu);
|
const hideMenu = computed(() => appStore.hideMenu);
|
||||||
@ -23,14 +25,17 @@ const menuWidth = computed(() => {
|
|||||||
const collapsed = computed(() => {
|
const collapsed = computed(() => {
|
||||||
return appStore.menuCollapse;
|
return appStore.menuCollapse;
|
||||||
});
|
});
|
||||||
const paddingStyle = computed(() => {
|
|
||||||
const paddingLeft = renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
|
|
||||||
const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
|
|
||||||
return { ...paddingLeft, ...paddingTop };
|
|
||||||
});
|
|
||||||
const showSidebar = computed(() => {
|
const showSidebar = computed(() => {
|
||||||
return !(route.meta && route.meta.hideSidebar);
|
return !(route.meta && route.meta.hideSidebar);
|
||||||
});
|
});
|
||||||
|
const paddingStyle = computed(() => {
|
||||||
|
const paddingLeft =
|
||||||
|
showSidebar.value && renderMenu.value && !hideMenu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
|
||||||
|
const paddingTop = navbar.value ? { paddingTop: navbarHeight } : {};
|
||||||
|
return { ...paddingLeft, ...paddingTop };
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('showSidebar', showSidebar);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
checkHasInviteCode();
|
checkHasInviteCode();
|
||||||
@ -69,7 +74,7 @@ provide('toggleDrawerMenu', () => {
|
|||||||
breakpoint="xl"
|
breakpoint="xl"
|
||||||
:collapsed="collapsed"
|
:collapsed="collapsed"
|
||||||
:width="menuWidth"
|
:width="menuWidth"
|
||||||
:style="{ paddingTop: navbar ? '60px' : '' }"
|
:style="{ paddingTop: navbar ? '72px' : '' }"
|
||||||
collapsible
|
collapsible
|
||||||
hide-trigger
|
hide-trigger
|
||||||
@collapse="setCollapsed"
|
@collapse="setCollapsed"
|
||||||
@ -102,7 +107,7 @@ provide('toggleDrawerMenu', () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
@nav-size-height: 60px;
|
@nav-size-height: 72px;
|
||||||
@layout-max-width: 1100px;
|
@layout-max-width: 1100px;
|
||||||
|
|
||||||
.layout {
|
.layout {
|
||||||
|
|||||||
@ -5,6 +5,7 @@
|
|||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
import store from './stores';
|
import store from './stores';
|
||||||
|
import NoData from '@/components/no-data';
|
||||||
import '@/api/index';
|
import '@/api/index';
|
||||||
|
|
||||||
import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
|
import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
|
||||||
@ -17,4 +18,5 @@ import './mock';
|
|||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
app.use(store);
|
app.use(store);
|
||||||
app.use(router);
|
app.use(router);
|
||||||
|
app.component('NoData', NoData);
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|||||||
@ -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
24
src/styles/font.scss
Normal 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,8 +1,9 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: RenXiaoDong
|
* @Author: RenXiaoDong
|
||||||
* @Date: 2025-06-27 14:03:21
|
* @Date: 2025-06-30 16:03:42
|
||||||
*/
|
*/
|
||||||
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';
|
||||||
|
|||||||
@ -1,22 +1,22 @@
|
|||||||
<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: 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>基于行业内内容提取的高频词汇。</template>
|
||||||
</a-button>
|
<icon-question-circle size="16" class="!color-#737478" />
|
||||||
<template #content>
|
</a-tooltip>
|
||||||
<p style="margin: 0">基于行业内内容提取的高频词汇。</p>
|
</div>
|
||||||
</template>
|
|
||||||
</a-popover>
|
<div class="multi-row-tag-cloud h-472px">
|
||||||
</a-space>
|
<NoData v-if="tagRows.length === 0" text="暂无数据" />
|
||||||
<div class="multi-row-tag-cloud">
|
|
||||||
<!-- 动态生成多行标签 -->
|
<!-- 动态生成多行标签 -->
|
||||||
|
<template v-else>
|
||||||
<div
|
<div
|
||||||
v-for="(row, rowIndex) in tagRows"
|
v-for="(row, rowIndex) in tagRows"
|
||||||
:key="rowIndex"
|
:key="rowIndex"
|
||||||
@ -49,6 +49,7 @@
|
|||||||
</a-space>
|
</a-space>
|
||||||
</a-tag>
|
</a-tag>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</a-space>
|
</a-space>
|
||||||
</view>
|
</view>
|
||||||
@ -98,7 +99,7 @@ const getIndustryTerms = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 标签数据（按行分组）
|
// 标签数据（按行分组）
|
||||||
const tagRows = ref();
|
const tagRows = ref([]);
|
||||||
const hoverTag = ref(null);
|
const hoverTag = ref(null);
|
||||||
|
|
||||||
const lineHeightStart = [28, 52, 58, 72, 58, 52, 28]; // 7行时
|
const lineHeightStart = [28, 52, 58, 72, 58, 52, 28]; // 7行时
|
||||||
@ -211,4 +212,18 @@ a-tag:hover {
|
|||||||
color: #737478 !important;
|
color: #737478 !important;
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
}
|
}
|
||||||
|
.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>
|
||||||
|
|||||||
@ -2,58 +2,46 @@
|
|||||||
<view>
|
<view>
|
||||||
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
<topHeader ref="topHeaderRef" @search="search"></topHeader>
|
||||||
<!-- tabel -->
|
<!-- tabel -->
|
||||||
<a-space direction="vertical" style="background-color: #fff; width: 100%; padding: 24px; margin-bottom: 24px">
|
<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>基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</template>
|
||||||
</a-button>
|
<icon-question-circle size="16" class="!color-#737478" />
|
||||||
<template #content>
|
</a-tooltip>
|
||||||
<p style="margin: 0">基于社交内容平台的行业数据，分析用户关注的热门话题与趋势。</p>
|
</div>
|
||||||
</template>
|
|
||||||
</a-popover>
|
|
||||||
</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 #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<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 #sentimentTitle>
|
<template #sentimentTitle>
|
||||||
<a-space>
|
<a-space>
|
||||||
<span>情感倾向</span>
|
<span>情感倾向</span>
|
||||||
<a-popover position="tr">
|
<a-tooltip>
|
||||||
<a-button type="primary" class="pop-btn2">
|
<template #content
|
||||||
<template #icon>
|
>统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。</template
|
||||||
<icon-question-circle />
|
>
|
||||||
</template>
|
<icon-question-circle size="14" class="!color-#737478" />
|
||||||
</a-button>
|
</a-tooltip>
|
||||||
<template #content>
|
|
||||||
<p style="margin: 0">
|
|
||||||
统计该行业下全部内容的情绪分布，选取占比最高的情绪类型作为该话题的整体情感倾向。
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
</a-popover>
|
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
<template #rank="{ record }">
|
<template #rank="{ record }">
|
||||||
@ -63,85 +51,91 @@
|
|||||||
<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 #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"
|
||||||
|
class="mr-2px"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #sentiment="{ record }">
|
<template #sentiment="{ record }">
|
||||||
<img
|
<img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
|
||||||
v-if="record.felling == '2'"
|
<img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
|
||||||
src="@/assets/img/hottranslation/good.png"
|
<img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
|
||||||
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" unmountOnClose modal-class="hot-translation-modal" width="640px" @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-4px flex items-center">
|
||||||
<span style="margin-right: 16px">话题名称</span>
|
<p class="cts !mr-16px flex-shrink-0 w-48px">话题名称</p>
|
||||||
<span>{{ topicInfo.name }}</span>
|
<span class="cts">{{ topicInfo.name }}</span>
|
||||||
</a-space>
|
</div>
|
||||||
<a-space>
|
<div class="mb-10px flex items-start">
|
||||||
<span style="margin-right: 16px">话题简介</span>
|
<p class="cts !mr-16px flex-shrink-0 w-48px">话题简介</p>
|
||||||
<span>{{ topicInfo.intro }}</span>
|
<span class="cts">{{ topicInfo.intro }}</span>
|
||||||
</a-space>
|
</div>
|
||||||
<a-space>
|
<div class="mb-4px flex items-center">
|
||||||
<span style="margin-right: 16px">关键词</span>
|
<p class="cts !mr-16px flex-shrink-0 w-48px">关键词</p>
|
||||||
<a-tag v-for="item in topicInfo.keywords" :key="item" style="margin-right: 5px">{{ item }}</a-tag>
|
<a-tag
|
||||||
</a-space>
|
v-for="item in topicInfo.keywords"
|
||||||
<a-space>
|
:key="item"
|
||||||
<span style="margin-right: 16px">热度指数</span>
|
class="mr-8px py-10px px-8px rounded-4px bg-#F2F3F5 cts !h-24px"
|
||||||
|
>{{ item }}</a-tag
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="mb-4px flex items-center">
|
||||||
|
<p class="cts !mr-16px flex-shrink-0 w-48px">热度指数</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>
|
<div class="mb-4px flex items-center">
|
||||||
<span style="margin-right: 16px">情感指数</span>
|
<p class="cts !mr-16px flex-shrink-0 w-48px">情感指数</p>
|
||||||
<img
|
<img v-if="topicInfo.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-20px h-20px" />
|
||||||
v-if="topicInfo.felling == '2'"
|
|
||||||
src="@/assets/img/hottranslation/good.png"
|
|
||||||
style="width: 16px; height: 16px"
|
|
||||||
/>
|
|
||||||
<img
|
<img
|
||||||
v-else-if="topicInfo.felling == '1'"
|
v-else-if="topicInfo.felling == '1'"
|
||||||
src="@/assets/img/hottranslation/normal.png"
|
src="@/assets/img/hottranslation/normal.png"
|
||||||
style="width: 16px; height: 16px"
|
class="w-20px h-20px"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
v-else-if="topicInfo.felling == '0'"
|
v-else-if="topicInfo.felling == '0'"
|
||||||
src="@/assets/img/hottranslation/poor.png"
|
src="@/assets/img/hottranslation/poor.png"
|
||||||
style="width: 16px; height: 16px"
|
class="w-20px h-20px"
|
||||||
/>
|
/>
|
||||||
</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-48px 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_topic_sources" :key="item">
|
<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">{{ 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>
|
||||||
@ -188,10 +182,10 @@ const columns = [
|
|||||||
minWidth: 180,
|
minWidth: 180,
|
||||||
title: '热度指数',
|
title: '热度指数',
|
||||||
dataIndex: 'hot',
|
dataIndex: 'hot',
|
||||||
|
slotName: 'hot',
|
||||||
sortable: {
|
sortable: {
|
||||||
sortDirections: ['ascend', 'descend'],
|
sortDirections: ['ascend', 'descend'],
|
||||||
},
|
},
|
||||||
slotName: 'hot',
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
titleSlotName: 'sentimentTitle',
|
titleSlotName: 'sentimentTitle',
|
||||||
@ -204,8 +198,7 @@ const columns = [
|
|||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
slotName: 'optional',
|
slotName: 'optional',
|
||||||
width: 120,
|
width: 80,
|
||||||
minWidth: 120,
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
// 切换排序方向
|
// 切换排序方向
|
||||||
@ -305,7 +298,16 @@ const handleOk = () => {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
:deep(.arco-table) {
|
||||||
|
tbody {
|
||||||
|
.arco-table-cell {
|
||||||
|
.arco-table-cell-content {
|
||||||
|
color: var(--Text-2, #3c4043);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
/* 自定义样式 */
|
/* 自定义样式 */
|
||||||
:deep(.arco-table-th) {
|
:deep(.arco-table-th) {
|
||||||
background-color: var(--color-fill-2);
|
background-color: var(--color-fill-2);
|
||||||
@ -345,4 +347,64 @@ const handleOk = () => {
|
|||||||
:deep(.arco-btn-text:not(.arco-btn-disabled):hover) {
|
:deep(.arco-btn-text:not(.arco-btn-disabled):hover) {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
.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">
|
||||||
|
.hot-translation-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>
|
||||||
|
|||||||
@ -1,72 +1,57 @@
|
|||||||
|
<!-- 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 #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<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,45 +64,34 @@
|
|||||||
<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">
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
</a-space>
|
</a-space>
|
||||||
</view>
|
</view>
|
||||||
@ -276,7 +250,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 +280,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>
|
||||||
|
|||||||
@ -1,21 +1,20 @@
|
|||||||
|
<!-- eslint-disable vue/no-duplicate-attributes -->
|
||||||
<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: 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>基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</template>
|
||||||
</a-button>
|
<icon-question-circle size="16" class="!color-#737478" />
|
||||||
<template #content>
|
</a-tooltip>
|
||||||
<p style="margin: 0">基于该行业用户内容中提及频率较高的关键词，按热度进行排序，反映近期关注焦点。</p>
|
</div>
|
||||||
</template>
|
|
||||||
</a-popover>
|
|
||||||
</a-space>
|
|
||||||
<a-table
|
<a-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data="dataList"
|
:data="dataList"
|
||||||
@ -24,34 +23,25 @@
|
|||||||
:pagination="false"
|
:pagination="false"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
>
|
>
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<template #heatLevel>
|
<template #heatLevel>
|
||||||
<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="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>
|
||||||
|
|
||||||
@ -68,110 +58,88 @@
|
|||||||
<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 #sentiment="{ record }">
|
<template #sentiment="{ record }">
|
||||||
<img
|
<img v-if="record.felling == '2'" src="@/assets/img/hottranslation/good.png" class="w-24px h-24px" />
|
||||||
v-if="record.felling == '2'"
|
<img v-else-if="record.felling == '1'" src="@/assets/img/hottranslation/normal.png" class="w-24px h-24px" />
|
||||||
src="@/assets/img/hottranslation/good.png"
|
<img v-else-if="record.felling == '0'" src="@/assets/img/hottranslation/poor.png" class="w-24px h-24px" />
|
||||||
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 #tred="{ record }">
|
<template #tred="{ record }">
|
||||||
<div class="flex items-center justify-end" :class="record.trend >= 0 ? 'color-#f64b31' : 'color-#25c883'">
|
<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-up v-if="record.trend > 0" size="16" />
|
||||||
<icon-arrow-down v-else size="16" />
|
<icon-arrow-down v-else size="16" />
|
||||||
{{ `${record.trend === 0 ? 0 : Math.abs(record.trend * 100)}%` }}
|
{{ `${record.trend * 100}%` }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<div class="flex items-center w-100%">
|
||||||
</a-space>
|
<div v-show="fellingRate.length > 0" class="w-500px flex items-center">
|
||||||
<a-space align="center">
|
<div id="container" class="w-300px h-300px"></div>
|
||||||
<a-space>
|
<div class="flex flex-col">
|
||||||
<a-space style="width: 320px">
|
<div class="mb-12px flex items-center">
|
||||||
<div id="container" style="height: 180px; width: 180px"></div>
|
<div class="w-12px h-12px mr-10px bg-#25C883 rounded-50%"></div>
|
||||||
<a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
|
<span
|
||||||
<a-space>
|
>正面情绪 <span class="num">{{ getFormatter(fellingRate[0] * 100) }}</span>
|
||||||
<span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
|
</span>
|
||||||
<span>正面情绪 </span>
|
</div>
|
||||||
<span style="width: 40px">{{ getFormatter(fellingRate[0] * 100) }}</span>
|
<div class="flex items-center">
|
||||||
</a-space>
|
<div class="w-12px h-12px mr-10px bg-#F64B31 rounded-50%"></div>
|
||||||
<a-space>
|
|
||||||
<span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
|
|
||||||
<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"
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
>
|
>
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<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: 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"
|
||||||
<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="columns3"
|
:columns="columns3"
|
||||||
:data="keywordList"
|
:data="keywordList"
|
||||||
@ -180,6 +148,9 @@
|
|||||||
:pagination="false"
|
:pagination="false"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
>
|
>
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<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" />
|
||||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||||
@ -204,7 +175,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" />
|
||||||
@ -213,51 +184,27 @@
|
|||||||
<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 }">
|
||||||
<a-statistic
|
<div class="flex items-center" :class="record.trend > 0 ? 'color-#F64B31' : 'color-#25C883'">
|
||||||
v-if="record.trend > 0"
|
<icon-arrow-up v-if="record.trend > 0" size="16" />
|
||||||
style="font-size: 14px"
|
<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-fall />
|
|
||||||
</template>
|
|
||||||
<template #suffix>%</template>
|
|
||||||
</a-statistic>
|
|
||||||
</template>
|
</template>
|
||||||
<template #optional="{ record }">
|
<template #optional="{ record }">
|
||||||
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
<a-button type="outline" @click="gotoDetail(record)">详情</a-button>
|
||||||
@ -265,63 +212,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>
|
||||||
@ -345,6 +286,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];
|
||||||
|
|
||||||
@ -365,14 +325,12 @@ const columns = [
|
|||||||
title: '排名',
|
title: '排名',
|
||||||
dataIndex: 'rank',
|
dataIndex: 'rank',
|
||||||
slotName: 'rank',
|
slotName: 'rank',
|
||||||
width: 60,
|
width: 100,
|
||||||
minWidth: 60,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '关键词名称',
|
title: '关键词名称',
|
||||||
dataIndex: 'name',
|
dataIndex: 'name',
|
||||||
width: 250,
|
width: 300,
|
||||||
minWidth: 250,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
titleSlotName: 'heatLevel',
|
titleSlotName: 'heatLevel',
|
||||||
@ -382,8 +340,7 @@ const columns = [
|
|||||||
sortDirections: ['ascend', 'descend'],
|
sortDirections: ['ascend', 'descend'],
|
||||||
},
|
},
|
||||||
slotName: 'hot',
|
slotName: 'hot',
|
||||||
width: 180,
|
width: 220,
|
||||||
minWidth: 180,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
titleSlotName: 'trendTitle',
|
titleSlotName: 'trendTitle',
|
||||||
@ -393,13 +350,13 @@ const columns = [
|
|||||||
},
|
},
|
||||||
dataIndex: 'tred',
|
dataIndex: 'tred',
|
||||||
slotName: 'tred',
|
slotName: 'tred',
|
||||||
width: 180,
|
width: 220,
|
||||||
minWidth: 180,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '情感倾向',
|
title: '情感倾向',
|
||||||
dataIndex: 'sentiment',
|
dataIndex: 'sentiment',
|
||||||
slotName: 'sentiment',
|
slotName: 'sentiment',
|
||||||
|
width: 220,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const columns2 = [
|
const columns2 = [
|
||||||
@ -407,8 +364,8 @@ const columns2 = [
|
|||||||
title: '情绪分布',
|
title: '情绪分布',
|
||||||
dataIndex: 'felling',
|
dataIndex: 'felling',
|
||||||
slotName: 'felling',
|
slotName: 'felling',
|
||||||
width: 120,
|
width: 160,
|
||||||
minWidth: 120,
|
// minWidth: 120,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '主要观点',
|
title: '主要观点',
|
||||||
@ -416,13 +373,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 = [
|
||||||
@ -598,7 +590,7 @@ const drawChart = () => {
|
|||||||
labelLine: {
|
labelLine: {
|
||||||
show: false, // 不显示引导线
|
show: false, // 不显示引导线
|
||||||
},
|
},
|
||||||
radius: ['40%', '55%'],
|
radius: ['50%', '70%'], // 调整半径范围
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
@ -634,7 +626,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);
|
||||||
@ -660,4 +652,75 @@ onMounted(() => {
|
|||||||
color: #737478 !important;
|
color: #737478 !important;
|
||||||
margin-left: -8px;
|
margin-left: -8px;
|
||||||
}
|
}
|
||||||
|
.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-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>
|
||||||
|
|||||||
@ -3,95 +3,86 @@
|
|||||||
<!-- 头部 -->
|
<!-- 头部 -->
|
||||||
<a-space
|
<a-space
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
|
class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid"
|
||||||
style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0; color: #737478; font-size: 14px"
|
style="background-color: #fff; width: 100%; padding: 24px; margin: 24px 0; color: #737478; font-size: 14px"
|
||||||
>
|
>
|
||||||
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
|
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
|
||||||
<span style="width: 60px; flex-shrink: 0; line-height: 28px">行业大类</span>
|
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">行业大类</span>
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
|
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
|
||||||
<a-tag
|
<a-tag
|
||||||
size="Medium"
|
|
||||||
v-for="item in industriesTree"
|
v-for="item in industriesTree"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
|
size="Medium"
|
||||||
:checkable="true"
|
:checkable="true"
|
||||||
:checked="selectedIndustry == item.id"
|
:checked="selectedIndustry == item.id"
|
||||||
@check="handleIndustryCheck(item.id)"
|
style="padding: 10px 16px; border-radius: 30px; height: 28px"
|
||||||
style="padding: 4px 16px; border-radius: 30px; height: 28px"
|
|
||||||
:style="
|
:style="
|
||||||
selectedIndustry == item.id
|
selectedIndustry == item.id
|
||||||
? 'color: #6d4cfe; background-color: #f0edff'
|
? 'color: #6D4CFE; background-color: #F0EDFF'
|
||||||
: 'color: #3C4043; background-color: #F7F8FA'
|
: 'color: #3C4043; background-color: #F7F8FA'
|
||||||
"
|
"
|
||||||
|
@check="handleIndustryCheck(item.id)"
|
||||||
>{{ item.name }}</a-tag
|
>{{ item.name }}</a-tag
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</a-space>
|
</a-space>
|
||||||
<!-- 二级类目 -->
|
<!-- 二级类目 -->
|
||||||
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
|
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
|
||||||
<span style="width: 60px; flex-shrink: 0; line-height: 28px">二级类目</span>
|
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">二级类目</span>
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
|
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
|
||||||
<a-tag
|
<a-tag
|
||||||
size="Medium"
|
|
||||||
v-for="item in subCategories"
|
v-for="item in subCategories"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
|
size="Medium"
|
||||||
:checkable="true"
|
:checkable="true"
|
||||||
:checked="selectedSubCategory == item.id"
|
:checked="selectedSubCategory == item.id"
|
||||||
@check="handleSubCategoryCheck(item.id)"
|
style="padding: 10px 16px; border-radius: 30px; height: 28px"
|
||||||
style="padding: 4px 16px; border-radius: 30px; height: 28px"
|
|
||||||
:style="
|
:style="
|
||||||
selectedSubCategory == item.id
|
selectedSubCategory == item.id
|
||||||
? 'color: #6d4cfe; background-color: #f0edff'
|
? 'color: #6d4cfe; background-color: #f0edff'
|
||||||
: 'color: #3C4043; background-color: #F7F8FA'
|
: 'color: #3C4043; background-color: #F7F8FA'
|
||||||
"
|
"
|
||||||
|
@check="handleSubCategoryCheck(item.id)"
|
||||||
>{{ item.name }}</a-tag
|
>{{ item.name }}</a-tag
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</a-space>
|
</a-space>
|
||||||
<!-- </a-space> -->
|
<!-- </a-space> -->
|
||||||
<a-space align="start" style="width: 100%; margin-top: 20px; align-items: flex-start">
|
<a-space align="start" style="width: 100%; align-items: flex-start" class="mb-12px">
|
||||||
<span style="width: 60px; flex-shrink: 0; line-height: 28px">时间筛选</span>
|
<span style="flex-shrink: 0; line-height: 28px" class="mr-32px">时间筛选</span>
|
||||||
<div style="display: flex; flex-wrap: wrap; gap: 8px; width: 100%; align-items: flex-start">
|
<div style="display: flex; flex-wrap: wrap; gap: 16px; width: 100%; align-items: flex-start">
|
||||||
<a-tag
|
<a-tag
|
||||||
size="Medium"
|
|
||||||
v-for="item in timePeriods"
|
v-for="item in timePeriods"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
|
size="Medium"
|
||||||
:checkable="true"
|
:checkable="true"
|
||||||
:checked="selectedTimePeriod == item.value"
|
:checked="selectedTimePeriod == item.value"
|
||||||
@check="handleTimePeriodCheck(item.value)"
|
style="padding: 10px 16px; border-radius: 30px; height: 28px"
|
||||||
style="padding: 4px 16px; border-radius: 30px; height: 28px"
|
|
||||||
:style="
|
:style="
|
||||||
selectedTimePeriod == item.value
|
selectedTimePeriod == item.value
|
||||||
? 'color: #6d4cfe; background-color: #f0edff'
|
? 'color: #6d4cfe; background-color: #f0edff'
|
||||||
: 'color: #3C4043; background-color: #F7F8FA'
|
: 'color: #3C4043; background-color: #F7F8FA'
|
||||||
"
|
"
|
||||||
|
@check="handleTimePeriodCheck(item.value)"
|
||||||
>{{ item.label }}
|
>{{ item.label }}
|
||||||
</a-tag>
|
</a-tag>
|
||||||
</div>
|
</div>
|
||||||
</a-space>
|
</a-space>
|
||||||
<!-- 搜索区域 -->
|
<!-- 搜索区域 -->
|
||||||
<a-space style="margin-left: 'auto'; margin-top: 20px">
|
<a-space style="margin-left: 'auto'">
|
||||||
<a-button type="primary" @click="handleSearch">
|
<a-button type="primary" size="medium" @click="handleSearch">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<icon-search />
|
<icon-search />
|
||||||
</template>
|
</template>
|
||||||
<!-- Use the default slot to avoid extra spaces -->
|
<!-- Use the default slot to avoid extra spaces -->
|
||||||
<template #default>搜索</template>
|
<template #default>搜索</template>
|
||||||
</a-button>
|
</a-button>
|
||||||
<div
|
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||||
@click="handleReset"
|
<template #icon>
|
||||||
style="
|
<icon-refresh />
|
||||||
width: 92px;
|
</template>
|
||||||
height: 32px;
|
<template #default>重置</template>
|
||||||
font-size: 14px;
|
</a-button>
|
||||||
color: #3c4043;
|
|
||||||
border: 1px solid #d7d7d9;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 32px;
|
|
||||||
border-radius: 4px;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<icon-refresh></icon-refresh>
|
|
||||||
<span>重置</span>
|
|
||||||
</div>
|
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-space>
|
</a-space>
|
||||||
</view>
|
</view>
|
||||||
@ -101,6 +92,7 @@
|
|||||||
import { ref, computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { fetchIndustriesTree } from '@/api/all/index';
|
import { fetchIndustriesTree } from '@/api/all/index';
|
||||||
|
|
||||||
|
const emit = defineEmits<(e: 'search') => void>();
|
||||||
// 行业大类
|
// 行业大类
|
||||||
const industriesTree = ref([]);
|
const industriesTree = ref([]);
|
||||||
// 数据状态
|
// 数据状态
|
||||||
@ -169,9 +161,6 @@ const getIndustriesTree = async () => {
|
|||||||
subCategories.value.unshift({ id: 0, name: '全部' });
|
subCategories.value.unshift({ id: 0, name: '全部' });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const emit = defineEmits<{
|
|
||||||
(e: 'search'): void;
|
|
||||||
}>();
|
|
||||||
// 搜索
|
// 搜索
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
emit('search');
|
emit('search');
|
||||||
@ -183,7 +172,7 @@ const handleReset = () => {
|
|||||||
};
|
};
|
||||||
</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);
|
||||||
@ -199,4 +188,12 @@ const handleReset = () => {
|
|||||||
:deep(.arco-modal-body) {
|
:deep(.arco-modal-body) {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
.reset-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>
|
||||||
|
|||||||
@ -3,28 +3,31 @@
|
|||||||
<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 #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<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" />
|
||||||
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
<img v-else-if="record.rank == 2" :src="topImages[1]" style="width: 25px; height: 17px" />
|
||||||
@ -32,98 +35,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 +133,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 +245,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 +269,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>
|
||||||
|
|||||||
@ -1,91 +1,78 @@
|
|||||||
<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>
|
<a-space v-if="genderData.length > 0">
|
||||||
<p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
<div id="container" class="w-300px h-300px"></div>
|
||||||
</template>
|
|
||||||
</a-popover>
|
|
||||||
</a-space>
|
|
||||||
<a-space>
|
|
||||||
<div id="container" style="height: 180px; width: 180px"></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 v-else>
|
||||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; width: 100%;">
|
<NoData class="w-100% h-100%" />
|
||||||
|
</div>
|
||||||
|
</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 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>
|
<a-space v-if="ageValueData.length > 0" align="center">
|
||||||
<template #content>
|
|
||||||
<p>基于xxx获取数据xxx，一段文字描述该数据的获取方式和来源等xxx</p>
|
|
||||||
</template>
|
|
||||||
</a-popover>
|
|
||||||
</a-space>
|
|
||||||
<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>
|
||||||
<span style="width: 16px; height: 8px; background-color: #f64b31; border-radius: 2px"></span>
|
<span style="width: 16px; height: 8px; background-color: #f64b31; border-radius: 2px"></span>
|
||||||
<span style="color: #f64b31">TGI比</span>
|
<span style="color: #f64b31">TGI比</span>
|
||||||
</a-space>
|
</a-space>
|
||||||
</a-space>
|
</a-space>
|
||||||
|
<div v-if="ageValueData.length === 0" class="w-100% flex-1">
|
||||||
<a-space>
|
<NoData />
|
||||||
<div id="age-container" style="height: 180px; width: 480px"></div>
|
</div>
|
||||||
</a-space>
|
<div v-else id="age-container" class="w-100% flex-1"></div>
|
||||||
</a-space>
|
</div>
|
||||||
</a-space>
|
</div>
|
||||||
<a-space direction="vertical" style="background-color: #fff; padding: 24px; flex: 1; margin-top: 24px">
|
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px flex-1 pb-20px">
|
||||||
<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>基于社交平台的IP归属地、位置标签、内容发布地等数据推测用户活跃区域。</template>
|
||||||
<template #icon>
|
<icon-question-circle size="16" class="!color-#737478" />
|
||||||
<icon-question-circle />
|
</a-tooltip>
|
||||||
</template>
|
</div>
|
||||||
</a-button>
|
<div class="flex">
|
||||||
<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 +85,17 @@
|
|||||||
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 #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<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 +106,27 @@
|
|||||||
</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 #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<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 +138,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 +177,15 @@ 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;
|
||||||
|
nextTick(() => {
|
||||||
drawAgeChart();
|
drawAgeChart();
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获得地理分布列表
|
// 获得地理分布列表
|
||||||
@ -202,11 +202,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 +222,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 +302,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 +322,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 +373,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 +392,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 +458,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 +467,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 +492,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 +571,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 +595,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>
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -1,16 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<Container title="账号信息" class="container mt-24px">
|
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
|
||||||
<template #header>
|
<div class="title-row">
|
||||||
|
<span class="title">账号管理</span>
|
||||||
<a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button>
|
<a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button>
|
||||||
</template>
|
</div>
|
||||||
<a-table
|
<a-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data="data"
|
:data="data"
|
||||||
:pagination="pagination"
|
:pagination="pagination"
|
||||||
class="mt-16px"
|
class="mt-8px h-540px"
|
||||||
@page-change="handlePageChange"
|
@page-change="handlePageChange"
|
||||||
@page-size-change="handlePageSizeChange"
|
@page-size-change="handlePageSizeChange"
|
||||||
>
|
>
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<template #mobile="{ record }">
|
<template #mobile="{ record }">
|
||||||
<div class="flex item-center pt-13px pb-13px">
|
<div class="flex item-center pt-13px pb-13px">
|
||||||
<span class="mr-4px">{{ record.mobile }}</span>
|
<span class="mr-4px">{{ record.mobile }}</span>
|
||||||
@ -52,7 +56,7 @@
|
|||||||
<DeleteModal v-model:visible="deleteVisible" :title="deleteTitle" @ok="handleDelete">
|
<DeleteModal v-model:visible="deleteVisible" :title="deleteTitle" @ok="handleDelete">
|
||||||
<p class="delete-modal-content">删除后，该账号将无法登录您的企业。</p>
|
<p class="delete-modal-content">删除后，该账号将无法登录您的企业。</p>
|
||||||
</DeleteModal>
|
</DeleteModal>
|
||||||
</Container>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Container from '@/components/container.vue';
|
import Container from '@/components/container.vue';
|
||||||
@ -180,7 +184,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 +195,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 +204,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 +214,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 +224,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 +243,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 +254,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 +267,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,9 +276,24 @@ 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));
|
||||||
}
|
}
|
||||||
|
.title-row {
|
||||||
|
display: flex;
|
||||||
|
height: 64px;
|
||||||
|
padding: 10px 0 2px 0;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.title {
|
||||||
|
color: var(--Text-1, #211f24);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px; /* 150% */
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<Container title="企业信息" class="container mt-24px">
|
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
|
||||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px">
|
<div class="title-row">
|
||||||
|
<span class="title">企业信息</span>
|
||||||
|
</div>
|
||||||
|
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<template #info="{ record }">
|
<template #info="{ record }">
|
||||||
{{ record.name }}
|
{{ record.name }}
|
||||||
</template>
|
</template>
|
||||||
@ -27,7 +33,7 @@
|
|||||||
</a-form>
|
</a-form>
|
||||||
</Modal>
|
</Modal>
|
||||||
<CustomerServiceModal v-model:visible="customerServiceVisible" />
|
<CustomerServiceModal v-model:visible="customerServiceVisible" />
|
||||||
</Container>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Container from '@/components/container.vue';
|
import Container from '@/components/container.vue';
|
||||||
@ -99,7 +105,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 +118,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 +126,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 +141,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,9 +156,23 @@ 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);
|
||||||
}
|
}
|
||||||
|
.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: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px; /* 150% */
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<Container title="个人信息" class="container mt-24px">
|
<div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
|
||||||
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px">
|
<div class="title-row">
|
||||||
|
<span class="title">个人信息</span>
|
||||||
|
</div>
|
||||||
|
<a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
|
||||||
|
<template #empty>
|
||||||
|
<NoData />
|
||||||
|
</template>
|
||||||
<template #info="{ record }">
|
<template #info="{ record }">
|
||||||
<div class="pt-3px pb-3px">
|
<div class="pt-3px pb-3px">
|
||||||
<a-avatar :image-url="record.head_image" :size="32" />
|
<a-avatar :image-url="record.head_image" :size="32" />
|
||||||
@ -71,7 +77,7 @@
|
|||||||
@cancel="verificationVisible = false"
|
@cancel="verificationVisible = false"
|
||||||
/>
|
/>
|
||||||
</Modal>
|
</Modal>
|
||||||
</Container>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Container from '@/components/container.vue';
|
import Container from '@/components/container.vue';
|
||||||
@ -248,14 +254,14 @@ function getFileExtension(filename: string): string {
|
|||||||
return match ? match[1].toLowerCase() : '';
|
return match ? match[1].toLowerCase() : '';
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="scss">
|
||||||
.form {
|
.form {
|
||||||
margin-top: 13px;
|
margin-top: 13px;
|
||||||
:deep(.arco-row) {
|
:deep(.arco-row) {
|
||||||
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 +269,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 +284,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,11 +304,25 @@ 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;
|
||||||
color: var(--Text-2, rgba(60, 64, 67, 1));
|
color: var(--Text-2, rgba(60, 64, 67, 1));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.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: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px; /* 150% */
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -4,23 +4,17 @@
|
|||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="m-auto mt-24px max-w-1000px">
|
<div class="m-auto mt-24px max-w-1000px">
|
||||||
<Container title="推荐产品" class="body">
|
<Container title="推荐产品" class="container-body">
|
||||||
<div class="flex flex-wrap">
|
<div class="grid grid-cols-3 gap-20px">
|
||||||
<Product
|
<Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" />
|
||||||
v-for="product in products"
|
|
||||||
:key="product.id"
|
|
||||||
class="mt-20px ml-20px"
|
|
||||||
:product="product"
|
|
||||||
@refresh="getProductList"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<a-empty v-if="products.length === 0" />
|
<NoData v-if="products.length === 0" />
|
||||||
</Container>
|
</Container>
|
||||||
<Container title="成功案例" class="body mt-24px">
|
<Container title="成功案例" class="body mt-24px">
|
||||||
<div class="flex flex-wrap">
|
<div class="flex flex-wrap">
|
||||||
<Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
|
<Case v-for="item in cases" :key="item.id" class="mt-20px ml-20px" :data="item"></Case>
|
||||||
</div>
|
</div>
|
||||||
<a-empty v-if="cases.length === 0" />
|
<NoData v-if="cases.length === 0" />
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -53,10 +47,10 @@ const getSuccessCaseList = async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.body {
|
.container-body {
|
||||||
padding-left: 4px !important;
|
padding-left: 24px !important;
|
||||||
:deep(> div > .title) {
|
:deep(> div > .title) {
|
||||||
padding-left: 20px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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%;
|
||||||
|
|||||||
@ -15,8 +15,8 @@
|
|||||||
format="D天H时m分s秒"
|
format="D天H时m分s秒"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="body">
|
<div class="product-info">
|
||||||
<h1 class="title">{{ props.product.name }}</h1>
|
<h1 class="title mb4">{{ props.product.name }}</h1>
|
||||||
<p class="desc">
|
<p class="desc">
|
||||||
{{ props.product.desc }}
|
{{ props.product.desc }}
|
||||||
</p>
|
</p>
|
||||||
@ -118,7 +118,7 @@ const gotoModule = (menuId: number) => {
|
|||||||
width: 304px;
|
width: 304px;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid rgba(230, 230, 232, 1);
|
border: 1px solid var(--BG-300, #e6e6e8);
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
@ -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));
|
||||||
@ -185,12 +185,13 @@ const gotoModule = (menuId: number) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.product-info {
|
||||||
height: 88px;
|
height: 88px;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: Alibaba PuHuiTi, serif;
|
color: var(--Text-1, #211f24);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
@ -199,7 +200,8 @@ const gotoModule = (menuId: number) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.desc {
|
||||||
font-family: Alibaba PuHuiTi, serif;
|
color: var(--Text-3, #737478);
|
||||||
|
font-family: 'PuHuiTi-Medium';
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
@ -208,7 +210,7 @@ const gotoModule = (menuId: number) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
padding-top: 16px;
|
margin-top: 16px;
|
||||||
|
|
||||||
.primary-button {
|
.primary-button {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
@ -216,7 +218,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 +234,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;
|
||||||
|
|||||||
Reference in New Issue
Block a user