feat: 完成人像管理模块多页面功能优化与修复

1. 修复SearchBar组件中STATION默认ID配置错误
2. 为 seizedNum 图表添加图例显示
3. 调整运行数据页面接口调用，修正接口名称与注释
4. 优化分数事件页面表单重置逻辑，清空更多关联参数
5. 为雷达图表添加自动配色功能
6. 为多个图表组件添加自定义tooltip与数据缩放组件
7. 重构滚动表格组件，修复滚动逻辑问题
8. 重构部门/小组/队伍画像页面的五角展示数据，从接口动态获取真实数据

src/views/portraitManagement/components/ProfileBasicDistribution.vue

@@ -89,9 +89,16 @@ const updateGenderChart = (data) => {
   }
   const chartData = data && data.length > 0 ? getGenderColors(data) : defaultGenderData
   genderChart.setOption({
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' },
+      formatter: '{b}: {c} ({d}%)'
+    },
     series: [{
       type: 'pie',
-      radius: ['50%', '70%'],
+      radius: ['38%', '55%'],
       data: chartData,
       label: { show: true, color: '#fff', fontSize: 11 },
       labelLine: { show: true }
@@ -106,9 +113,16 @@ const updateNationChart = (data) => {
   }
   const chartData = data && data.length > 0 ? getNationColors(data) : defaultNationData
   nationChart.setOption({
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' },
+      formatter: '{b}: {c} ({d}%)'
+    },
     series: [{
       type: 'pie',
-      radius: ['50%', '70%'],
+      radius: ['38%', '55%'],
       data: chartData,
       label: { show: true, color: '#fff', fontSize: 11 },
       labelLine: { show: true }
@@ -123,9 +137,16 @@ const updatePoliticalChart = (data) => {
   }
   const chartData = data && data.length > 0 ? getPoliticalColors(data) : defaultPoliticalData
   politicalChart.setOption({
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' },
+      formatter: '{b}: {c} ({d}%)'
+    },
     series: [{
       type: 'pie',
-      radius: ['50%', '70%'],
+      radius: ['38%', '55%'],
       data: chartData,
       label: { show: true, color: '#fff', fontSize: 11 },
       labelLine: { show: true }

src/views/portraitManagement/components/ProfilePositionDistribution.vue

@@ -89,6 +89,13 @@ const updateSkillChart = (data) => {
   const chartData = transformData(data, defaultSkillData)
  
   skillChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' },
+      formatter: '{b}: {c}'
+    },
     xAxis: {
       type: 'category',
       data: chartData.categories,
@@ -123,6 +130,13 @@ const updateOperateChart = (data) => {
   const chartData = transformData(data, defaultOperateData)
   
   operateChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' },
+      formatter: '{b}: {c}'
+    },
     xAxis: {
       type: 'category',
       data: chartData.categories,
@@ -156,6 +170,13 @@ const updatePostChart = (data) => {
   }
   const chartData = transformData(data, defaultPostData)
   postChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' },
+      formatter: '{b}: {c}'
+    },
     xAxis: {
       type: 'category',
       data: chartData.categories,

src/views/portraitManagement/components/ProfileRadar.vue

@@ -31,12 +31,21 @@ const props = defineProps({
   }
 })
 
+const freshColors = [
+  '#00e5ff', '#36d399', '#fbbf24', '#f472b6', '#a78bfa',
+  '#34d399', '#f97316', '#2dd4bf', '#e879f9', '#38bdf8'
+]
+
 const defaultRadarData = [
 
 ]
 
 const computedRadarData = computed(() => {
-  return props.chartData.length > 0 ? props.chartData : defaultRadarData
+  const data = props.chartData.length > 0 ? props.chartData : defaultRadarData
+  return data.map((item, index) => ({
+    ...item,
+    color: item.color || freshColors[index % freshColors.length]
+  }))
 })
 
 const computedIndicators = computed(() => {

src/views/portraitManagement/components/SearchBar.vue

@@ -72,7 +72,7 @@ const currentKey = ref(null)
 const defaultIdMap = {
   user: 13,
   BRIGADE: 103,
-  STATION: 103,
+  STATION: 100,
   MANAGER: 104,
   TEAMS: 110
 }

src/views/portraitManagement/components/SeizedInfo.vue

@@ -110,6 +110,24 @@ const setChartsOptionsBar = computed(() => {
         barWidth: '50%'
       },
     ],
+    dataZoom: [
+      {
+        type: 'slider',
+        show: props.chartsData.itemList.length > 6,
+        height: 20,
+        bottom: 5,
+        borderColor: 'transparent',
+        backgroundColor: 'rgba(15,70,250,0.15)',
+        fillerColor: 'rgba(15,70,250,0.4)',
+        handleStyle: { color: '#4da6ff' },
+        textStyle: { color: '#a0c4ff' },
+        labelFormatter: ''
+      },
+      {
+        type: 'inside',
+        disabled: props.chartsData.itemList.length <= 6
+      }
+    ],
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'rgba(13,80,122,1)',

src/views/portraitManagement/components/SeizedNum.vue

@@ -65,6 +65,9 @@
         left: 60,
         right: 20
       },
+      legend: {
+        show: true
+      },
       xAxis: {
         type: 'category',
         axisLabel: { show: false },

src/views/portraitManagement/components/rollingTable.vue

@@ -35,6 +35,8 @@ const props = defineProps({
 
 const scrollContentRef = ref(null)
 let animationId = null
+let isActive = false
+let pendingStart = false
 
 const scrollData = computed(() => {
   if (!props.data || props.data.length === 0) return []
@@ -42,41 +44,48 @@ const scrollData = computed(() => {
 })
 
 const startScroll = () => {
-  const content = scrollContentRef.value
-  if (!content || props.data.length <= 0) return
-
-  let lastTime = performance.now()
-  let currentScrollY = 0
-  content.style.transform = 'translateY(0px)'
-
-  const scroll = (currentTime) => {
-    if (!content) {
-      animationId = requestAnimationFrame(scroll)
-      return
-    }
+  stopScroll()
+  if (pendingStart) return
+  pendingStart = true
+  nextTick(() => {
+    pendingStart = false
+    if (!isActive) return
+    const content = scrollContentRef.value
+    if (!content || props.data.length <= 0) return
+
+    let lastTime = performance.now()
+    let currentScrollY = 0
+    content.style.transform = 'translateY(0px)'
+
+    const scroll = (currentTime) => {
+      if (!isActive || !content) {
+        animationId = null
+        return
+      }
+
+      const halfHeight = content.scrollHeight / 2
+      if (halfHeight <= 0) {
+        animationId = requestAnimationFrame(scroll)
+        return
+      }
+
+      const step = halfHeight / (props.duration * 60)
+      const delta = currentTime - lastTime
+      lastTime = currentTime
+
+      currentScrollY += step * (delta / 16.67)
+
+      if (currentScrollY >= halfHeight) {
+        currentScrollY = 0
+      }
+
+      content.style.transform = `translateY(${-currentScrollY}px)`
 
-    const halfHeight = content.scrollHeight / 2
-    if (halfHeight <= 0) {
       animationId = requestAnimationFrame(scroll)
-      return
     }
 
-    const step = halfHeight / (props.duration * 60)
-    const delta = currentTime - lastTime
-    lastTime = currentTime
-
-    currentScrollY += step * (delta / 16.67)
-
-    if (currentScrollY >= halfHeight) {
-      currentScrollY = 0
-    }
-
-    content.style.transform = `translateY(${-currentScrollY}px)`
-
     animationId = requestAnimationFrame(scroll)
-  }
-
-  animationId = requestAnimationFrame(scroll)
+  })
 }
 
 const stopScroll = () => {
@@ -87,23 +96,20 @@ const stopScroll = () => {
 }
 
 onMounted(() => {
+  isActive = true
   if (props.data.length > 0) {
-    nextTick(() => {
-      startScroll()
-    })
+    startScroll()
   }
 })
 
 watch(() => props.data, (val) => {
-  stopScroll()
   if (val && val.length > 0) {
-    nextTick(() => {
-      startScroll()
-    })
+    startScroll()
   }
 })
 
 onUnmounted(() => {
+  isActive = false
   stopScroll()
 })
 </script>

src/views/portraitManagement/deptProfile/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="group-profile-page">
     <Page title="安检人事管理可视化大屏" :tabs="['能力画像', '运行数据']" @tab-change="handleTabChange">
-      <SearchBar v-model:visible="searchVisible" ref="searchBar" @search="handleSearch" @init-done="handleInitDone" :deptType="'BRIGADE'" />
+      <SearchBar v-model:visible="searchVisible" ref="searchBar" @search="handleSearch" @init-done="handleInitDone"
+        :deptType="'BRIGADE'" />
       <PentagonGroup :items="pentagonItems" />
       <Profile v-if="activeTab === 0" :query-params="queryParams" />
       <RunData v-else :query-params="queryParams" />
@@ -28,14 +29,18 @@ const activeTab = ref(0)
 const searchVisible = ref(false)
 const queryParams = ref({})
 
-const teamStatsData = ref(null)
+const pentagonItems = ref([])
 const invokerCountDeptTeamStats = (params) => {
-  countDeptTeamStats(params).then(res => {
+  const copyParams = {
+    deptId: params.deptId,
+
+  }
+  countDeptTeamStats(copyParams).then(res => {
     if (res.code === 200 && res.data) {
-      console.log(res.data)
-      teamStatsData.value = [
+      const result = res.data
+      pentagonItems.value = [
         {
-          value: '88',
+          value: result.totalScore,
           label: '综合得分',
           iconPath: zongheIcon,
           cornerRadius: 20,
@@ -58,7 +63,7 @@ const invokerCountDeptTeamStats = (params) => {
           bgGradientEnd: 'rgba(15,70,250,0.2)'
         },
         {
-          value: '10',
+          value: result.employeeCount,
           label: '人员数量',
           iconPath: renyuanIcon,
           cornerRadius: 20,
@@ -80,7 +85,7 @@ const invokerCountDeptTeamStats = (params) => {
           bgGradientEnd: 'rgba(15,70,250,0.2)'
         },
         {
-          value: '周游波小组',
+          value: result.deptName,
           label: '',
           iconPath: zu02Icon,
           iconStyle: {
@@ -115,7 +120,7 @@ const invokerCountDeptTeamStats = (params) => {
           bgGradientEnd: 'rgba(15,70,250,0.2)'
         },
         {
-          value: '28',
+          value: result.avgAge,
           label: '平均年龄',
           iconPath: nianlingIcon,
           cornerRadius: 20,
@@ -138,7 +143,7 @@ const invokerCountDeptTeamStats = (params) => {
           bgGradientEnd: 'rgba(15,70,250,0.2)'
         },
         {
-          value: '3.5',
+          value: result.avgWorkYears,
           label: '平均司龄',
           iconPath: silingIcon,
           cornerRadius: 20,
@@ -167,9 +172,7 @@ const invokerCountDeptTeamStats = (params) => {
 
 
 
-const pentagonItems = ref([
 
-])
 
 const handleSearch = (params) => {
   queryParams.value = params
@@ -185,7 +188,7 @@ onMounted(() => {
 
   const defParams = Object.assign({ deptId: '' }, searchBar.value.getDefQuery())
   queryParams.value = defParams
- 
+
 })
 
 </script>

src/views/portraitManagement/groupProfile/component/runData.vue

@@ -245,7 +245,7 @@ const fetchData = () => {
   invokerCountSeizeSubjectCategoryQuantity(params)
   invokerCountSeizureTotalQuantity(params)
   invokerCountSeizureSingleQuantity(params)
-  invokerCountSeizureAreaQuantity(params)
+  // invokerCountSeizureAreaQuantity(params)
   invokerCountSeizureStatsItem(params)
   invokerCountSeizureStatsType(params)
   invokerCountSeizureStatsPost(params)

src/views/portraitManagement/groupProfile/index.vue

@@ -13,12 +13,13 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import Page from '../components/page.vue'
 import SearchBar from '../components/SearchBar.vue'
 import Profile from './component/profile.vue'
 import RunData from './component/runData.vue'
 import PentagonGroup from '../components/PentagonGroup.vue'
+import { countDeptTeamStats } from '@/api/portraitManagement/portraitManagement'
 import zongheIcon from '@/assets/icons/portrait/zonghe_icon.png'
 import renyuanIcon from '@/assets/icons/portrait/renyuan_icon.png'
 import zu02Icon from '@/assets/icons/portrait/zu02_icon.png'
@@ -29,142 +30,149 @@ const activeTab = ref(0)
 const searchVisible = ref(false)
 const queryParams = ref({})
 
-const pentagonItems = computed(() => [
-  {
-    value: '88',
-    label: '综合得分',
-    iconPath: zongheIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 0, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 260, y: 200 },
-      bottomLeft: { x: 0, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '10',
-    label: '人员数量',
-    iconPath: renyuanIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 10, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 260, y: 200 },
-      bottomLeft: { x: -30, y: 200 }
-    }, cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: groupName.value,
-    label: '陈行小组',
-    iconPath: zu02Icon,
-    iconStyle: {
-      width: '250px',
-      height: '250px'
-    },
-    labelStyle: {
-      fontSize: '48px',
-      bottom: '26px',
-      position: 'relative'
-    },
-    valueStyle: {
-      fontSize: '48px',
-      bottom: '26px',
-      position: 'relative'
-    },
-    vertical: true,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 10, y: 0 },
-      topRight: { x: 280, y: 0 },
-      bottomRight: { x: 320, y: 200 },
-      bottomLeft: { x: -30, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '0px',
-      position: 'relative',
-      bottom: '65px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '28',
-    label: '平均年龄',
-    iconPath: nianlingIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: -10, y: 0 },
-      topRight: { x: 290, y: 0 },
-      bottomRight: { x: 330, y: 200 },
-      bottomLeft: { x: 30, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '3.5',
-    label: '平均司龄',
-    iconPath: silingIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 0, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 300, y: 200 },
-      bottomLeft: { x: 40, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
+const pentagonItems = ref([])
+const invokerCountDeptTeamStats = (params) => {
+  const copyParams = {
+    deptId: params.groupId
   }
-])
-const groupName = ref('')
+  countDeptTeamStats(copyParams).then(res => {
+    if (res.code === 200 && res.data) {
+      const result = res.data
+      pentagonItems.value = [
+        {
+          value: result.totalScore,
+          label: '综合得分',
+          iconPath: zongheIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 260, y: 200 },
+            bottomLeft: { x: 0, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.employeeCount,
+          label: '人员数量',
+          iconPath: renyuanIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 10, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 260, y: 200 },
+            bottomLeft: { x: -30, y: 200 }
+          }, cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.deptName,
+          label: '',
+          iconPath: zu02Icon,
+          iconStyle: {
+            width: '250px',
+            height: '250px'
+          },
+          valueStyle: {
+            fontSize: '48px',
+            bottom: '26px',
+            position: 'relative'
+          },
+          vertical: true,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 10, y: 0 },
+            topRight: { x: 280, y: 0 },
+            bottomRight: { x: 320, y: 200 },
+            bottomLeft: { x: -30, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '0px',
+            position: 'relative',
+            bottom: '65px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.avgAge,
+          label: '平均年龄',
+          iconPath: nianlingIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: -10, y: 0 },
+            topRight: { x: 290, y: 0 },
+            bottomRight: { x: 330, y: 200 },
+            bottomLeft: { x: 30, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.avgWorkYears,
+          label: '平均司龄',
+          iconPath: silingIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 300, y: 200 },
+            bottomLeft: { x: 40, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        }
+      ]
+    }
+  })
+}
+
 const handleSearch = (params) => {
   queryParams.value = params
+  invokerCountDeptTeamStats(params)
 }
 
 const handleTabChange = (index) => {

src/views/portraitManagement/teamProfile/component/runData.vue

@@ -243,7 +243,8 @@ const fetchData = () => {
   invokerCountSeizeSubjectCategoryQuantity(params)
   invokerCountSeizureTotalQuantity(params)
   invokerCountSeizureSingleQuantity(params)
-  invokerCountSeizureAreaQuantity(params)
+  invokerCountSeizeAreaQuantity(params)
+  // invokerCountSeizureAreaQuantity(params)
   invokerCountSeizureStatsItem(params)
   invokerCountSeizureStatsType(params)
   invokerCountSeizureStatsPost(params)

src/views/portraitManagement/teamProfile/index.vue

@@ -11,12 +11,13 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import Page from '../components/page.vue'
 import SearchBar from '../components/SearchBar.vue'
 import Profile from './component/profile.vue'
 import RunData from './component/runData.vue'
 import PentagonGroup from '../components/PentagonGroup.vue'
+import { countDeptTeamStats } from '@/api/portraitManagement/portraitManagement'
 import zongheIcon from '@/assets/icons/portrait/zonghe_icon.png'
 import renyuanIcon from '@/assets/icons/portrait/renyuan_icon.png'
 import zu02Icon from '@/assets/icons/portrait/zu02_icon.png'
@@ -27,137 +28,149 @@ const activeTab = ref(0)
 const searchVisible = ref(false)
 const queryParams = ref({})
 
-const pentagonItems = ref([
-  {
-    value: '88',
-    label: '综合得分',
-    iconPath: zongheIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 0, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 260, y: 200 },
-      bottomLeft: { x: 0, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '10',
-    label: '人员数量',
-    iconPath: renyuanIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 10, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 260, y: 200 },
-      bottomLeft: { x: -30, y: 200 }
-    }, cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '周游波小组',
-    label: '',
-    iconPath: zu02Icon,
-    iconStyle: {
-      width: '250px',
-      height: '250px'
-    },
-    valueStyle: {
-      fontSize: '48px',
-      bottom: '26px',
-      position: 'relative'
-    },
-    vertical: true,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 10, y: 0 },
-      topRight: { x: 280, y: 0 },
-      bottomRight: { x: 320, y: 200 },
-      bottomLeft: { x: -30, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '0px',
-      position: 'relative',
-      bottom: '65px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '28',
-    label: '平均年龄',
-    iconPath: nianlingIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: -10, y: 0 },
-      topRight: { x: 290, y: 0 },
-      bottomRight: { x: 330, y: 200 },
-      bottomLeft: { x: 30, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '3.5',
-    label: '平均司龄',
-    iconPath: silingIcon,
-    cornerRadius: 20,
-    vertices: {
-      topLeft: { x: 0, y: 0 },
-      topRight: { x: 300, y: 0 },
-      bottomRight: { x: 300, y: 200 },
-      bottomLeft: { x: 40, y: 200 }
-    },
-    cardContentStyle: {
-      gap: '100px'
-    },
-    edgeGradients: {
-      top: { start: '#0f46fa', end: 'transparent' },
-      right: { start: 'transparent', end: '#9903C1' },
-      bottom: { start: '#9903C1', end: 'transparent' },
-      left: { start: 'transparent', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
+const pentagonItems = ref([])
+const invokerCountDeptTeamStats = (params) => {
+  const copyParams = {
+    deptId: params.teamId
   }
-])
+  countDeptTeamStats(copyParams).then(res => {
+    if (res.code === 200 && res.data) {
+      const result = res.data
+      pentagonItems.value = [
+        {
+          value: result.totalScore,
+          label: '综合得分',
+          iconPath: zongheIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 260, y: 200 },
+            bottomLeft: { x: 0, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.employeeCount,
+          label: '人员数量',
+          iconPath: renyuanIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 10, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 260, y: 200 },
+            bottomLeft: { x: -30, y: 200 }
+          }, cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.deptName,
+          label: '',
+          iconPath: zu02Icon,
+          iconStyle: {
+            width: '250px',
+            height: '250px'
+          },
+          valueStyle: {
+            fontSize: '48px',
+            bottom: '26px',
+            position: 'relative'
+          },
+          vertical: true,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 10, y: 0 },
+            topRight: { x: 280, y: 0 },
+            bottomRight: { x: 320, y: 200 },
+            bottomLeft: { x: -30, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '0px',
+            position: 'relative',
+            bottom: '65px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.avgAge,
+          label: '平均年龄',
+          iconPath: nianlingIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: -10, y: 0 },
+            topRight: { x: 290, y: 0 },
+            bottomRight: { x: 330, y: 200 },
+            bottomLeft: { x: 30, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        },
+        {
+          value: result.avgWorkYears,
+          label: '平均司龄',
+          iconPath: silingIcon,
+          cornerRadius: 20,
+          vertices: {
+            topLeft: { x: 0, y: 0 },
+            topRight: { x: 300, y: 0 },
+            bottomRight: { x: 300, y: 200 },
+            bottomLeft: { x: 40, y: 200 }
+          },
+          cardContentStyle: {
+            gap: '100px'
+          },
+          edgeGradients: {
+            top: { start: '#0f46fa', end: 'transparent' },
+            right: { start: 'transparent', end: '#9903C1' },
+            bottom: { start: '#9903C1', end: 'transparent' },
+            left: { start: 'transparent', end: '#0f46fa' }
+          },
+          bgGradientStart: 'rgba(33,33,58,0.95)',
+          bgGradientEnd: 'rgba(15,70,250,0.2)'
+        }
+      ]
+    }
+  })
+}
 
 const handleSearch = (params) => {
   queryParams.value = params
+  invokerCountDeptTeamStats(params)
 }
 
 const handleTabChange = (index) => {

src/views/score/event/index.vue

@@ -310,8 +310,10 @@ async function handleLevelChange() {
 async function handleFormLevelChange() {
   form.dimensionId = null
   form.level2Id = null; form.level2Name = ''; form.level3Id = null; form.level3Name = ''; form.level4Id = null; form.level4Name = ''
+  form.deptId = null; form.teamId = null; form.groupId = null; form.personId = null
   indicatorTree.value = []
   level2Options.value = []; level3Options.value = []; level4Options.value = []
+  teamOptions.value = []; groupOptions.value = []; personOptions.value = []
   const r = await getDimensionAll({ pageNum: 1, pageSize: 100, org: form.org })
   dimensionOptions.value = r.data || []
 }