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

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

    <div class="station-content">
  

      <div class="content-row">
        <InfoCard title="团队成员">
          <RollingTable 
            :columns="teamColumns"
            :data="teamData"
          />
        </InfoCard>
         <InfoCard title="成员基本情况分布">
          <div class="member-distribution">
            <div class="dist-item">
              <h4>性别分布</h4>
              <div ref="genderDistChartRef" class="dist-chart"></div>
            </div>
            <div class="dist-item">
              <h4>民族分布</h4>
              <div ref="nationDistChartRef" class="dist-chart"></div>
            </div>
            <div class="dist-item">
              <h4>政治面貌分布</h4>
              <div ref="politicalDistChartRef" class="dist-chart"></div>
            </div>
          </div>
        </InfoCard>
      </div>

      

      <div class="content-row" style="width: 50%;">
        <InfoCard title="成员职位情况分布">
          <div class="position-distribution">
            <div class="dist-item">
              <h4>职业资格等级分布</h4>
              <div ref="qualificationLevelChartRef" class="dist-chart"></div>
            </div>
            <div class="dist-item">
              <h4>开机年限分布</h4>
              <div ref="experienceYearsChartRef" class="dist-chart"></div>
            </div>
            <div class="dist-item">
              <h4>岗位资质分布</h4>
              <div ref="positionQualificationChartRef" class="dist-chart"></div>
            </div>
          </div>
        </InfoCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import InfoCard from '../../components/card.vue'
import RollingTable from '../../components/rollingTable.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 genderDistChartRef = ref(null)
let genderDistChart = null
const nationDistChartRef = ref(null)
let nationDistChart = null
const politicalDistChartRef = ref(null)
let politicalDistChart = null
const qualificationLevelChartRef = ref(null)
let qualificationLevelChart = null
const experienceYearsChartRef = ref(null)
let experienceYearsChart = null
const positionQualificationChartRef = ref(null)
let positionQualificationChart = null

const initGenderDistChart = () => {
  if (!genderDistChartRef.value) return
  genderDistChart = echarts.init(genderDistChartRef.value)
  const option = {
    series: [{
      type: 'pie',
      radius: ['50%', '70%'],
      data: [
        { value: 650, name: '女', itemStyle: { color: '#ff9f9f' } },
        { value: 750, name: '男', itemStyle: { color: '#7effc4' } }
      ],
      label: { show: true, color: '#fff', fontSize: 11 },
      labelLine: { show: true }
    }]
  }
  genderDistChart.setOption(option)
}

const initNationDistChart = () => {
  if (!nationDistChartRef.value) return
  nationDistChart = echarts.init(nationDistChartRef.value)
  const option = {
    series: [{
      type: 'pie',
      radius: ['50%', '70%'],
      data: [
        { value: 615, name: '汉族', itemStyle: { color: '#7effc4' } },
        { value: 484, name: '回族', itemStyle: { color: '#4da6ff' } },
        { value: 156, name: '其他', itemStyle: { color: '#ffd93d' } }
      ],
      label: { show: true, color: '#fff', fontSize: 11 },
      labelLine: { show: true }
    }]
  }
  nationDistChart.setOption(option)
}

const initPoliticalDistChart = () => {
  if (!politicalDistChartRef.value) return
  politicalDistChart = echarts.init(politicalDistChartRef.value)
  const option = {
    series: [{
      type: 'pie',
      radius: ['50%', '70%'],
      data: [
        { value: 410, name: '群众', itemStyle: { color: '#ffd93d' } },
        { value: 540, name: '共青团员', itemStyle: { color: '#4da6ff' } },
        { value: 270, name: '中共党员', itemStyle: { color: '#ff6b6b' } },
        { value: 138, name: '预备党员', itemStyle: { color: '#7effc4' } }
      ],
      label: { show: true, color: '#fff', fontSize: 11 },
      labelLine: { show: true }
    }]
  }
  politicalDistChart.setOption(option)
}

