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

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

  </div>
</template>

<script setup>
import { ref, computed } 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 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 = computed(() => [
  {
    value: '88',
    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: '10',
    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: groupName.value,
    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: '28',
    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: '3.5',
    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 groupName = ref('')
const handleSearch = (params) => {
  queryParams.value = { startDate: params.beginTime, endDate: params.endTime, groupId: params.groupId}
  groupName.value = params.groupName
}

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

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