Merge branch 'employeeScreen' of https://git.sundot.cn/chongqing/chongqing-web into employeeScreen

src/views/portraitManagement/components/PentagonGroup.vue

@@ -1,11 +1,6 @@
 <template>
-  <div class="pentagon-group">
-    <div
-      v-for="(item, index) in items"
-      :key="index"
-      class="pentagon-item"
-      :class="{ 'middle': item.isMiddle }"
-    >
+  <div class="pentagon-group" :class="{ 'vertical': vertical }">
+    <div v-for="(item, index) in items" :key="index" class="pentagon-item">
       <svg class="pentagon-svg" viewBox="0 0 300 200" preserveAspectRatio="none">
         <defs>
           <linearGradient :id="`bgGradient-${index}`" x1="0%" y1="0%" x2="100%" y2="100%">
@@ -25,25 +20,21 @@
             </feMerge>
           </filter>
         </defs>
-        <path
-          :d="getQuadPath(item.vertices, item.isMiddle, index)"
-          :fill="`url(#bgGradient-${index})`"
-        />
-        <path
-          :d="getQuadPath(item.vertices, item.isMiddle, index)"
-          fill="none"
-          :stroke="`url(#borderGradient-${index})`"
-          stroke-width="3"
-          :filter="`url(#glow-${index})`"
-        />
+        <path :d="getQuadPath(item.vertices, item.cornerRadius, index)" :fill="`url(#bgGradient-${index})`" />
+        <path :d="getQuadPath(item.vertices, item.cornerRadius, index)" fill="none"
+          :stroke="`url(#borderGradient-${index})`" stroke-width="1.5" :filter="`url(#glow-${index})`" />
       </svg>
-      <div class="card-content">
-        <div class="icon-wrapper" :class="{ 'large': item.isMiddle }">
-          <span v-if="item.icon" class="icon-emoji">{{ item.icon }}</span>
+      <div class="card-content" 
+        :class="{ 'vertical': item.vertical || vertical }"
+        :style="item.cardContentStyle">
+        <div class="icon-wrapper" :style="item.iconStyle">
+          <img v-if="item.iconPath" :src="item.iconPath" class="icon-image" :alt="item.label" />
+          <span v-else-if="item.icon" class="icon-emoji">{{ item.icon }}</span>
         </div>
-        <div class="text-wrapper">
-          <div class="value">{{ item.value }}</div>
+        <div class="content-wrapper">
+          <div class="value" :style="item.valueStyle">{{ item.value }}</div>
           <div class="label" v-if="item.label">{{ item.label }}</div>
+          <slot name="content" :item="item" v-if="$slots.content"></slot>
         </div>
       </div>
     </div>
@@ -55,55 +46,38 @@ const props = defineProps({
   items: {
     type: Array,
     default: () => []
+  },
+  vertical: {
+    type: Boolean,
+    default: false
   }
 })
 
