Skip to content

S
saas-dml
提交 fc3ad6e6 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: 修改用户画像页面

上级 db1e84fd
显示空白字符变更
内嵌 并排
正在显示 包含 84 行增加 和 21 行删除
src/modules/user/api.ts
浏览文件 @ fc3ad6e6
......@@ -21,12 +21,20 @@ export function createMember(data: { name: string; status: string; experiment_co
}
// 删除用户
export function deleteMember(data: { ids: string; }) {
export function deleteMember(data: { ids: string }) {
return httpRequest.post('/api/lab/v1/experiment/member/delete', data)
}
// 新建用户
export function updateMember(data: { id?: string; name: string; status: string; experiment_connection_id: string; gender: string; mobile: string; fields: string }) {
export function updateMember(data: {
id?: string
name: string
status: string
experiment_connection_id: string
gender: string
mobile: string
fields: string
}) {
return httpRequest.post('/api/lab/v1/experiment/member/update', data)
}
......@@ -56,12 +64,12 @@ export function deleteEvent(data: { id: string }) {
}
// 用户画像
export function getMemberImage(params: { id: string }) {
return httpRequest.get('/api/lab/v1/experiment/member/member-image', { params })
export function getMemberImage(params: { id: string; connection_id?: string; page?: number; 'per-page'?: number }) {
return httpRequest.get('/api/lab/v1/experiment/member/member-image1', { params })
}
// 导入事件
export function importEvent(data: { event_id: string; url: string, name: string, size: string }) {
export function importEvent(data: { event_id: string; url: string; name: string; size: string }) {
return httpRequest.post('/api/lab/v1/experiment/member/event-upload', data)
}
......@@ -71,7 +79,7 @@ export function importEvent(data: { event_id: string; url: string, name: string,
// headers: { 'Content-Type': 'multipart/form-data' }
// })
// }
export function importMember(data: { groups_id?: string; connection_id: string; url: string, name: string, size: string }) {
export function importMember(data: { groups_id?: string; connection_id: string; url: string; name: string; size: string }) {
return httpRequest.post('/api/lab/v1/experiment/member/member-upload', data)
}
......@@ -84,3 +92,7 @@ export function getMemberGroups() {
export function getProgress(params: { page?: number; 'per-page'?: number }) {
return httpRequest.get('/api/lab/v1/experiment/member/tasks', { params })
}
export function getConnectionList() {
return httpRequest.get('/api/lab/v1/experiment/member/connections')
}
src/modules/user/types.ts
浏览文件 @ fc3ad6e6
......@@ -59,6 +59,7 @@ export interface ImageProp {
status: string
updated_time: string
tags: string[]
history_tags: string[]
static_groups: string[]
dynamic_groups: string[]
events: {
......@@ -70,5 +71,3 @@ export interface ImageProp {
}[]
}
}
src/modules/user/views/Image.vue
浏览文件 @ fc3ad6e6
<script setup lang="ts">
// import { UserFilled } from '@element-plus/icons-vue'
import { getMemberImage, getMemberFieldsList } from '../api'
import type { MemberFieldsProp, ImageProp } from '../types'
import { getMemberImage, getMemberFieldsList, getConnectionList } from '../api'
import type { MemberFieldsProp, ImageProp, ConnectionsProp } from '../types'
import Icon from '@/components/ConnectionIcon.vue'
const ViewEvent = defineAsyncComponent(() => import('@/components/ViewEvent.vue'))
const route = useRoute()
const userId = computed(() => {
return route.query.user_id as string
})
// 画像数据
let data = $ref<ImageProp>()
// 属性
let fieldsList = $ref<MemberFieldsProp[]>([])
onMounted(() => {
// 画像
getMemberImage({ id: route.query.user_id as '' }).then(res => {
getMemberImage({ id: userId.value, 'per-page': 100 }).then(res => {
data = res.data
getFields(res.data)
})
......@@ -44,6 +48,33 @@ function handleViewEvent(item: any) {
viewEventVisible.value = true
currentViewEvent.value = item
}
// 获取链接
const connectionList = ref<ConnectionsProp[]>([])
const currentConnection = ref('')
async function fetchConnections() {
const { data } = await getConnectionList()
connectionList.value = data
if (data.length) {
currentConnection.value = data[0]?.id
}
}
onMounted(() => {
fetchConnections()
})
const event: any = reactive({ page: 1, total: 0, list: [] })
async function fetchEvent(isReset = false) {
if (isReset) {
Object.assign(event, { page: 1, total: 0, list: [] })
}
const { data } = await getMemberImage({ id: userId.value, connection_id: currentConnection.value, page: event.page, 'per-page': 20 })
Object.assign(event, { page: event.page + 1, total: data.events.total, list: [...event.list, ...data.events.list] })
console.log(event)
}
watch(currentConnection, () => {
fetchEvent(true)
})
</script>
<template>
......@@ -51,7 +82,8 @@ function handleViewEvent(item: any) {
<div class="info-box" v-if="data">
<div class="info-name" style="min-width: 300px">
<div class="tx">
<img :src="data.gender === '1' ? 'https://webapp-pub.ezijing.com/pages/assa/dml_boy.png' : 'https://webapp-pub.ezijing.com/pages/assa/dml_girl.png'" />
<img
:src="data.gender === '1' ? 'https://webapp-pub.ezijing.com/pages/assa/dml_boy.png' : 'https://webapp-pub.ezijing.com/pages/assa/dml_girl.png'" />
<!-- https://webapp-pub.ezijing.com/pages/assa/dml_boy.png -->
<!-- <el-icon :size="50" color="#fff"><UserFilled /></el-icon> -->
</div>
......@@ -80,7 +112,7 @@ function handleViewEvent(item: any) {
</AppCard>
<div class="card-box">
<AppCard class="card" style="overflow-y: scroll" title="用户属性">
<div style="display: flex; justify-content: center; padding-right: 20px" v-if="data">
<div style="display: flex; justify-content: center" v-if="data">
<el-form label-suffix="：" label-width="auto">
<el-form-item label="链接来源">{{ data.connection_name }}</el-form-item>
<el-form-item label="姓名">{{ data.name }}</el-form-item>
......@@ -95,9 +127,9 @@ function handleViewEvent(item: any) {
</el-form>
</div>
</AppCard>
<AppCard class="card" title="标签与群组">
<AppCard class="card" title="用户标签">
<el-tabs class="demo-tabs">
<el-tab-pane label="用户标签">
<el-tab-pane label="当前标签">
<div class="scroll" v-if="data?.tags && data.tags.length">
<el-tag class="ml-2" type="success" v-for="(item, index) in data.tags" :key="index">{{ item }}</el-tag>
</div>
......@@ -105,7 +137,17 @@ function handleViewEvent(item: any) {
</el-tab-pane>
</el-tabs>
<el-tabs class="demo-tabs">
<el-tab-pane label="静态分组">
<el-tab-pane label="历史标签">
<div class="scroll" v-if="data?.history_tags && data.history_tags.length">
<el-tag class="ml-2" type="success" v-for="(item, index) in data.history_tags" :key="index">{{ item }}</el-tag>
</div>
<el-empty description="暂无数据" :image-size="80" v-else />
</el-tab-pane>
</el-tabs>
</AppCard>
<AppCard class="card" title="用户分群">
<el-tabs class="demo-tabs">
<el-tab-pane label="静态群组">
<div class="scroll" v-if="data?.static_groups && data.static_groups.length">
<el-tag class="ml-2" type="success" v-for="(item, index) in data.static_groups" :key="index">{{ item }}</el-tag>
</div>
......@@ -113,7 +155,7 @@ function handleViewEvent(item: any) {
</el-tab-pane>
</el-tabs>
<el-tabs class="demo-tabs">
<el-tab-pane label="动态分组">
<el-tab-pane label="动态群组">
<div class="scroll" v-if="data?.dynamic_groups && data.dynamic_groups.length">
<el-tag class="ml-2" type="success" v-for="(item, index) in data.dynamic_groups" :key="index">{{ item }}</el-tag>
</div>
......@@ -122,8 +164,11 @@ function handleViewEvent(item: any) {
</el-tabs>
</AppCard>
<AppCard class="card" title="用户行为轨迹">
<template v-if="data?.events.list && data.events.list.length">
<div class="event-box" v-for="(item, index) in data.events.list" :key="index">
<el-radio-group v-model="currentConnection">
<el-radio-button :label="item.id" v-for="item in connectionList" :key="item.id">{{ item.type_name }}</el-radio-button>
</el-radio-group>
<template v-if="event.list.length">
<div class="event-box" v-for="(item, index) in event.list" :key="index">
<div class="date">{{ item.updated_time?.slice(0, item.updated_time.indexOf(' ')) }}</div>
<div class="event-content">
<div class="time">
......@@ -135,8 +180,12 @@ function handleViewEvent(item: any) {
在<span>"{{ item.connection_name }}"</span> 上
<span style="cursor: pointer" @click="handleViewEvent(item)">"{{ item.event_name }}"</span>
</div>
<el-button @click="handleViewEvent(item)">详情</el-button>
</div>
</div>
<el-row justify="center" style="margin: 20px">
<el-button @click="fetchEvent()" v-if="event.total > event.list.length">更多行为</el-button>
</el-row>
</template>
<el-empty description="暂无数据" :image-size="80" v-else />
</AppCard>
......@@ -177,11 +226,11 @@ function handleViewEvent(item: any) {
}
.card-box {
display: flex;
column-gap: 10px;
.card {
flex: 1;
margin-top: 0;
height: 90vh;
margin-right: 10px;
height: 80vh;
.demo-tabs {
height: 26vh;
}
......@@ -210,5 +259,8 @@ function handleViewEvent(item: any) {
color: #ba143e;
font-weight: bold;
}
.event {
flex: 1;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论