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

<template>
  <div class="station-content-wrapper">
  

    <div class="station-content">
      <div class="content-row">
        <ProfileMembers :columns="teamColumns" :data="teamData" />
        <ProfileBasicDistribution
          :chartData1="genderData"
          :chartData2="nationData"
          :chartData3="politicalData"
        />
      </div>
      <div class="content-row" style="width: 50%;">
        <ProfilePositionDistribution
          :chartData1="skillData"
          :chartData2="operateData"
          :chartData3="postData"
        />
      </div>
    </div>
  </div>
</template>

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



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

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 teamData = ref([])

const fetchTeamData = async (params) => {
  try {
    const res = await countStationTeamStats(params)
    if (res.code === 200 && res.data) {
      teamData.value = res.data
      console.log(teamData.value);
      
    }
  } 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 })) || []
    }
  } 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 fetchData = (params) => {
  if (!params.deptId && !params.groupId && !params.teamId) {
    return
  }
  fetchTeamData(params)
  fetchMemberDistribution(params)
  fetchPositionDistribution(params)
}

watch(() => props.queryParams, (newParams) => {
  
  fetchData(newParams)
}, { deep: true, immediate: true })

</script>

<style lang="scss" scoped>
.station-content-wrapper {
  .station-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>