chore: 用户分析新增标签

src/modules/analyze/user/api.ts

@@ -29,3 +29,8 @@ export function getMemberAttrs(params: { sso_id: string; member_meta_id: string
 export function getMemberMetaAttrs() {
   return httpRequest.get('/api/lab/v1/experiment/analyse/member-meta-attrs')
 }
+
+// 获取指定用户的标签
+export function getUserTags(params: { sso_id: string; limit: number }) {
+  return httpRequest.get('/api/lab/v1/experiment/analyse/user-tags', { params })
+}

src/modules/analyze/user/components/UserLabel.vue

+<script setup>
+import { getUserTags } from '../api'
+const props = defineProps({ ssoId: String })
+
+const list = ref([])
+async function fetchList() {
+  if (!props.ssoId) return
+  const res = await getUserTags({ sso_id: props.ssoId, limit: 20 })
+  list.value = res.data.items.map(item => {
+    return { ...item, weight: parseFloat(item.weight) / 5 + 1 || 0 }
+  })
+}
+
+watch(
+  () => props.ssoId,
+  () => {
+    fetchList()
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div class="user-label">
+    <ul>
+      <li v-for="item in list" :key="item.id" :style="{ scale: item.weight }">
+        <div class="user-label__inner">
+          {{ item.name }}
+          <span class="user-label__arrow"></span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.user-label {
+  position: relative;
+  margin: 40px;
+  text-align: center;
+  background: url(@/assets/images/figure.png) no-repeat center center;
+  background-size: contain;
+  height: 600px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ul {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 240px;
+    row-gap: 20px;
+  }
+  .user-label__inner {
+    position: relative;
+    display: inline-block;
+    padding: 4px 10px;
+    font-size: 14px;
+    text-align: left;
+    font-family: Roboto;
+    line-height: 24px;
+    color: rgba(16, 16, 16, 1);
+    background-color: rgba(231, 232, 232, 1);
+    border: 1px solid rgba(187, 187, 187, 1);
+    border-radius: 5px;
+  }
+  .user-label__arrow {
+    position: absolute;
+    height: 10px;
+    width: 10px;
+    &::before {
+      background: rgba(231, 232, 232, 1);
+      border: 1px solid rgba(187, 187, 187, 1);
+      box-sizing: border-box;
+      content: ' ';
+      height: 10px;
+      position: absolute;
+      transform: rotate(45deg);
+      width: 10px;
+    }
+  }
+  li:nth-child(odd) {
+    text-align: right;
+    .user-label__arrow {
+      right: -5px;
+      top: 0px;
+      transform: translate(0px, 10px);
+      &::before {
+        border-top-right-radius: 2px;
+        border-bottom-color: transparent !important;
+        border-left-color: transparent !important;
+      }
+    }
+  }
+  li:nth-child(even) {
+    text-align: left;
+    .user-label__arrow {
+      left: -5px;
+      top: 0px;
+      transform: translate(0px, 10px);
+      &::before {
+        border-bottom-left-radius: 2px;
+        border-right-color: transparent !important;
+        border-top-color: transparent !important;
+      }
+    }
+  }
+}
+</style>

src/modules/analyze/user/views/Index.vue

 <script setup>
 import ChartCard from '@/components/ChartCard.vue'
 import UserChart from '../components/UserChart.vue'
+import UserLabel from '../components/UserLabel.vue'
 import { DataLine } from '@element-plus/icons-vue'
 import { useUser } from '@/composables/useAllData'
 import { useMapStore } from '@/stores/map'
@@ -177,6 +178,7 @@ const statusOption = computed(() => {
         <b class="total">{{ userTotal }}</b>
       </el-form-item>
     </el-form>
+    <UserLabel :ssoId="userValue"></UserLabel>
     <div class="row">
       <ChartCard title="用户性别分布" :options="genderOption" :loading="loading1"></ChartCard>
       <ChartCard title="用户数据来源分布" :options="connectionOption" :loading="loading2"></ChartCard>