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: 'personName' },
  { label: '年龄', prop: 'age' },
  { label: '司龄', prop: 'workYears' },
  { label: '性别', prop: 'sex' },
  { label: '民族', prop: 'nation' },
  { label: '政治面貌', prop: 'politicalStatus' },
  { label: '职务', prop: 'roleNames' },
  { label: '职业技能等级', prop: 'qualificationLevel' },
  { label: '开机年限', prop: 'xrayOperatorYears' },
  { 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>