chongqing-web/src/views/portraitManagement/deptProfile/index.vue

<template>
  <div class="group-profile-page">
    <Page title="安检人事管理可视化大屏" :tabs="['能力画像', '运行数据']" @tab-change="handleTabChange">
      <SearchBar v-model:visible="searchVisible" ref="searchBar" @search="handleSearch" 
        :deptType="'BRIGADE'" />
      <PentagonGroup :items="pentagonItems" />
      <Profile v-if="activeTab === 0" :query-params="queryParams" />
      <RunData v-else :query-params="queryParams" />
    </Page>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Page from '../components/page.vue'
import SearchBar from '../components/SearchBar.vue'
import Profile from './component/profile.vue'
import RunData from './component/runData.vue'
import PentagonGroup from '../components/PentagonGroup.vue'
import { countDeptTeamStats } from '@/api/portraitManagement/portraitManagement'
import zongheIcon from '@/assets/icons/portrait/zonghe_icon.png'
import renyuanIcon from '@/assets/icons/portrait/renyuan_icon.png'
import zu02Icon from '@/assets/icons/portrait/zu02_icon.png'
import nianlingIcon from '@/assets/icons/portrait/nianling_icon.png'
import silingIcon from '@/assets/icons/portrait/siling_icon.png'

const activeTab = ref(0)
const searchVisible = ref(false)
const queryParams = ref({})

const pentagonItems = ref([])
const invokerCountDeptTeamStats = (params) => {
  const copyParams = {
    deptId: params.deptId,

  }
  countDeptTeamStats(copyParams).then(res => {
    if (res.code === 200 && res.data) {
      const result = res.data
      pentagonItems.value = [
        {
          value: result.totalScore,
          label: '综合得分',
          iconPath: zongheIcon,
          cornerRadius: 20,
          vertices: {
            topLeft: { x: 0, y: 0 },
            topRight: { x: 300, y: 0 },
            bottomRight: { x: 260, y: 200 },
            bottomLeft: { x: 0, y: 200 }
          },
          cardContentStyle: {
            gap: '100px'
          },
          edgeGradients: {
            top: { start: '#0f46fa', end: 'transparent' },
            right: { start: 'transparent', end: '#9903C1' },
            bottom: { start: '#9903C1', end: 'transparent' },
            left: { start: 'transparent', end: '#0f46fa' }
          },
          bgGradientStart: 'rgba(33,33,58,0.95)',
          bgGradientEnd: 'rgba(15,70,250,0.2)'
        },
        {
          value: result.employeeCount,
          label: '人员数量',
          iconPath: renyuanIcon,
          cornerRadius: 20,
          vertices: {
            topLeft: { x: 10, y: 0 },
            topRight: { x: 300, y: 0 },
            bottomRight: { x: 260, y: 200 },
            bottomLeft: { x: -30, y: 200 }
          }, cardContentStyle: {
            gap: '100px'
          },
          edgeGradients: {
            top: { start: '#0f46fa', end: 'transparent' },
            right: { start: 'transparent', end: '#9903C1' },
            bottom: { start: '#9903C1', end: 'transparent' },
            left: { start: 'transparent', end: '#0f46fa' }
          },
          bgGradientStart: 'rgba(33,33,58,0.95)',
          bgGradientEnd: 'rgba(15,70,250,0.2)'
        },
        {
          value: result.deptName,
          label: '',
          iconPath: zu02Icon,
          iconStyle: {
            width: '250px',
            height: '250px'
          },
          valueStyle: {
            fontSize: '48px',
            bottom: '26px',
            position: 'relative'
          },
          vertical: true,
          cornerRadius: 20,
          vertices: {
            topLeft: { x: 10, y: 0 },
            topRight: { x: 280, y: 0 },
            bottomRight: { x: 320, y: 200 },
            bottomLeft: { x: -30, y: 200 }
          },
          cardContentStyle: {
            gap: '0px',
            position: 'relative',
            bottom: '65px'
          },
          edgeGradients: {
            top: { start: '#0f46fa', end: 'transparent' },
            right: { start: 'transparent', end: '#9903C1' },
            bottom: { start: '#9903C1', end: 'transparent' },
            left: { start: 'transparent', end: '#0f46fa' }
          },
          bgGradientStart: 'rgba(33,33,58,0.95)',
          bgGradientEnd: 'rgba(15,70,250,0.2)'
        },
        {
          value: result.avgAge,
          label: '平均年龄',
          iconPath: nianlingIcon,
          cornerRadius: 20,
          vertices: {
            topLeft: { x: -10, y: 0 },
            topRight: { x: 290, y: 0 },
            bottomRight: { x: 330, y: 200 },
            bottomLeft: { x: 30, y: 200 }
          },
          cardContentStyle: {
            gap: '100px'
          },
          edgeGradients: {
            top: { start: '#0f46fa', end: 'transparent' },
            right: { start: 'transparent', end: '#9903C1' },
            bottom: { start: '#9903C1', end: 'transparent' },
            left: { start: 'transparent', end: '#0f46fa' }
          },
          bgGradientStart: 'rgba(33,33,58,0.95)',
          bgGradientEnd: 'rgba(15,70,250,0.2)'
        },
        {
          value: result.avgWorkYears,
          label: '平均司龄',
          iconPath: silingIcon,
          cornerRadius: 20,
          vertices: {
            topLeft: { x: 0, y: 0 },
            topRight: { x: 300, y: 0 },
            bottomRight: { x: 300, y: 200 },
            bottomLeft: { x: 40, y: 200 }
          },
          cardContentStyle: {
            gap: '100px'
          },
          edgeGradients: {
            top: { start: '#0f46fa', end: 'transparent' },
            right: { start: 'transparent', end: '#9903C1' },
            bottom: { start: '#9903C1', end: 'transparent' },
            left: { start: 'transparent', end: '#0f46fa' }
          },
          bgGradientStart: 'rgba(33,33,58,0.95)',
          bgGradientEnd: 'rgba(15,70,250,0.2)'
        }
      ]
    }
  })
}





const handleSearch = (params) => {
  queryParams.value = params
  invokerCountDeptTeamStats(params)
}

const handleTabChange = (index) => {
  activeTab.value = index
}

const searchBar = ref(null)
onMounted(() => {

  const defParams = Object.assign({ deptId: '' }, searchBar.value.getDefQuery())
  queryParams.value = defParams

})

</script>

<style lang="scss" scoped>
.group-profile-page {
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
}
</style>