chongqing-web/src/views/portraitManagement/groupProfile/component/profile.vue

<template>
  <div class="main-content-wrapper">
    <div class="main-content">
      <div class="content-row">
        <ProfileRadar :chartData="radarData" />
        <ProfileMembers
          :columns="memberColumns"
          :data="teamMembers"
        />
      </div>

      <div class="content-row">
        <ProfileBasicDistribution
          :chartData1="genderData"
          :chartData2="nationData"
          :chartData3="politicalData"
        />
        <ProfilePositionDistribution
          :chartData1="skillData"
          :chartData2="operateData"
          :chartData3="postData"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import ProfileRadar from '../../components/ProfileRadar.vue'
import ProfileMembers from '../../components/ProfileMembers.vue'
import ProfileBasicDistribution from '../../components/ProfileBasicDistribution.vue'
import ProfilePositionDistribution from '../../components/ProfilePositionDistribution.vue'
import { getDeptMembers, getDeptMemberDistribution, getDeptPositionDistribution, getDimensionScoreOverview } from '@/api/portraitManagement/portraitManagement'

const props = defineProps({
  queryParams: {
    type: Object,
    default: () => ({})
  }
})

const radarData = ref([])

const teamMembers = ref([
  { deptName: '安检一队', employeeCount: 32, partyMemberCount: 8, avgAge: 28.5, avgServiceYear: 4.2, avgXrayYear: 3.1, totalScore: 92.5 },
  { deptName: '安检二队', employeeCount: 28, partyMemberCount: 6, avgAge: 30.2, avgServiceYear: 5.8, avgXrayYear: 4.5, totalScore: 88.3 },
  { deptName: '安检三队', employeeCount: 35, partyMemberCount: 10, avgAge: 27.8, avgServiceYear: 3.5, avgXrayYear: 2.8, totalScore: 90.1 },
  { deptName: '安检四队', employeeCount: 30, partyMemberCount: 7, avgAge: 29.6, avgServiceYear: 4.8, avgXrayYear: 3.6, totalScore: 86.7 },
  { deptName: '安检五队', employeeCount: 26, partyMemberCount: 5, avgAge: 31.0, avgServiceYear: 6.2, avgXrayYear: 5.0, totalScore: 85.9 },
  { deptName: '安检六队', employeeCount: 33, partyMemberCount: 9, avgAge: 28.0, avgServiceYear: 3.8, avgXrayYear: 2.5, totalScore: 91.2 }
])

const memberColumns = ref([
  { label: '部门', prop: 'deptName' },
  { label: '员工数量', prop: 'employeeCount' },
  { label: '党员数量', prop: 'partyMemberCount' },
  { label: '平均年龄', prop: 'avgAge' },
  { label: '平均司龄', prop: 'avgServiceYear' },
  { label: '平均开机年限', prop: 'avgXrayYear' },
  { label: '综合得分', prop: 'totalScore' }
])

const genderData = ref([
  
])

const nationData = ref([
 
])

const politicalData = ref([
  
])

const skillData = ref([])

const operateData = ref([])

const postData = ref({
  categories: ['前传', '人身', '验证', '开包', '开机'],
  values: [4, 5, 6, 7, 8],
  colors: ['#ff6b6b', '#ee5a24']
})
const fetchTeamMembers = async (params) => {
  try {
    const res = await getDeptMembers(params)
    if (res.code === 200 && res.data) {
      teamMembers.value = res.data
    }
  } catch (error) {
    console.error('获取部门成员列表失败', error)
  }
}

const fetchMemberDistribution = async (params) => {
  try {
    const res = await getDeptMemberDistribution(params)
    if (res.code === 200 && res.data) {
      
      genderData.value = res.data.sexDistribution.map(item => ({ value: item.count, name: item.name })) || []
      nationData.value = res.data.nationDistribution.map(item => ({ value: item.count, name: item.name })) || []
      politicalData.value = res.data.politicalDistribution.map(item => ({ value: item.count, name: item.name })) || []
      console.log('genderData', genderData.value)
      console.log('nationData', nationData.value)
      console.log('politicalData', politicalData.value)
    }
  } catch (error) {
    console.error('获取部门成员基本情况分布失败', error)
  }
}

const fetchPositionDistribution = async (params) => {
  try {
    const res = await getDeptPositionDistribution(params)
    if (res.code === 200 && res.data) {
      skillData.value = res.data.qualificationDistribution.map(item => ({ value: item.count, name: item.name })) || []
      operateData.value = res.data.xrayYearDistribution.map(item => ({ value: item.count, name: item.name })) || []
      postData.value = res.data.positionDistribution.map(item => ({ value: item.count, name: item.name })) || []
    }
  } catch (error) {
    console.error('获取部门成员职位情况分布失败', error)
  }
}

const fetchRadarData = async (params) => {
  try {
    const res = await getDimensionScoreOverview(params)
    if (res.code === 200 && res.data) {
      radarData.value = res.data.dimensions || [{ name: '', finalScore: 0, color: '#00e5ff' }]
     
    }
  } catch (error) {
    console.error('获取维度得分一览失败', error)
  }
}
const fetchData = (params) => {
  if (!params.deptId && !params.groupId && !params.teamId ) {
    return
  }
  //  console.log('params', params)
  // debugger
  fetchTeamMembers(params)
  fetchMemberDistribution(params)
  fetchPositionDistribution(params)
  fetchRadarData(params)
}
watch(() => props.queryParams, (newParams) => {
  fetchData(newParams)
}, { deep: true, immediate: true })




</script>

<style lang="scss" scoped>
.main-content-wrapper {
  .main-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px 40px;
  }

  .content-row {
    display: flex;
    gap: 20px;

    > .info-card {
      flex: 1;
      min-width: 0;
    }
  }
}
</style>