const initQualificationLevelChart = () => {
  if (!qualificationLevelChartRef.value) return
  qualificationLevelChart = echarts.init(qualificationLevelChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(13,80,122,0.95)',
      borderColor: '#70CFE7',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['人数'],
      textStyle: { color: '#a0c4ff' },
      top: 0
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['等级1', '等级2', '等级3', '等级4', '等级5'],
      axisLabel: { color: '#a0c4ff', fontSize: 10 },
      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#a0c4ff' },
      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } },
      splitLine: { lineStyle: { color: 'rgba(15,70,250,0.2)' } }
    },
    series: [{
      name: '人数',
      type: 'bar',
      data: [450, 650, 900, 750, 550],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ff6b9d' },
          { offset: 1, color: '#ff6b6b' }
        ])
      },
      barWidth: '50%'
    }]
  }
  qualificationLevelChart.setOption(option)
}

const initExperienceYearsChart = () => {
  if (!experienceYearsChartRef.value) return
  experienceYearsChart = echarts.init(experienceYearsChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(13,80,122,0.95)',
      borderColor: '#70CFE7',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['人数'],
      textStyle: { color: '#a0c4ff' },
      top: 0
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['0-3', '4-7', '8-11', '12-15', '16-19'],
      axisLabel: { color: '#a0c4ff', fontSize: 10 },
      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#a0c4ff' },
      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } },
      splitLine: { lineStyle: { color: 'rgba(15,70,250,0.2)' } }
    },
    series: [{
      name: '人数',
      type: 'bar',
      data: [650, 500, 400, 300, 550],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#a55eea' },
          { offset: 1, color: '#bd03fb' }
        ])
      },
      barWidth: '50%'
    }]
  }
  experienceYearsChart.setOption(option)
}

const initPositionQualificationChart = () => {
  if (!positionQualificationChartRef.value) return
  positionQualificationChart = echarts.init(positionQualificationChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(13,80,122,0.95)',
      borderColor: '#70CFE7',
      textStyle: { color: '#fff' }
    },
    legend: {
      data: ['人数'],
      textStyle: { color: '#a0c4ff' },
      top: 0
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['仿伪', '炸探', '人身', '开包', '开检后', '开机'],
      axisLabel: { color: '#a0c4ff', fontSize: 10 },
      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#a0c4ff' },
      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } },
      splitLine: { lineStyle: { color: 'rgba(15,70,250,0.2)' } }
    },
    series: [{
      name: '人数',
      type: 'bar',
      data: [450, 600, 180, 150, 650, 550],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ffd93d' },
          { offset: 1, color: '#ffd9b3' }
        ])
      },
      barWidth: '50%'
    }]
  }
  positionQualificationChart.setOption(option)
}

const handleResize = () => {
  if (genderDistChart) genderDistChart.resize()
  if (nationDistChart) nationDistChart.resize()
  if (politicalDistChart) politicalDistChart.resize()
  if (qualificationLevelChart) qualificationLevelChart.resize()
  if (experienceYearsChart) experienceYearsChart.resize()
  if (positionQualificationChart) positionQualificationChart.resize()
}

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      initGenderDistChart()
      initNationDistChart()
      initPoliticalDistChart()
      initQualificationLevelChart()
      initExperienceYearsChart()
      initPositionQualificationChart()
      window.addEventListener('resize', handleResize)
    }, 100)
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (genderDistChart) genderDistChart.dispose()
  if (nationDistChart) nationDistChart.dispose()
  if (politicalDistChart) politicalDistChart.dispose()
  if (qualificationLevelChart) qualificationLevelChart.dispose()
  if (experienceYearsChart) experienceYearsChart.dispose()
  if (positionQualificationChart) positionQualificationChart.dispose()
})
</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;
    }
  }

  .member-distribution,
  .position-distribution {
    display: flex;
    gap: 30px;
    justify-content: space-around;
    flex-wrap: wrap;

    .dist-item {
      flex: 1;
      min-width: 200px;
      text-align: center;

      h4 {
        color: #a0c4ff;
        margin-bottom: 15px;
        font-size: 16px;
      }

      .dist-chart {
        width: 100%;
        height: 200px;
      }
    }
  }

  .position-distribution {
    .dist-chart {
      height: 280px;
    }
  }
}
</style>