chore: 用户画像增加查看

src/api/base.ts

@@ -120,3 +120,13 @@ export function searchEventAttrs(params?: {
 export function getUserList() {
   return httpRequest.get('/api/lab/v1/experiment/analyse/users')
 }
+
+// 获取群组成员
+export function getGroupMembers(params: { group_id: string; name?: string; id?: string }) {
+  return httpRequest.get('/api/lab/v1/experiment/group/bda-members', { params })
+}
+
+// 获取标签成员
+export function getLabelMembers(params: { tag_id: string }) {
+  return httpRequest.get('/api/lab/v1/experiment/tag/bda-statistics-users', { params })
+}

src/components/ViewGroup.vue

+<script setup>
+import AppList from '@/components/base/AppList.vue'
+import { getNameByValue } from '@/utils/dictionary'
+import { useMapStore } from '@/stores/map'
+import { getGroupMembers } from '@/api/base'
+const statusList = useMapStore().getMapValuesByKey('system_status')
+const genderList = useMapStore().getMapValuesByKey('system_gender')
+const connectionTypeList = useMapStore().getMapValuesByKey('experiment_connection_type')
+
+const props = defineProps(['data'])
+
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    remote: {
+      httpRequest: getGroupMembers,
+      params: { group_id: props.data.id }
+    },
+    columns: [
+      { label: '序号', type: 'index', width: 60 },
+      { label: '用户ID', prop: 'id' },
+      { label: '姓名', prop: 'name' },
+      {
+        label: '性别',
+        prop: 'gender',
+        computed({ row }) {
+          return getNameByValue(row.gender, genderList)
+        }
+      },
+      { label: '手机号码', prop: 'mobile' },
+      {
+        label: '来源连接',
+        prop: 'experiment_connection_id',
+        computed({ row }) {
+          return getNameByValue(row.connection.type.toString(), connectionTypeList)
+        }
+      },
+      {
+        label: '状态',
+        prop: 'status',
+        computed({ row }) {
+          return getNameByValue(row.status, statusList)
+        }
+      },
+      { label: '更新人', prop: 'updated_operator.real_name' },
+      { label: '更新时间', prop: 'updated_time' },
+      { label: '操作', slots: 'table-x' }
+    ]
+  }
+})
+</script>
+
+<template>
+  <el-dialog title="标签用户" width="1000px">
+    <AppList v-bind="listOptions" ref="appList">
+      <template #table-x="{ row }">
+        <el-button type="primary" plain>
+          <router-link target="_blank" :to="{ path: '/user/image', query: { user_id: row.id, experiment_id: row.experiment_id } }">查看</router-link>
+        </el-button>
+      </template>
+    </AppList>
+  </el-dialog>
+</template>

src/components/ViewLabel.vue

+<script setup>
+import AppList from '@/components/base/AppList.vue'
+import { getNameByValue } from '@/utils/dictionary'
+import { useMapStore } from '@/stores/map'
+import { getLabelMembers } from '@/api/base'
+
+const statusList = useMapStore().getMapValuesByKey('system_status')
+const genderList = useMapStore().getMapValuesByKey('system_gender')
+const connectionTypeList = useMapStore().getMapValuesByKey('experiment_connection_type')
+
+const props = defineProps(['data'])
+// 列表配置
+const listOptions = computed(() => {
+  return {
+    remote: {
+      httpRequest: getLabelMembers,
+      params: { tag_id: props.data.id }
+    },
+    columns: [
+      { label: '序号', type: 'index', width: 60 },
+      { label: '用户ID', prop: 'id' },
+      { label: '姓名', prop: 'name' },
+      {
+        label: '性别',
+        prop: 'gender',
+        computed({ row }) {
+          return getNameByValue(row.gender, genderList)
+        }
+      },
+      { label: '手机号码', prop: 'mobile' },
+      {
+        label: '来源连接',
+        prop: 'experiment_connection_id',
+        computed({ row }) {
+          return getNameByValue(row.connection.type.toString(), connectionTypeList)
+        }
+      },
+      {
+        label: '状态',
+        prop: 'status',
+        computed({ row }) {
+          return getNameByValue(row.status, statusList)
+        }
+      },
+      { label: '更新人', prop: 'updated_operator.real_name' },
+      { label: '更新时间', prop: 'updated_time' },
+      { label: '操作', slots: 'table-x' }
+    ]
+  }
+})
+</script>
+
+<template>
+  <el-dialog title="群组用户" width="1000px">
+    <AppList v-bind="listOptions" ref="appList">
+      <template #table-x="{ row }">
+        <el-button type="primary" plain>
+          <router-link target="_blank" :to="{ path: '/user/image', query: { user_id: row.id, experiment_id: row.experiment_id } }">查看</router-link>
+        </el-button>
+      </template>
+    </AppList>
+  </el-dialog>
+</template>

