chore: 修改用户画像页面

src/modules/user/api.ts

@@ -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

@@ -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

 <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>