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 } from 'vue'
import ProfileMembers from '../../components/ProfileMembers.vue'
import ProfileBasicDistribution from '../../components/ProfileBasicDistribution.vue'
import ProfilePositionDistribution from '../../components/ProfilePositionDistribution.vue'



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

const teamColumns = [
  { label: '部门', prop: 'dept' },
  { label: '员工数量', prop: 'empCount' },
  { label: '党员数量', prop: 'partyCount' },
  { label: '平均年龄', prop: 'avgAge' },
  { label: '平均工龄', prop: 'avgWorkYears' },
  { label: '职业资格证书等级', prop: 'certLevel' },
  { label: '平均升级年龄', prop: 'avgUpgradeAge' },
  { label: '综合得分', prop: 'totalScore' }
]

const teamData = ref([
  { dept: '旅检一部', empCount: '800', partyCount: '7', avgAge: '25', avgWorkYears: '3', certLevel: '16', avgUpgradeAge: '3', totalScore: '90' },
  { dept: '旅检二部', empCount: '756', partyCount: '2', avgAge: '28', avgWorkYears: '8', certLevel: '18', avgUpgradeAge: '5', totalScore: '88' },
  { dept: '旅检三部', empCount: '708', partyCount: '7', avgAge: '25', avgWorkYears: '3', certLevel: '23', avgUpgradeAge: '3', totalScore: '86' }
])

const genderData = [
  { value: 650, name: '女', itemStyle: { color: '#ff9f9f' } },
  { value: 750, name: '男', itemStyle: { color: '#7effc4' } }
]

const nationData = [
  { value: 615, name: '汉族', itemStyle: { color: '#7effc4' } },
  { value: 484, name: '回族', itemStyle: { color: '#4da6ff' } },
  { value: 156, name: '其他', itemStyle: { color: '#ffd93d' } }
]

const politicalData = [
  { value: 410, name: '群众', itemStyle: { color: '#ffd93d' } },
  { value: 540, name: '共青团员', itemStyle: { color: '#4da6ff' } },
  { value: 270, name: '中共党员', itemStyle: { color: '#ff6b6b' } },
  { value: 138, name: '预备党员', itemStyle: { color: '#7effc4' } }
]

const skillData = {
  categories: ['等级1', '等级2', '等级3', '等级4', '等级5'],
  values: [450, 650, 900, 750, 550],
  colors: ['#ff6b9d', '#ff6b6b']
}

const operateData = {
  categories: ['0-3', '4-7', '8-11', '12-15', '16-19'],
  values: [650, 500, 400, 300, 550],
  colors: ['#a55eea', '#bd03fb']
}

const postData = {
  categories: ['仿伪', '炸探', '人身', '开包', '开检后', '开机'],
  values: [450, 600, 180, 150, 650, 550],
  colors: ['#ffd93d', '#ffd9b3']
}

</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>