src/modules/user/types.ts

@@ -62,6 +62,9 @@ export interface ImageProp {
   history_tags: string[]
   static_groups: string[]
   dynamic_groups: string[]
+  dynamic_group_list: any[]
+  static_group_list: any[]
+  tag_list: any[]
   events: {
     list: {
       updated_time: string

src/modules/user/views/Image.vue

@@ -5,6 +5,8 @@ import type { MemberFieldsProp, ImageProp, ConnectionsProp } from '../types'
 import Icon from '@/components/ConnectionIcon.vue'
 
 const ViewEvent = defineAsyncComponent(() => import('@/components/ViewEvent.vue'))
+const ViewLabel = defineAsyncComponent(() => import('@/components/ViewLabel.vue'))
+const ViewGroup = defineAsyncComponent(() => import('@/components/ViewGroup.vue'))
 
 const route = useRoute()
 
@@ -42,12 +44,28 @@ const getDate = function (date: string) {
   return parseInt(date.slice(date.indexOf(' '), date.indexOf(' ') + 3)) > 12 ? '下午' : '上午'
 }
 
+// 查看事件
 const viewEventVisible = ref(false)
 const currentViewEvent = ref()
 function handleViewEvent(item: any) {
   viewEventVisible.value = true
   currentViewEvent.value = item
 }
+// 查看标签
+const viewLabelVisible = ref(false)
+const currentViewLabel = ref()
+function handleViewLabel(item: any) {
+  viewLabelVisible.value = true
+  currentViewLabel.value = item
+}
+
+// 查看群组
+const viewGroupVisible = ref(false)
+const currentViewGroup = ref()
+function handleViewGroup(item: any) {
+  viewGroupVisible.value = true
+  currentViewGroup.value = item
+}
 
 // 获取链接
 const connectionList = ref<ConnectionsProp[]>([])
@@ -130,7 +148,7 @@ watch(currentConnection, () => {
       <el-tabs class="demo-tabs">
         <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>
+            <el-tag class="ml-2" type="success" v-for="(item, index) in data.tag_list" :key="index" @click="handleViewLabel(item)">{{ item.name }}</el-tag>
           </div>
           <el-empty description="暂无数据" :image-size="80" v-else />
         </el-tab-pane>
@@ -148,7 +166,9 @@ watch(currentConnection, () => {
       <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>
+            <el-tag class="ml-2" type="success" v-for="(item, index) in data.static_group_list" :key="index" @click="handleViewGroup(item)">{{
+              item.name
+            }}</el-tag>
           </div>
           <el-empty description="暂无数据" :image-size="80" v-else />
         </el-tab-pane>
@@ -156,7 +176,9 @@ watch(currentConnection, () => {
       <el-tabs class="demo-tabs">
         <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>
+            <el-tag class="ml-2" type="success" v-for="(item, index) in data.dynamic_group_list" :key="index" @click="handleViewGroup(item)">{{
+              item.name
+            }}</el-tag>
           </div>
           <el-empty description="暂无数据" :image-size="80" v-else />
         </el-tab-pane>
@@ -191,6 +213,10 @@ watch(currentConnection, () => {
   </div>
   <!-- 事件详情 -->
   <ViewEvent v-model="viewEventVisible" :event="currentViewEvent" :user="data" v-if="viewEventVisible && currentViewEvent"></ViewEvent>
+  <!-- 查看标签 -->
+  <ViewLabel v-model="viewLabelVisible" :data="currentViewLabel" v-if="viewLabelVisible && currentViewLabel"></ViewLabel>
+  <!-- 查看群组 -->
+  <ViewGroup v-model="viewGroupVisible" :data="currentViewGroup" v-if="viewGroupVisible && currentViewGroup"></ViewGroup>
 </template>
 <style lang="scss">
 .info-box {