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

<template>
  <div class="main-content-wrapper">
    <div class="main-content">
      <div class="content-row">
        <ProfileRadar :chartData="radarData" />
        <ProfileMembers :columns="teamColumns" :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 { countStationTeamStats, getDeptMemberDistribution, getDeptPositionDistribution, getDimensionScoreOverview } from '@/api/portraitManagement/portraitManagement'
const props = defineProps({
  queryParams: {
    type: Object,
    default: () => ({})
  }
})

const radarData = ref([
 
])



const teamMembers = ref([])

const teamColumns = [
  { label: '小组', prop: 'deptName' },
  { label: '员工数量', prop: 'employeeCount' },
  { label: '党员数量', prop: 'partyMemberCount' },
  { label: '平均年龄', prop: 'avgAge' },
  { label: '平均工龄', prop: 'avgWorkYears' },
  { label: '职业资格等级证书数量', prop: 'qualificationLevel' },
  { label: '平均开机年龄', prop: 'avgXrayOperatorYears' },
  { label: '综合得分', prop: 'totalScore' }
]

const fetchTeamData = async (params) => {
  try {
    const res = await countStationTeamStats(params)
    if (res.code === 200 && res.data) {
      teamMembers.value = res.data
    }
  } catch (error) {
    console.error('获取部门成员列表失败', error)
  }
}


const genderData = ref([
  
])

const nationData = ref([
 
])

const politicalData = ref([
  
])

const skillData = ref([
  
])

const operateData = ref([
  
])

const postData = ref([
  
])


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
  fetchTeamData(params)
  fetchMemberDistribution(params)
  fetchPositionDistribution(params)
  fetchRadarData(params)
}

watch(() => props.queryParams, (newParams) => {
  fetchData(newParams)
}, { deep: 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>