-const getVertices = (vertices, isMiddle, index) => {
+const getVertices = (vertices, index) => {
   if (vertices) {
     return vertices
-  } else if (isMiddle) {
-    return {
-      topLeft: { x: 20, y: 0 },
-      topRight: { x: 280, y: 0 },
-      bottomRight: { x: 300, y: 200 },
-      bottomLeft: { x: 0, y: 200 }
-    }
-  } else {
-    if (index === 0) {
-      return {
-        topLeft: { x: 0, y: 0 },
-        topRight: { x: 300, y: 0 },
-        bottomRight: { x: 280, y: 200 },
-        bottomLeft: { x: 0, y: 200 }
-      }
-    } else if (index === 1) {
-      return {
-        topLeft: { x: 20, y: 0 },
-        topRight: { x: 320, y: 0 },
-        bottomRight: { x: 300, y: 200 },
-        bottomLeft: { x: 0, y: 200 }
-      }
-    } else if (index === 3) {
-      return {
-        topLeft: { x: -20, y: 0 },
-        topRight: { x: 300, y: 0 },
-        bottomRight: { x: 320, y: 200 },
-        bottomLeft: { x: 0, y: 200 }
-      }
-    } else {
-      return {
-        topLeft: { x: 20, y: 0 },
-        topRight: { x: 300, y: 0 },
-        bottomRight: { x: 300, y: 200 },
-        bottomLeft: { x: 40, y: 200 }
-      }
-    }
+  }
+  return {
+    topLeft: { x: 0, y: 0 },
+    topRight: { x: 300, y: 0 },
+    bottomRight: { x: 300, y: 200 },
+    bottomLeft: { x: 0, y: 200 }
   }
 }
 
-const getQuadPath = (vertices, isMiddle, index) => {
-  const v = getVertices(vertices, isMiddle, index)
-  return `M ${v.topLeft.x} ${v.topLeft.y} L ${v.topRight.x} ${v.topRight.y} L ${v.bottomRight.x} ${v.bottomRight.y} L ${v.bottomLeft.x} ${v.bottomLeft.y} Z`
+const getQuadPath = (vertices, cornerRadius, index) => {
+  const v = getVertices(vertices, index)
+  const r = cornerRadius || 0
+
+  return `M ${v.topLeft.x + r} ${v.topLeft.y} 
+          Q ${v.topLeft.x} ${v.topLeft.y} ${v.topLeft.x} ${v.topLeft.y + r}
+          L ${v.bottomLeft.x} ${v.bottomLeft.y - r}
+          Q ${v.bottomLeft.x} ${v.bottomLeft.y} ${v.bottomLeft.x + r} ${v.bottomLeft.y}
+          L ${v.bottomRight.x - r} ${v.bottomRight.y}
+          Q ${v.bottomRight.x} ${v.bottomRight.y} ${v.bottomRight.x} ${v.bottomRight.y - r}
+          L ${v.topRight.x} ${v.topRight.y + r}
+          Q ${v.topRight.x} ${v.topRight.y} ${v.topRight.x - r} ${v.topRight.y}
+          Z`
 }
 </script>
 
@@ -117,6 +91,10 @@ const getQuadPath = (vertices, isMiddle, index) => {
   position: relative;
   z-index: 10;
   width: 100%;
+
+  &.vertical {
+    flex-direction: column;
+  }
 }
 
 .pentagon-item {
@@ -128,34 +106,6 @@ const getQuadPath = (vertices, isMiddle, index) => {
   align-items: center;
   justify-content: center;
 
-  &.middle {
-    flex: 1.3;
-    height: 200px;
-    z-index: 5;
-    margin: 0 -5px;
-
-    .card-content {
-      flex-direction: column;
-
-      .icon-wrapper {
-        margin-right: 0;
-        margin-bottom: 15px;
-      }
-
-      .text-wrapper {
-        align-items: center;
-      }
-
-      .value {
-        font-size: 32px;
-      }
-
-      .label {
-        font-size: 18px;
-      }
-    }
-  }
-
   .pentagon-svg {
     position: absolute;
     width: 100%;
@@ -176,41 +126,45 @@ const getQuadPath = (vertices, isMiddle, index) => {
     padding: 15px 25px;
     gap: 15px;
 
+    &.vertical {
+      flex-direction: column;
+      text-align: center;
+    }
+
     .icon-wrapper {
       width: 50px;
       height: 50px;
       border-radius: 50%;
-      background: linear-gradient(135deg, #0f46fa, #bd03fb);
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 0 15px rgba(15, 70, 250, 0.5);
       flex-shrink: 0;
 
-      &.large {
-        width: 80px;
-        height: 80px;
+      .icon-image {
+        width: 100px;
+        height: 100px;
+        object-fit: contain;
       }
 
       .icon-emoji {
         font-size: 24px;
         line-height: 1;
-
-        .large & {
-          font-size: 36px;
-        }
       }
     }
 
-    .text-wrapper {
+    .content-wrapper {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
+      align-items: center;
+
+      .card-content.vertical & {
+        align-items: center;
+      }
     }
 
     .value {
       font-size: 40px;
-      font-weight: bold;
+     
       color: #fff;
       text-shadow: 0 0 12px rgba(15, 70, 250, 0.8);
       line-height: 1;

src/views/portraitManagement/groupProfile/component/profile.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-content-wrapper">
-    <PentagonGroup :items="pentagonItems" />
+  
 
     <div class="main-content">
       <div class="content-row">
@@ -145,7 +145,7 @@
 import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'
 import InfoCard from '../../components/card.vue'
-import PentagonGroup from '../../components/PentagonGroup.vue'
+
 
 const props = defineProps({
   queryParams: {
@@ -154,78 +154,7 @@ const props = defineProps({
   }
 })
 
-const pentagonItems = ref([
-  {
-    value: '88',
-    label: '综合得分',
-    icon: '🎖️',
-    isMiddle: false,
-    edgeGradients: {
-      top: { start: '#0f46fa', end: '#bd03fb' },
-      right: { start: '#bd03fb', end: '#7eff7e' },
-      bottom: { start: '#7eff7e', end: '#bd03fb' },
-      left: { start: '#bd03fb', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  },
-  {
-    value: '10',
-    label: '人员数量',
-    icon: '👥',
-    isMiddle: false,
-    edgeGradients: {
-      top: { start: '#bd03fb', end: '#0f46fa' },
-      right: { start: '#0f46fa', end: '#7eff7e' },
-      bottom: { start: '#7eff7e', end: '#bd03fb' },
-      left: { start: '#bd03fb', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(189,3,251,0.15)'
-  },
-  {
-    value: '周游波小组',
-    label: '',
-    icon: '👨‍👩‍👧‍👦',
-    isMiddle: true,
-    edgeGradients: {
-      top: { start: '#0f46fa', end: '#bd03fb' },
-      right: { start: '#bd03fb', end: '#7eff7e' },
-      bottom: { start: '#7eff7e', end: '#0f46fa' },
-      left: { start: '#0f46fa', end: '#bd03fb' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.98)',
-    bgGradientEnd: 'rgba(189,3,251,0.25)'
-  },
-  {
-    value: '28',
-    label: '平均年龄',
-    icon: '🎂',
-    isMiddle: false,
-    edgeGradients: {
-      top: { start: '#7eff7e', end: '#0f46fa' },
-      right: { start: '#0f46fa', end: '#bd03fb' },
-      bottom: { start: '#bd03fb', end: '#7eff7e' },
-      left: { start: '#7eff7e', end: '#0f46fa' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(126,255,126,0.15)'
-  },
-  {
-    value: '3.5',
-    label: '平均司龄',
-    icon: '📊',
-    isMiddle: false,
-    edgeGradients: {
-      top: { start: '#0f46fa', end: '#7eff7e' },
-      right: { start: '#7eff7e', end: '#bd03fb' },
-      bottom: { start: '#bd03fb', end: '#0f46fa' },
-      left: { start: '#0f46fa', end: '#7eff7e' }
-    },
-    bgGradientStart: 'rgba(33,33,58,0.95)',
-    bgGradientEnd: 'rgba(15,70,250,0.2)'
-  }
-])
+
 
 const radarData = ref([
   { name: '通道安全防控力', value: 86 },

src/views/portraitManagement/groupProfile/index.vue

@@ -2,6 +2,7 @@
   <div class="group-profile-page">
     <Page title="安检人事管理可视化大屏" :tabs="['能力画像', '运行数据']" @tab-change="handleTabChange">
       <SearchBar v-model:visible="searchVisible" @search="handleSearch" />
+      <PentagonGroup :items="pentagonItems" />
       <Profile v-if="activeTab === 0" :query-params="queryParams" />
       <RunData v-else />
     </Page>
@@ -15,11 +16,144 @@ 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 = ref([
+  {
+    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: '周游波小组',
+    label: '',
+    iconPath: zu02Icon,
+    iconStyle: {
+      width: '200px',
+      height: '200px'
+    },
+    valueStyle: {
+      fontSize: '48px'
+    },
+    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 handleSearch = (params) => {
   queryParams.value = params
 }

src/views/portraitManagement/stationProfile/component/profile.vue

@@ -0,0 +1,449 @@
+<template>
+  <div class="station-content-wrapper">
+  
+
+    <div class="station-content">
+  
+
+      <div class="content-row">
+        <InfoCard title="团队成员">
+          <div class="team-members-table">
+            <table>
+              <thead>
+                <tr>
+                  <th>部门</th>
+                  <th>员工数量</th>
+                  <th>党员数量</th>
+                  <th>平均年龄</th>
+                  <th>平均工龄</th>
+                  <th>职业资格证书等级</th>
+                  <th>平均升级年龄</th>
+                  <th>综合得分</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>旅检一部</td>
+                  <td>800</td>
+                  <td>7</td>
+                  <td>25</td>
+                  <td>3</td>
+                  <td>16</td>
+                  <td>3</td>
+                  <td>90</td>
+                </tr>
+                <tr>
+                  <td>旅检二部</td>
+                  <td>756</td>
+                  <td>2</td>
+                  <td>28</td>
+                  <td>8</td>
+                  <td>18</td>
+                  <td>5</td>
+                  <td>88</td>
+                </tr>
+                <tr>
+                  <td>旅检三部</td>
+                  <td>708</td>
+                  <td>7</td>
+                  <td>25</td>
+                  <td>3</td>
+                  <td>23</td>
+                  <td>3</td>
+                  <td>86</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </InfoCard>
+      </div>
+
+      <div class="content-row">
+        <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">
+        <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'
+
+
+
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+
+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;
+    }
+  }
+
+  .team-members-table {
+    width: 100%;
+    overflow-x: auto;
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      color: #fff;
+
+      th, td {
+        padding: 12px 15px;
+        text-align: center;
+        border: 1px solid rgba(15, 70, 250, 0.3);
+      }
+
+      th {
+        background: rgba(15, 70, 250, 0.2);
+        color: #a0c4ff;
+        font-weight: 600;
+      }
+
+      td {
+        background: rgba(33, 33, 58, 0.5);
+      }
+
+      tbody tr:hover td {
+        background: rgba(15, 70, 250, 0.3);
+      }
+    }
+  }
+
+  .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>

src/views/portraitManagement/stationProfile/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="station-profile-page">
+    <Page title="旅检部综合信息展示大屏" :tabs="['站点画像', '运行数据']" @tab-change="handleTabChange">
+      <SearchBar v-model:visible="searchVisible" @search="handleSearch" />
+      <PentagonGroup :items="pentagonItems" />
+      <Profile v-if="activeTab === 0" :query-params="queryParams" />
+      <RunData v-else :query-params="queryParams" />
+    </Page>
+  </div>
+</template>
+
+<script setup>
+import { ref } 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 zu02Icon from '@/assets/icons/portrait/zu02_icon.png'
+
+const activeTab = ref(0)
+const searchVisible = ref(false)
+const queryParams = ref({})
+
+const pentagonItems = ref([
+  {
+    value: '120',
+    label: '主班在岗｜旅检一部',
+    iconPath: zu02Icon,
+    vertical: true,
+    cornerRadius: 20,
+    vertices: {
+      topLeft: { x: 0, y: 0 },
+      topRight: { x: 320, y: 0 },
+      bottomRight: { x: 280, y: 200 },
+      bottomLeft: { x: 0, y: 200 }
+    },
+    cardContentStyle: {
+      gap: '10px'
+    },
+    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: '130',
+    label: '主班在岗｜旅检二部',
+    iconPath: zu02Icon,
+    vertical: true,
+    cornerRadius: 20,
+    vertices: {
+      topLeft: { x: 30, y: 0 },
+      topRight: { x: 300, y: 0 },
+      bottomRight: { x: 260, y: 200 },
+      bottomLeft: { x: -10, y: 200 }
+    },
+    cardContentStyle: {
+      gap: '10px'
+    },
+    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(189,3,251,0.15)'
+  },
+  {
+    value: '150',
+    label: '主班在岗｜旅检三部',
+    iconPath: zu02Icon,
+    vertical: true,
+    cornerRadius: 20,
+    vertices: {
+      topLeft: { x: 10, y: 0 },
+      topRight: { x: 270, y: 0 },
+      bottomRight: { x: 270, y: 200 },
+      bottomLeft: { x: -30, y: 200 }
+    },
+    cardContentStyle: {
+      gap: '10px'
+    },
+    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.98)',
+    bgGradientEnd: 'rgba(189,3,251,0.25)'
+  },
+  {
+    value: '80',
+    label: '备勤在岗｜旅检一部',
+    iconPath: zu02Icon,
+    vertical: true,
+    cornerRadius: 20,
+    vertices: {
+      topLeft: { x: -20, y: 0 },
+      topRight: { x: 300, y: 0 },
+      bottomRight: { x: 320, y: 200 },
+      bottomLeft: { x: 0, y: 200 }
+    },
+    cardContentStyle: {
+      gap: '10px'
+    },
+    edgeGradients: {
+      top: { start: '#7eff7e', end: 'transparent' },
+      right: { start: 'transparent', end: '#9903C1' },
+      bottom: { start: '#9903C1', end: 'transparent' },
+      left: { start: 'transparent', end: '#7eff7e' }
+    },
+    bgGradientStart: 'rgba(33,33,58,0.95)',
+    bgGradientEnd: 'rgba(126,255,126,0.15)'
+  },
+  {
+    value: '70',
+    label: '备勤在岗｜旅检二部',
+    iconPath: zu02Icon,
+    vertical: true,
+    cornerRadius: 20,
+    vertices: {
+      topLeft: { x: 20, y: 0 },
+      topRight: { x: 300, y: 0 },
+      bottomRight: { x: 300, y: 200 },
+      bottomLeft: { x: 40, y: 200 }
+    },
+    cardContentStyle: {
+      gap: '10px'
+    },
+    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: '65',
+    label: '备勤在岗｜旅检三部',
+    iconPath: zu02Icon,
+    vertical: true,
+    cornerRadius: 20,
+    vertices: {
+      topLeft: { x: 0, y: 0 },
+      topRight: { x: 300, y: 0 },
+      bottomRight: { x: 300, y: 200 },
+      bottomLeft: { x: 0, y: 200 }
+    },
+    cardContentStyle: {
+      gap: '10px'
+    },
+    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
+}
+
+const handleTabChange = (index) => {
+  activeTab.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.station-profile-page {
+  width: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+</style>