feat: 完成人像管理模块的团队/部门画像页面开发

新增多个数据可视化组件，完善五边形组件样式，搭建部门和团队画像的完整页面框架，包含人员列表、各类统计图表和运行数据看板

src/views/portraitManagement/components/PentagonGroup.vue

@@ -28,7 +28,7 @@
         :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" />
+          <img v-if="item.iconPath" :src="item.iconPath" class="icon-image" :style="item.iconStyle" :alt="item.label" />
           <span v-else-if="item.icon" class="icon-emoji">{{ item.icon }}</span>
         </div>
         <div class="content-wrapper">

src/views/portraitManagement/components/ProfileBasicDistribution.vue

@@ -0,0 +1,144 @@
+<template>
+  <InfoCard title="成员基本情况分布">
+    <div class="basic-distribution">
+      <div class="distribution-item">
+        <div ref="genderChartRef" class="distribution-chart"></div>
+        <div class="distribution-label">性别分布</div>
+      </div>
+      <div class="distribution-item">
+        <div ref="nationChartRef" class="distribution-chart"></div>
+        <div class="distribution-label">民族分布</div>
+      </div>
+      <div class="distribution-item">
+        <div ref="politicalChartRef" class="distribution-chart"></div>
+        <div class="distribution-label">政治面貌分布</div>
+      </div>
+    </div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  },
+  chartData2: {
+    type: Array,
+    default: () => []
+  },
+  chartData3: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultGenderData = [
+  { value: 6, name: '女', itemStyle: { color: '#ff6b9d' } },
+  { value: 8, name: '男', itemStyle: { color: '#4da6ff' } }
+]
+
+const defaultNationData = [
+  { value: 1, name: '回族', itemStyle: { color: '#ff9f43' } },
+  { value: 8, name: '汉族', itemStyle: { color: '#4da6ff' } },
+  { value: 5, name: '其他', itemStyle: { color: '#a55eea' } }
+]
+
+const defaultPoliticalData = [
+  { value: 1, name: '党员', itemStyle: { color: '#ff6b6b' } },
+  { value: 2, name: '共青团员', itemStyle: { color: '#ffd93d' } },
+  { value: 5, name: '群众', itemStyle: { color: '#6bcb77' } },
+  { value: 6, name: '其他', itemStyle: { color: '#4d96ff' } }
+]
+
+const genderChartRef = ref(null)
+let genderChart = null
+const nationChartRef = ref(null)
+let nationChart = null
+const politicalChartRef = ref(null)
+let politicalChart = null
+
+const initPieChart = (ref, data) => {
+  if (!ref) return
+  const chart = echarts.init(ref)
+  const option = {
+    series: [{
+      type: 'pie',
+      radius: ['50%', '70%'],
+      data: data,
+      label: { show: true, color: '#fff', fontSize: 11 },
+      labelLine: { show: true }
+    }]
+  }
+  chart.setOption(option)
+  return chart
+}
+
+const initCharts = () => {
+  const genderData = props.chartData1.length > 0 ? props.chartData1 : defaultGenderData
+  const nationData = props.chartData2.length > 0 ? props.chartData2 : defaultNationData
+  const politicalData = props.chartData3.length > 0 ? props.chartData3 : defaultPoliticalData
+
+  genderChart = initPieChart(genderChartRef.value, genderData)
+  nationChart = initPieChart(nationChartRef.value, nationData)
+  politicalChart = initPieChart(politicalChartRef.value, politicalData)
+}
+
+const handleResize = () => {
+  if (genderChart) genderChart.resize()
+  if (nationChart) nationChart.resize()
+  if (politicalChart) politicalChart.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initCharts()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (genderChart) genderChart.dispose()
+  if (nationChart) nationChart.dispose()
+  if (politicalChart) politicalChart.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.basic-distribution {
+  display: flex;
+  justify-content: space-around;
+  align-items: stretch;
+  min-height: 280px;
+  gap: 15px;
+  padding: 10px 0;
+
+  .distribution-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+
+    .distribution-chart {
+      width: 100%;
+      height: 200px;
+    }
+
+    .distribution-label {
+      color: #a0c4ff;
+      font-size: 12px;
+      margin-top: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/portraitManagement/components/ProfileDailySeizedArea.vue

@@ -0,0 +1,184 @@
+<template>
+  <InfoCard title="每日查获数量（个人对比）">
+    <div ref="dailySeizedAreaRef" class="daily-chart"></div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  },
+  chartData2: {
+    type: Array,
+    default: () => []
+  },
+  chartData3: {
+    type: Array,
+    default: () => []
+  },
+  chartData4: {
+    type: Array,
+    default: () => []
+  },
+  chartData5: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultCategories = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+const defaultPersonA = [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
+const defaultPersonB = [220, 182, 191, 234, 290, 330, 310, 123, 144, 210, 182, 191]
+const defaultPersonC = [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410]
+const defaultPersonD = [320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330]
+const defaultPersonE = [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290]
+
+const dailySeizedAreaRef = ref(null)
+let dailySeizedArea = null
+
+const initChart = () => {
+  if (!dailySeizedAreaRef.value) return
+  dailySeizedArea = echarts.init(dailySeizedAreaRef.value)
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    },
+    legend: {
+      data: ['人员A', '人员B', '人员C', '人员D', '人员E'],
+      textStyle: { color: '#a0c4ff' },
+      top: 0
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: defaultCategories,
+      axisLabel: { color: '#a0c4ff' },
+      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: '人员A',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(77, 166, 255, 0.5)' },
+            { offset: 1, color: 'rgba(77, 166, 255, 0.1)' }
+          ])
+        },
+        itemStyle: { color: '#4da6ff' },
+        lineStyle: { color: '#4da6ff', width: 2 },
+        data: props.chartData1.length > 0 ? props.chartData1 : defaultPersonA
+      },
+      {
+        name: '人员B',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(189, 3, 251, 0.5)' },
+            { offset: 1, color: 'rgba(189, 3, 251, 0.1)' }
+          ])
+        },
+        itemStyle: { color: '#bd03fb' },
+        lineStyle: { color: '#bd03fb', width: 2 },
+        data: props.chartData2.length > 0 ? props.chartData2 : defaultPersonB
+      },
+      {
+        name: '人员C',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(126, 255, 126, 0.5)' },
+            { offset: 1, color: 'rgba(126, 255, 126, 0.1)' }
+          ])
+        },
+        itemStyle: { color: '#7eff7e' },
+        lineStyle: { color: '#7eff7e', width: 2 },
+        data: props.chartData3.length > 0 ? props.chartData3 : defaultPersonC
+      },
+      {
+        name: '人员D',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(255, 217, 62, 0.5)' },
+            { offset: 1, color: 'rgba(255, 217, 62, 0.1)' }
+          ])
+        },
+        itemStyle: { color: '#ffd93e' },
+        lineStyle: { color: '#ffd93e', width: 2 },
+        data: props.chartData4.length > 0 ? props.chartData4 : defaultPersonD
+      },
+      {
+        name: '人员E',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(126, 196, 255, 0.5)' },
+            { offset: 1, color: 'rgba(126, 196, 255, 0.1)' }
+          ])
+        },
+        itemStyle: { color: '#7ec4ff' },
+        lineStyle: { color: '#7ec4ff', width: 2 },
+        data: props.chartData5.length > 0 ? props.chartData5 : defaultPersonE
+      }
+    ]
+  }
+  dailySeizedArea.setOption(option)
+}
+
+const handleResize = () => {
+  if (dailySeizedArea) dailySeizedArea.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (dailySeizedArea) dailySeizedArea.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.daily-chart {
+  width: 100%;
+  height: 320px;
+}
+</style>

src/views/portraitManagement/components/ProfileDailySeizedBar.vue

@@ -0,0 +1,103 @@
+<template>
+  <InfoCard title="每日查获数量（总表）">
+    <div ref="dailySeizedBarRef" class="daily-bar-chart"></div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultCategories = ['T3国内出发（4层）', 'T3（8层出发）', 'T3国际出发', 'T3国际转国内', '旅检A区', 'T3要客服务区东', 'T3要客服务区西', 'T1要客服务区东', 'T2要客服务区东', '旅检B区', '重检C区']
+const defaultData = [120, 200, 150, 80, 70, 110, 130, 90, 160, 140, 180]
+
+const dailySeizedBarRef = ref(null)
+let dailySeizedBar = null
+
+const initChart = () => {
+  if (!dailySeizedBarRef.value) return
+  dailySeizedBar = echarts.init(dailySeizedBarRef.value)
+  const data = props.chartData1.length > 0 ? props.chartData1 : defaultData
+  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: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: defaultCategories,
+      axisLabel: {
+        color: '#a0c4ff',
+        rotate: 30,
+        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: data,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#bd03fb' },
+          { offset: 1, color: '#0f46fa' }
+        ])
+      },
+      barWidth: '40%'
+    }]
+  }
+  dailySeizedBar.setOption(option)
+}
+
+const handleResize = () => {
+  if (dailySeizedBar) dailySeizedBar.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (dailySeizedBar) dailySeizedBar.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.daily-bar-chart {
+  width: 100%;
+  height: 380px;
+}
+</style>

src/views/portraitManagement/components/ProfileDailySeizedLine.vue

@@ -0,0 +1,101 @@
+<template>
+  <InfoCard title="每日查获数量（总表）">
+    <div ref="dailySeizedLineRef" class="daily-chart"></div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultData = [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
+const defaultCategories = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+
+const dailySeizedLineRef = ref(null)
+let dailySeizedLine = null
+
+const initChart = () => {
+  if (!dailySeizedLineRef.value) return
+  dailySeizedLine = echarts.init(dailySeizedLineRef.value)
+  const data = props.chartData1.length > 0 ? props.chartData1 : defaultData
+  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: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: defaultCategories,
+      axisLabel: { color: '#a0c4ff' },
+      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: 'line',
+      smooth: true,
+      data: data,
+      itemStyle: { color: '#bd03fb' },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(189,3,251,0.3)' },
+          { offset: 1, color: 'rgba(189,3,251,0.05)' }
+        ])
+      }
+    }]
+  }
+  dailySeizedLine.setOption(option)
+}
+
+const handleResize = () => {
+  if (dailySeizedLine) dailySeizedLine.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (dailySeizedLine) dailySeizedLine.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.daily-chart {
+  width: 100%;
+  height: 320px;
+}
+</style>

src/views/portraitManagement/components/ProfileMembers.vue

@@ -0,0 +1,43 @@
+<template>
+  <InfoCard title="团队成员">
+    <div class="table-container">
+      <RollingTable :columns="columns" :data="data" :duration="20" />
+    </div>
+  </InfoCard>
+</template>
+
+<script setup>
+import InfoCard from './card.vue'
+import RollingTable from './rollingTable.vue'
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  data: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.table-container {
+  max-height: 400px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(15, 70, 250, 0.1);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(15, 70, 250, 0.5);
+    border-radius: 3px;
+  }
+}
+</style>

src/views/portraitManagement/components/ProfilePassRate.vue

@@ -0,0 +1,127 @@
+<template>
+  <InfoCard title="每日通道过检率">
+    <div ref="passRateChartRef" class="pass-rate-chart"></div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  },
+  chartData2: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultHours = Array.from({ length: 24 }, (_, i) => `${i.toString().padStart(2, '0')}:00`)
+const defaultPassData = [370, 352, 330, 387, 426, 342, 325, 384, 445, 407, 382, 401, 380, 464, 342, 443, 305, 394, 334, 430, 364, 362, 400, 420]
+const defaultLineData = [4.5, 5, 4, 6, 7, 5, 4, 6, 8, 7, 6, 7, 6, 8, 5, 7, 4, 6, 5, 7, 6, 6, 6.5, 7]
+
+const passRateChartRef = ref(null)
+let passRateChart = null
+
+const initChart = () => {
+  if (!passRateChartRef.value) return
+  passRateChart = echarts.init(passRateChartRef.value)
+
+  const passData = props.chartData1.length > 0 ? props.chartData1 : defaultPassData
+  const lineData = props.chartData2.length > 0 ? props.chartData2 : defaultLineData
+
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: defaultHours,
+      axisLabel: { color: '#a0c4ff', fontSize: 10 },
+      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '过检率',
+        position: 'left',
+        max: 8,
+        axisLabel: { color: '#a0c4ff', fontSize: 10 },
+        axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } },
+        splitLine: { lineStyle: { color: 'rgba(15,70,250,0.2)' } }
+      },
+      {
+        type: 'value',
+        name: '数量',
+        position: 'right',
+        max: 5000,
+        axisLabel: { color: '#a0c4ff', fontSize: 10 },
+        axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } },
+        splitLine: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: '过检人数',
+        type: 'bar',
+        yAxisIndex: 1,
+        data: passData,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#ffd93d' },
+            { offset: 1, color: '#ff9f43' }
+          ])
+        },
+        barWidth: '40%'
+      },
+      {
+        name: '过检率',
+        type: 'line',
+        yAxisIndex: 0,
+        data: lineData,
+        smooth: true,
+        itemStyle: { color: '#bd03fb' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(189,3,251,0.3)' },
+            { offset: 1, color: 'rgba(189,3,251,0.05)' }
+          ])
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(13,80,122,0.95)',
+      borderColor: '#70CFE7',
+      textStyle: { color: '#fff' }
+    }
+  }
+  passRateChart.setOption(option)
+}
+
+const handleResize = () => {
+  if (passRateChart) passRateChart.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (passRateChart) passRateChart.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.pass-rate-chart {
+  width: 100%;
+  height: 320px;
+}
+</style>

src/views/portraitManagement/components/ProfilePositionDistribution.vue

@@ -0,0 +1,160 @@
+<template>
+  <InfoCard title="成员职位情况分布">
+    <div class="position-distribution">
+      <div class="distribution-item">
+        <div ref="skillChartRef" class="distribution-chart"></div>
+        <div class="distribution-label">职业资格等级分布</div>
+      </div>
+      <div class="distribution-item">
+        <div ref="operateChartRef" class="distribution-chart"></div>
+        <div class="distribution-label">开机年限分布</div>
+      </div>
+      <div class="distribution-item">
+        <div ref="postChartRef" class="distribution-chart"></div>
+        <div class="distribution-label">岗位资质分布</div>
+      </div>
+    </div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  },
+  chartData2: {
+    type: Array,
+    default: () => []
+  },
+  chartData3: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultSkillData = {
+  categories: ['等级1', '等级2', '等级3', '等级4', '等级5'],
+  values: [3, 5, 7, 8, 4],
+  colors: ['#4da6ff', '#0f46fa']
+}
+
+const defaultOperateData = {
+  categories: ['0-3', '4-7', '8-11', '12-15', '15-18'],
+  values: [4, 2, 3, 5, 8],
+  colors: ['#6bcb77', '#2ecc71']
+}
+
+const defaultPostData = {
+  categories: ['前传', '人身', '验证', '开包', '开机'],
+  values: [4, 5, 6, 7, 8],
+  colors: ['#ff6b6b', '#ee5a24']
+}
+
+const skillChartRef = ref(null)
+let skillChart = null
+const operateChartRef = ref(null)
+let operateChart = null
+const postChartRef = ref(null)
+let postChart = null
+
+const initBarChart = (ref, chartData) => {
+  if (!ref) return
+  const chart = echarts.init(ref)
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: chartData.categories,
+      axisLabel: { color: '#a0c4ff', fontSize: 10 },
+      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: { color: '#a0c4ff', fontSize: 10 },
+      axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } },
+      splitLine: { lineStyle: { color: 'rgba(15,70,250,0.2)' } }
+    },
+    series: [{
+      type: 'bar',
+      data: chartData.values,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: chartData.colors[0] },
+          { offset: 1, color: chartData.colors[1] }
+        ])
+      },
+      barWidth: '50%'
+    }]
+  }
+  chart.setOption(option)
+  return chart
+}
+
+const initCharts = () => {
+  const skillData = props.chartData1.length > 0 ? props.chartData1 : defaultSkillData
+  const operateData = props.chartData2.length > 0 ? props.chartData2 : defaultOperateData
+  const postData = props.chartData3.length > 0 ? props.chartData3 : defaultPostData
+
+  skillChart = initBarChart(skillChartRef.value, skillData)
+  operateChart = initBarChart(operateChartRef.value, operateData)
+  postChart = initBarChart(postChartRef.value, postData)
+}
+
+const handleResize = () => {
+  if (skillChart) skillChart.resize()
+  if (operateChart) operateChart.resize()
+  if (postChart) postChart.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initCharts()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (skillChart) skillChart.dispose()
+  if (operateChart) operateChart.dispose()
+  if (postChart) postChart.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.position-distribution {
+  display: flex;
+  justify-content: space-around;
+  align-items: stretch;
+  min-height: 280px;
+  gap: 15px;
+  padding: 10px 0;
+
+  .distribution-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+
+    .distribution-chart {
+      width: 100%;
+      height: 200px;
+    }
+
+    .distribution-label {
+      color: #a0c4ff;
+      font-size: 12px;
+      margin-top: 10px;
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/portraitManagement/components/ProfileRadar.vue

@@ -0,0 +1,253 @@
+<template>
+  <InfoCard title="七维得分一览">
+    <div class="radar-section">
+      <div ref="radarChartRef" class="radar-chart"></div>
+      <div class="radar-list">
+        <div class="radar-item" v-for="(item, index) in computedRadarData" :key="index">
+          <span class="item-label">{{ item.name }}</span>
+          <div class="progress-row">
+            <div class="progress-bar">
+              <div class="progress-fill" :style="{ width: item.value + '%', background: `linear-gradient(to right, transparent, ${item.color})` }">
+                <span class="progress-end"></span>
+              </div>
+            </div>
+            <span class="item-value">{{ item.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  },
+  chartData2: {
+    type: Array,
+    default: () => []
+  },
+  chartData3: {
+    type: Array,
+    default: () => []
+  },
+  chartData4: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultRadarData = [
+  { name: '通道安全防控力', value: 86, color: '#00e5ff' },
+  { name: '通道安全防控力', value: 90, color: '#00e5ff' },
+  { name: '通道安全防控力', value: 72, color: '#ff4757' },
+  { name: '通道安全防控力', value: 68, color: '#ff4757' },
+  { name: '通道安全防控力', value: 78, color: '#3742fa' },
+  { name: '通道安全防控力', value: 80, color: '#3742fa' },
+  { name: '通道协同作战能力', value: 72, color: '#ff4757' }
+]
+
+const defaultIndicators = [
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道协同作战能力', max: 100 }
+]
+
+const defaultSeries1 = [86, 90, 72, 68, 78, 80, 72]
+const defaultSeries2 = [80, 85, 65, 60, 72, 75, 68]
+
+const computedRadarData = computed(() => {
+  return props.chartData1.length > 0 ? props.chartData1 : defaultRadarData
+})
+
+const radarChartRef = ref(null)
+let radarChart = null
+
+const initRadarChart = () => {
+  if (!radarChartRef.value) return
+
+  radarChart = echarts.init(radarChartRef.value)
+
+  const indicators = props.chartData2.length > 0 ? props.chartData2 : defaultIndicators
+  const series1 = props.chartData3.length > 0 ? props.chartData3 : defaultSeries1
+  const series2 = props.chartData4.length > 0 ? props.chartData4 : defaultSeries2
+
+  const option = {
+    radar: {
+      indicator: indicators,
+      center: ['50%', '50%'],
+      radius: '70%',
+      splitNumber: 4,
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(15, 70, 250, 0.3)'
+        }
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['rgba(15, 70, 250, 0.05)', 'rgba(15, 70, 250, 0.1)', 'rgba(15, 70, 250, 0.15)', 'rgba(15, 70, 250, 0.2)']
+        }
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(15, 70, 250, 0.2)'
+        }
+      },
+      name: {
+        textStyle: {
+          color: '#a0c4ff',
+          fontSize: 11
+        }
+      }
+    },
+    series: [
+      {
+        type: 'radar',
+        data: [
+          {
+            value: series1,
+            name: '综合得分',
+            areaStyle: {
+              color: 'rgba(189, 3, 251, 0.3)'
+            },
+            lineStyle: {
+              color: '#bd03fb',
+              width: 2
+            },
+            itemStyle: {
+              color: '#bd03fb'
+            }
+          },
+          {
+            value: series2,
+            name: '基准值',
+            areaStyle: {
+              color: 'rgba(15, 70, 250, 0.2)'
+            },
+            lineStyle: {
+              color: '#0f46fa',
+              width: 2
+            },
+            itemStyle: {
+              color: '#0f46fa'
+            }
+          }
+        ],
+        symbol: 'circle',
+        symbolSize: 6
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(13, 80, 122, 0.95)',
+      borderColor: '#70CFE7',
+      textStyle: {
+        color: '#fff'
+      }
+    }
+  }
+
+  radarChart.setOption(option)
+}
+
+const handleResize = () => {
+  if (radarChart) radarChart.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initRadarChart()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (radarChart) radarChart.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.radar-section {
+  display: flex;
+  gap: 20px;
+  min-height: 400px;
+
+  .radar-chart {
+    flex: 1;
+    min-width: 300px;
+    height: 380px;
+  }
+
+  .radar-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 10px 0;
+
+    .radar-item {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      font-size: 13px;
+
+      .item-label {
+        color: #a0c4ff;
+      }
+
+      .progress-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .progress-bar {
+          flex: 1;
+          height: 5px;
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 0;
+          overflow: visible;
+
+          .progress-fill {
+            height: 100%;
+            border-radius: 0;
+            transition: width 0.3s ease;
+            position: relative;
+
+            .progress-end {
+              position: absolute;
+              right: -4px;
+              top: 50%;
+              transform: translateY(-50%);
+              width: 3px;
+              height: 9px;
+              background: #fff;
+              border-radius: 2px;
+            }
+          }
+        }
+
+        .item-value {
+          width: 45px;
+          text-align: right;
+          color: #fff;
+          font-weight: bold;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/portraitManagement/components/ProfileSeizedDistribution.vue

@@ -0,0 +1,75 @@
+<template>
+  <InfoCard title="查获物品分布">
+    <div class="seized-distribution">
+      <div ref="seizedChartRef" class="seized-chart"></div>
+    </div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const defaultData = [
+  { value: 20, name: '打火机', itemStyle: { color: '#ff9f43' } },
+  { value: 30, name: '管制刀具', itemStyle: { color: '#ff6b6b' } },
+  { value: 50, name: '其他违禁品', itemStyle: { color: '#4da6ff' } }
+]
+
+const seizedChartRef = ref(null)
+let seizedChart = null
+
+const initChart = () => {
+  if (!seizedChartRef.value) return
+  seizedChart = echarts.init(seizedChartRef.value)
+  const data = props.chartData1.length > 0 ? props.chartData1 : defaultData
+  const option = {
+    series: [{
+      type: 'pie',
+      radius: ['40%', '70%'],
+      data: data,
+      label: { show: true, color: '#fff', fontSize: 11 },
+      labelLine: { show: true }
+    }]
+  }
+  seizedChart.setOption(option)
+}
+
+const handleResize = () => {
+  if (seizedChart) seizedChart.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (seizedChart) seizedChart.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.seized-distribution {
+  width: 100%;
+  height: 280px;
+
+  .seized-chart {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/portraitManagement/components/ProfileSeizedInfo.vue

@@ -0,0 +1,137 @@
+<template>
+  
+  <InfoCard title="查获信息展示">
+    <div class="seized-info">
+      <div class="seized-number">
+        <div class="number-circle">
+          <div class="number-value">{{ displayNumber }}</div>
+          <div class="number-label">查获总数（所有人员）</div>
+        </div>
+      </div>
+      <div class="seized-small-chart">
+        <div ref="seizedSmallChartRef" class="small-chart"></div>
+      </div>
+    </div>
+  </InfoCard>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import InfoCard from './card.vue'
+
+const props = defineProps({
+  chartData1: {
+    type: [Number, Array],
+    default: 1658
+  }
+})
+
+const displayNumber = computed(() => {
+  return typeof props.chartData1 === 'number' ? props.chartData1 : 1658
+})
+
+const seizedSmallChartRef = ref(null)
+let seizedSmallChart = null
+
+const initChart = () => {
+  if (!seizedSmallChartRef.value) return
+  seizedSmallChart = echarts.init(seizedSmallChartRef.value)
+  const option = {
+    xAxis: {
+      type: 'category',
+      data: ['等级1', '等级3', '等级5'],
+      axisLabel: { color: '#a0c4ff', fontSize: 9 },
+      axisLine: { show: false },
+      axisTick: { show: false }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: { show: false },
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: false }
+    },
+    series: [{
+      type: 'bar',
+      data: [150, 400, 200],
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#a55eea' },
+          { offset: 1, color: '#4da6ff' }
+        ])
+      },
+      barWidth: '30%'
+    }]
+  }
+  seizedSmallChart.setOption(option)
+}
+
+const handleResize = () => {
+  if (seizedSmallChart) seizedSmallChart.resize()
+}
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      initChart()
+      window.addEventListener('resize', handleResize)
+    }, 100)
+  })
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+  if (seizedSmallChart) seizedSmallChart.dispose()
+})
+</script>
+
+<style lang="scss" scoped>
+.seized-info {
+  display: flex;
+  gap: 20px;
+  min-height: 280px;
+  align-items: center;
+
+  .seized-number {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+
+    .number-circle {
+      width: 200px;
+      height: 200px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, rgba(15, 70, 250, 0.3), rgba(189, 3, 251, 0.3));
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid rgba(189, 3, 251, 0.5);
+
+      .number-value {
+        font-size: 48px;
+        font-weight: bold;
+        color: #fff;
+        text-shadow: 0 0 20px rgba(189, 3, 251, 0.8);
+      }
+
+      .number-label {
+        font-size: 14px;
+        color: #a0c4ff;
+        text-align: center;
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .seized-small-chart {
+    flex: 1;
+
+    .small-chart {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,209 @@
+<template>
+  <div class="main-content-wrapper">
+    <div class="main-content">
+      <div class="content-row">
+        <ProfileRadar
+          :chartData1="radarData"
+          :chartData2="radarIndicators"
+          :chartData3="radarSeries1"
+          :chartData4="radarSeries2"
+        />
+        <ProfileMembers
+          :columns="memberColumns"
+          :data="teamMembers"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfileBasicDistribution
+          :chartData1="genderData"
+          :chartData2="nationData"
+          :chartData3="politicalData"
+        />
+        <ProfilePositionDistribution
+          :chartData1="skillData"
+          :chartData2="operateData"
+          :chartData3="postData"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfilePassRate
+          :chartData1="passRatePassData"
+          :chartData2="passRateLineData"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfileSeizedInfo :chartData1="seizedTotal" />
+        <ProfileSeizedDistribution :chartData1="seizedDistributionData" />
+      </div>
+
+      <div class="content-row">
+        <ProfileDailySeizedLine :chartData1="dailyLineData" />
+        <ProfileDailySeizedArea
+          :chartData1="dailyAreaPersonA"
+          :chartData2="dailyAreaPersonB"
+          :chartData3="dailyAreaPersonC"
+          :chartData4="dailyAreaPersonD"
+          :chartData5="dailyAreaPersonE"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfileDailySeizedBar :chartData1="dailyBarData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import ProfileRadar from '../../components/ProfileRadar.vue'
+import ProfileMembers from '../../components/ProfileMembers.vue'
+import ProfileBasicDistribution from '../../components/ProfileBasicDistribution.vue'
+import ProfilePositionDistribution from '../../components/ProfilePositionDistribution.vue'
+import ProfilePassRate from '../../components/ProfilePassRate.vue'
+import ProfileSeizedInfo from '../../components/ProfileSeizedInfo.vue'
+import ProfileSeizedDistribution from '../../components/ProfileSeizedDistribution.vue'
+import ProfileDailySeizedLine from '../../components/ProfileDailySeizedLine.vue'
+import ProfileDailySeizedArea from '../../components/ProfileDailySeizedArea.vue'
+import ProfileDailySeizedBar from '../../components/ProfileDailySeizedBar.vue'
+
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const radarData = ref([
+  { name: '通道安全防控力', value: 86, color: '#00e5ff' },
+  { name: '通道安全防控力', value: 90, color: '#00e5ff' },
+  { name: '通道安全防控力', value: 72, color: '#ff4757' },
+  { name: '通道安全防控力', value: 68, color: '#ff4757' },
+  { name: '通道安全防控力', value: 78, color: '#3742fa' },
+  { name: '通道安全防控力', value: 80, color: '#3742fa' },
+  { name: '通道协同作战能力', value: 72, color: '#ff4757' }
+])
+
+const radarIndicators = ref([
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道协同作战能力', max: 100 }
+])
+
+const radarSeries1 = ref([86, 90, 72, 68, 78, 80, 72])
+const radarSeries2 = ref([80, 85, 65, 60, 72, 75, 68])
+
+const teamMembers = ref([
+  { name: '孙晓波', age: 25, seniority: 3, gender: '男', nation: '汉', political: '群众', position: '安检员', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 5, avgYears: 6, totalScore: 88 },
+  { name: '孙晓波', age: 28, seniority: 6, gender: '男', nation: '汉', political: '群众', position: '组长', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 5, avgYears: 5, totalScore: 85 },
+  { name: '孙晓波', age: 31, seniority: 2, gender: '女', nation: '汉', political: '党员', position: '组长', qualification: '前传、特检、人身', skillLevel: '四级', operateYears: 5, avgYears: 76, totalScore: 76 },
+  { name: '马力', age: 26, seniority: 3, gender: '男', nation: '汉', political: '群众', position: '组长', qualification: '前传、特检、人身', skillLevel: '五级', operateYears: 5, avgYears: 81, totalScore: 81 },
+  { name: '马建国', age: 24, seniority: 5, gender: '男', nation: '汉', political: '党员', position: '安检员', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 6, avgYears: 78, totalScore: 78 }
+])
+
+const memberColumns = ref([
+  { label: '姓名', prop: 'name' },
+  { label: '年龄', prop: 'age' },
+  { label: '司龄', prop: 'seniority' },
+  { label: '性别', prop: 'gender' },
+  { label: '民族', prop: 'nation' },
+  { label: '政治面貌', prop: 'political' },
+  { label: '职务', prop: 'position' },
+  { label: '岗位资质', prop: 'qualification' },
+  { label: '职业技能等级', prop: 'skillLevel' },
+  { label: '开机年限', prop: 'operateYears' },
+  { label: '平均年限', prop: 'avgYears' },
+  { label: '综合得分', prop: 'totalScore' }
+])
+
+const genderData = ref([
+  { value: 6, name: '女', itemStyle: { color: '#ff6b9d' } },
+  { value: 8, name: '男', itemStyle: { color: '#4da6ff' } }
+])
+
+const nationData = ref([
+  { value: 1, name: '回族', itemStyle: { color: '#ff9f43' } },
+  { value: 8, name: '汉族', itemStyle: { color: '#4da6ff' } },
+  { value: 5, name: '其他', itemStyle: { color: '#a55eea' } }
+])
+
+const politicalData = ref([
+  { value: 1, name: '党员', itemStyle: { color: '#ff6b6b' } },
+  { value: 2, name: '共青团员', itemStyle: { color: '#ffd93d' } },
+  { value: 5, name: '群众', itemStyle: { color: '#6bcb77' } },
+  { value: 6, name: '其他', itemStyle: { color: '#4d96ff' } }
+])
+
+const skillData = ref({
+  categories: ['等级1', '等级2', '等级3', '等级4', '等级5'],
+  values: [3, 5, 7, 8, 4],
+  colors: ['#4da6ff', '#0f46fa']
+})
+
+const operateData = ref({
+  categories: ['0-3', '4-7', '8-11', '12-15', '15-18'],
+  values: [4, 2, 3, 5, 8],
+  colors: ['#6bcb77', '#2ecc71']
+})
+
+const postData = ref({
+  categories: ['前传', '人身', '验证', '开包', '开机'],
+  values: [4, 5, 6, 7, 8],
+  colors: ['#ff6b6b', '#ee5a24']
+})
+
+const passRatePassData = ref([370, 352, 330, 387, 426, 342, 325, 384, 445, 407, 382, 401, 380, 464, 342, 443, 305, 394, 334, 430, 364, 362, 400, 420])
+const passRateLineData = ref([4.5, 5, 4, 6, 7, 5, 4, 6, 8, 7, 6, 7, 6, 8, 5, 7, 4, 6, 5, 7, 6, 6, 6.5, 7])
+
+const seizedTotal = ref(1658)
+
+const seizedDistributionData = ref([
+  { value: 20, name: '打火机', itemStyle: { color: '#ff9f43' } },
+  { value: 30, name: '管制刀具', itemStyle: { color: '#ff6b6b' } },
+  { value: 50, name: '其他违禁品', itemStyle: { color: '#4da6ff' } }
+])
+
+const dailyLineData = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
+const dailyAreaPersonA = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
+const dailyAreaPersonB = ref([220, 182, 191, 234, 290, 330, 310, 123, 144, 210, 182, 191])
+const dailyAreaPersonC = ref([150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410])
+const dailyAreaPersonD = ref([320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330])
+const dailyAreaPersonE = ref([820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290])
+const dailyBarData = ref([120, 200, 150, 80, 70, 110, 130, 90, 160, 140, 180])
+
+watch(() => props.queryParams, (newParams) => {
+  fetchData(newParams)
+}, { deep: true })
+
+const fetchData = (params) => {
+  console.log('查询参数:', params)
+}
+</script>
+
+<style lang="scss" scoped>
+.main-content-wrapper {
+  .main-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>

src/views/portraitManagement/deptProfile/component/runData.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="operation-data">
+    <div class="row">
+      <ChannelCheckChart :chartsData="chartsData" />
+    </div>
+    <div class="row">
+      <div class="col">
+        <SeizedInfo :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <SeizedItems :chartsData="chartsData" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <SeizedNumAll :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <SeizedNum :chartsData="chartsData" />
+      </div>
+    </div>
+    <div class="row">
+      <SeizedWorkArea :chartsData="chartsData" />
+    </div>
+    <div class="row">
+      <div class="col">
+        <EventItems :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <EventType :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <EventWorkArea :chartsData="chartsData"  />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <TestItems :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <TestResult :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <TestArea :chartsData="chartsData"  />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <SupervisionDistribution :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <InterceptionDistribution :chartsData="chartsData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ChannelCheckChart from '../../components/ChannelCheckChart.vue';
+import SeizedInfo from '../../components/SeizedInfo.vue';
+import SeizedItems from '../../components/SeizedItems.vue';
+import SeizedNumAll from '../../components/SeizedNumAll.vue';
+import SeizedNum from '../../components/SeizedNum.vue';
+import SeizedWorkArea from '../../components/SeizedWorkArea.vue';
+import EventItems from '../../components/EventItems.vue';
+import EventType from '../../components/EventType.vue';
+import EventWorkArea from '../../components/EventWorkArea.vue';
+import TestItems from '../../components/TestItems.vue';
+import TestResult from '../../components/TestResult.vue';
+import TestArea from '../../components/TestArea.vue';
+import SupervisionDistribution from '../../components/SupervisionDistribution.vue';
+import InterceptionDistribution from '../../components/InterceptionDistribution.vue';
+
+
+const chartsData = ref([
+  {
+    num: 370,
+    num1: 330,
+    num2: 120,
+    num3: 470,
+    num4: 570,
+    rate: 30,
+    name: '打火机'
+  },
+  {
+    num: 330,
+    num1: 430,
+    num2: 420,
+    num3: 430,
+    num4: 150,
+    rate: 60,
+    name: '火柴'
+  },
+  {
+    num: 410,
+    num1: 310,
+    num2: 220,
+    num3: 370,
+    num4: 510,
+    rate: 35,
+    name: '刀具'
+  },
+  {
+    num: 570,
+    num1: 440,
+    num2: 420,
+    num3: 410,
+    num4: 470,
+    rate: 80,
+    name: '充电宝'
+  },
+  {
+    num: 340,
+    num1: 330,
+    num2: 620,
+    num3: 370,
+    num4: 170,
+    rate: 60,
+    name: '烟火'
+  },
+])
+  
+
+</script>
+
+<style lang="scss" scoped>
+.operation-data {
+  padding: 20px;
+  .row {
+    display: flex;
+    column-gap: 15px;
+    height: 360px;
+    margin-bottom: 15px;
+    .col {
+      flex: 1;
+      height: 100%;
+      :deep(.info-card) {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/portraitManagement/deptProfile/index.vue

@@ -1,3 +1,174 @@
 <template>
-    
-</template>
+  <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>
+
+  </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 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: '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 handleSearch = (params) => {
+  queryParams.value = params
+}
+
+const handleTabChange = (index) => {
+  activeTab.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.group-profile-page {
+  width: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+</style>

src/views/portraitManagement/groupProfile/index.vue

@@ -61,7 +61,7 @@ const pentagonItems = ref([
       topRight: { x: 300, y: 0 },
       bottomRight: { x: 260, y: 200 },
       bottomLeft: { x: -30, y: 200 }
-    },cardContentStyle: {
+    }, cardContentStyle: {
       gap: '100px'
     },
     edgeGradients: {
@@ -78,11 +78,13 @@ const pentagonItems = ref([
     label: '',
     iconPath: zu02Icon,
     iconStyle: {
-      width: '200px',
-      height: '200px'
+      width: '250px',
+      height: '250px'
     },
     valueStyle: {
-      fontSize: '48px'
+      fontSize: '48px',
+      bottom: '26px',
+      position: 'relative'
     },
     vertical: true,
     cornerRadius: 20,

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

@@ -3,62 +3,30 @@
   
 
     <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>
+        <ProfileMembers :columns="teamColumns" :data="teamData" />
+        <ProfileBasicDistribution
+          :chartData1="genderData"
+          :chartData2="nationData"
+          :chartData3="politicalData"
+        />
       </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>
+        <ProfilePositionDistribution
+          :chartData1="skillData"
+          :chartData2="operateData"
+          :chartData3="postData"
+        />
       </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'
+import { ref } from 'vue'
+import ProfileMembers from '../../components/ProfileMembers.vue'
+import ProfileBasicDistribution from '../../components/ProfileBasicDistribution.vue'
+import ProfilePositionDistribution from '../../components/ProfilePositionDistribution.vue'
 
 
 
@@ -86,255 +54,42 @@ const teamData = ref([
   { 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 genderData = [
+  { value: 650, name: '女', itemStyle: { color: '#ff9f9f' } },
+  { value: 750, name: '男', itemStyle: { color: '#7effc4' } }
+]
 
-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 nationData = [
+  { value: 615, name: '汉族', itemStyle: { color: '#7effc4' } },
+  { value: 484, name: '回族', itemStyle: { color: '#4da6ff' } },
+  { value: 156, name: '其他', itemStyle: { color: '#ffd93d' } }
+]
 
-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 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 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 skillData = {
+  categories: ['等级1', '等级2', '等级3', '等级4', '等级5'],
+  values: [450, 650, 900, 750, 550],
+  colors: ['#ff6b9d', '#ff6b6b']
 }
 
-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 operateData = {
+  categories: ['0-3', '4-7', '8-11', '12-15', '16-19'],
+  values: [650, 500, 400, 300, 550],
+  colors: ['#a55eea', '#bd03fb']
 }
 
-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 postData = {
+  categories: ['仿伪', '炸探', '人身', '开包', '开检后', '开机'],
+  values: [450, 600, 180, 150, 650, 550],
+  colors: ['#ffd93d', '#ffd9b3']
 }
 
-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>
@@ -355,36 +110,5 @@ onUnmounted(() => {
       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>

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

@@ -42,30 +42,12 @@
     </div>
 
     <div class="content-row">
-      <InfoCard title="查获信息展示">
-        <div class="seized-info">
-          <div class="seized-number">
-            <div class="number-circle">
-              <div class="number-value">1651</div>
-              <div class="number-label">查获总数（所有部门）</div>
-            </div>
-          </div>
-          <div class="seized-small-chart">
-            <div ref="seizedSmallChartRef" class="small-chart"></div>
-          </div>
-        </div>
-      </InfoCard>
-      <InfoCard title="查获物品分布">
-        <div class="seized-distribution">
-          <div ref="seizedChartRef" class="seized-chart"></div>
-        </div>
-      </InfoCard>
+      <SeizedInfo :chartsData="seizedInfoData" />
+      <SeizedItems :chartsData="seizedItemsData" />
     </div>
 
     <div class="content-row">
-      <InfoCard title="每日查获数量（总表）">
-        <div ref="dailySeizedLineRef" class="daily-chart"></div>
-      </InfoCard>
+      <SeizedNumAll :chartsData="seizedNumAllData" />
       <InfoCard title="每日查获数量（部门对比）">
         <div ref="dailySeizedAreaRef" class="daily-chart"></div>
       </InfoCard>
@@ -74,33 +56,19 @@
 
 
     <div class="content-row">
-      <InfoCard title="查获工作区域分布">
-        <div ref="workAreaDistChartRef" class="work-area-dist-chart"></div>
-      </InfoCard>
+      <SeizedWorkArea :chartsData="workAreaDistData" />
     </div>
 
     <div class="content-row">
-      <InfoCard title="不安全事件物品分布">
-        <div ref="unsafeItemDistChartRef" class="unsafe-item-dist-chart"></div>
-      </InfoCard>
-      <InfoCard title="不安全事件类型分布">
-        <div ref="unsafeTypeDistChartRef" class="unsafe-type-dist-chart"></div>
-      </InfoCard>
-      <InfoCard title="不安全事件查获岗位分布">
-        <div ref="unsafePostDistChartRef" class="unsafe-post-dist-chart"></div>
-      </InfoCard>
+      <EventItems :chartsData="unsafeItemDistData" />
+      <EventType :chartsData="unsafeTypeDistData" />
+      <EventWorkArea :chartsData="unsafePostDistData" />
     </div>
 
     <div class="content-row">
-      <InfoCard title="安保测试物品分类">
-        <div ref="securityTestItemChartRef" class="security-test-item-chart"></div>
-      </InfoCard>
-      <InfoCard title="安保测试通过情况">
-        <div ref="securityTestPassChartRef" class="security-test-pass-chart"></div>
-      </InfoCard>
-      <InfoCard title="安保测试区域情况">
-        <div ref="securityTestAreaChartRef" class="security-test-area-chart"></div>
-      </InfoCard>
+      <TestItems :chartsData="securityTestItemData" />
+      <TestResult :chartsData="securityTestPassData" />
+      <TestArea :chartsData="securityTestAreaData" />
     </div>
   </div>
 </template>
@@ -109,6 +77,16 @@
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import InfoCard from '../../components/card.vue'
+import SeizedInfo from '../../components/SeizedInfo.vue'
+import SeizedItems from '../../components/SeizedItems.vue'
+import SeizedNumAll from '../../components/SeizedNumAll.vue'
+import SeizedWorkArea from '../../components/SeizedWorkArea.vue'
+import EventItems from '../../components/EventItems.vue'
+import EventType from '../../components/EventType.vue'
+import EventWorkArea from '../../components/EventWorkArea.vue'
+import TestItems from '../../components/TestItems.vue'
+import TestResult from '../../components/TestResult.vue'
+import TestArea from '../../components/TestArea.vue'
 
 const props = defineProps({
   queryParams: {
@@ -156,32 +134,91 @@ const updateDateTime = () => {
   currentTime.value = `${hours}:${minutes}:${seconds}`
 }
 
+const seizedInfoData = [
+  { num: 550 },
+  { num: 620 },
+  { num: 481 }
+]
+
+const seizedItemsData = [
+  { num: 50, name: '打火机' },
+  { num: 30, name: '管制刀具' },
+  { num: 20, name: '其他' }
+]
+
+const seizedNumAllData = [
+  { num: 150 }, { num: 160 }, { num: 145 }, { num: 180 }, { num: 170 },
+  { num: 190 }, { num: 155 }, { num: 140 }, { num: 165 }, { num: 185 },
+  { num: 175 }, { num: 200 }, { num: 180 }, { num: 195 }, { num: 170 },
+  { num: 160 }, { num: 185 }, { num: 175 }, { num: 190 }
+]
+
+const workAreaDistData = [
+  { num: 287, name: 'T3国内出发（4层）' },
+  { num: 250, name: 'T3（8层出发）' },
+  { num: 300, name: 'T3国际出发' },
+  { num: 290, name: 'T3国际转国内' },
+  { num: 240, name: '旅检A区' },
+  { num: 250, name: 'T3要客服务区东' },
+  { num: 260, name: 'T3要客服务区西' },
+  { num: 255, name: 'T1要客服务区东' },
+  { num: 245, name: 'T2要客服务区东' },
+  { num: 260, name: '旅检B区' },
+  { num: 280, name: '重检C区' }
+]
+
+const unsafeItemDistData = [
+  { num: 66, name: '打火机' },
+  { num: 174, name: '火柴' },
+  { num: 65, name: '其他' },
+  { num: 106, name: '危险物品' },
+  { num: 173, name: '危险品' },
+  { num: 48, name: '其他/危险品' }
+]
+
+const unsafeTypeDistData = [
+  { num: 6, name: '一般' },
+  { num: 6, name: '二级' },
+  { num: 174, name: '三级' },
+  { num: 48, name: '四级' },
+  { num: 454, name: '五级' }
+]
+
+const unsafePostDistData = [
+  { num: 100, name: '境外/非通道' },
+  { num: 213, name: '值机柜台' },
+  { num: 150, name: '验证/通道' },
+  { num: 300, name: '人身检查' },
+  { num: 187, name: 'X光/行李/开检' },
+  { num: 387, name: '开箱/货检' }
+]
+
+const securityTestItemData = [
+  { num: 5, name: '烟花' },
+  { num: 8, name: '鞭炮' },
+  { num: 2, name: '打火机' },
+  { num: 3, name: '野生点火器' }
+]
+
+const securityTestPassData = [
+  { num: 44, name: '通过' },
+  { num: 4, name: '未通过' }
+]
+
+const securityTestAreaData = [
+  { num: 100, name: 'T3国内出发（4层）' },
+  { num: 246, name: 'T3（8层出发）' },
+  { num: 160, name: 'T3国际出发' },
+  { num: 300, name: 'T3国际转国内' },
+  { num: 100, name: 'T1要客服务区西' },
+  { num: 167, name: 'T1要客服务区东' }
+]
+
 const hourlyPassChartRef = ref(null)
 let hourlyPassChart = null
-const seizedSmallChartRef = ref(null)
-let seizedSmallChart = null
-const seizedChartRef = ref(null)
-let seizedChart = null
-const dailySeizedLineRef = ref(null)
-let dailySeizedLine = null
 const dailySeizedAreaRef = ref(null)
 let dailySeizedArea = null
 
-const workAreaDistChartRef = ref(null)
-let workAreaDistChart = null
-const unsafeItemDistChartRef = ref(null)
-let unsafeItemDistChart = null
-const unsafeTypeDistChartRef = ref(null)
-let unsafeTypeDistChart = null
-const unsafePostDistChartRef = ref(null)
-let unsafePostDistChart = null
-const securityTestItemChartRef = ref(null)
-let securityTestItemChart = null
-const securityTestPassChartRef = ref(null)
-let securityTestPassChart = null
-const securityTestAreaChartRef = ref(null)
-let securityTestAreaChart = null
-
 const initHourlyPassChart = () => {
   if (!hourlyPassChartRef.value) return
   hourlyPassChart = echarts.init(hourlyPassChartRef.value)
@@ -294,108 +331,6 @@ const initHourlyPassChart = () => {
   hourlyPassChart.setOption(option)
 }
 
-const initSeizedSmallChart = () => {
-  if (!seizedSmallChartRef.value) return
-  seizedSmallChart = echarts.init(seizedSmallChartRef.value)
-  const option = {
-    xAxis: {
-      type: 'category',
-      data: ['旅检一部', '旅检二部', '旅检三部'],
-      axisLabel: { color: '#a0c4ff', fontSize: 9 },
-      axisLine: { show: false },
-      axisTick: { show: false }
-    },
-    yAxis: {
-      type: 'value',
-      axisLabel: { show: false },
-      axisLine: { show: false },
-      axisTick: { show: false },
-      splitLine: { show: false }
-    },
-    series: [{
-      type: 'bar',
-      data: [550, 620, 481],
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#bd03fb' },
-          { offset: 1, color: '#0f46fa' }
-        ])
-      },
-      barWidth: '30%'
-    }]
-  }
-  seizedSmallChart.setOption(option)
-}
-
-const initSeizedChart = () => {
-  if (!seizedChartRef.value) return
-  seizedChart = echarts.init(seizedChartRef.value)
-  const option = {
-    series: [{
-      type: 'pie',
-      radius: ['40%', '70%'],
-      data: [
-        { value: 50, name: '打火机', itemStyle: { color: '#ff9f43' } },
-        { value: 30, name: '管制刀具', itemStyle: { color: '#ff6b6b' } },
-        { value: 20, name: '其他', itemStyle: { color: '#4da6ff' } }
-      ],
-      label: { show: true, color: '#fff', fontSize: 11 },
-      labelLine: { show: true }
-    }]
-  }
-  seizedChart.setOption(option)
-}
-
-const initDailySeizedLine = () => {
-  if (!dailySeizedLineRef.value) return
-  dailySeizedLine = echarts.init(dailySeizedLineRef.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: '3%',
-      right: '4%',
-      bottom: '15%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号'],
-      axisLabel: { color: '#a0c4ff', fontSize: 9 },
-      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: 'line',
-      smooth: true,
-      data: [150, 160, 145, 180, 170, 190, 155, 140, 165, 185, 175, 200, 180, 195, 170, 160, 185, 175, 190],
-      itemStyle: { color: '#bd03fb' },
-      areaStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: 'rgba(189,3,251,0.3)' },
-          { offset: 1, color: 'rgba(189,3,251,0.05)' }
-        ])
-      }
-    }]
-  }
-  dailySeizedLine.setOption(option)
-}
-
 const initDailySeizedArea = () => {
   if (!dailySeizedAreaRef.value) return
   dailySeizedArea = echarts.init(dailySeizedAreaRef.value)
@@ -477,262 +412,9 @@ const initDailySeizedArea = () => {
   dailySeizedArea.setOption(option)
 }
 
-
-
-const initWorkAreaDistChart = () => {
-  if (!workAreaDistChartRef.value) return
-  workAreaDistChart = echarts.init(workAreaDistChartRef.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: '3%',
-      right: '4%',
-      bottom: '15%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: ['T3国内出发（4层）', 'T3（8层出发）', 'T3国际出发', 'T3国际转国内', '旅检A区', 'T3要客服务区东', 'T3要客服务区西', 'T1要客服务区东', 'T2要客服务区东', '旅检B区', '重检C区'],
-      axisLabel: {
-        color: '#a0c4ff',
-        rotate: 30,
-        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: [287, 250, 300, 290, 240, 250, 260, 255, 245, 260, 280],
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#bd03fb' },
-          { offset: 1, color: '#0f46fa' }
-        ])
-      },
-      barWidth: '40%'
-    }]
-  }
-  workAreaDistChart.setOption(option)
-}
-
-const initUnsafeItemDistChart = () => {
-  if (!unsafeItemDistChartRef.value) return
-  unsafeItemDistChart = echarts.init(unsafeItemDistChartRef.value)
-  const option = {
-    series: [{
-      type: 'pie',
-      radius: ['40%', '70%'],
-      data: [
-        { value: 66, name: '打火机', itemStyle: { color: '#ff9f43' } },
-        { value: 174, name: '火柴', itemStyle: { color: '#4da6ff' } },
-        { value: 65, name: '其他', itemStyle: { color: '#7eff7e' } },
-        { value: 106, name: '危险物品', itemStyle: { color: '#ff6b6b' } },
-        { value: 173, name: '危险品', itemStyle: { color: '#ffd93d' } },
-        { value: 48, name: '其他/危险品', itemStyle: { color: '#a55eea' } }
-      ],
-      label: { show: true, color: '#fff', fontSize: 11 },
-      labelLine: { show: true }
-    }]
-  }
-  unsafeItemDistChart.setOption(option)
-}
-
-const initUnsafeTypeDistChart = () => {
-  if (!unsafeTypeDistChartRef.value) return
-  unsafeTypeDistChart = echarts.init(unsafeTypeDistChartRef.value)
-  const option = {
-    series: [{
-      type: 'pie',
-      radius: ['40%', '70%'],
-      data: [
-        { value: 6, name: '一般', itemStyle: { color: '#ff9f43' } },
-        { value: 6, name: '二级', itemStyle: { color: '#ff6b6b' } },
-        { value: 174, name: '三级', itemStyle: { color: '#7eff7e' } },
-        { value: 48, name: '四级', itemStyle: { color: '#ffd93d' } },
-        { value: 454, name: '五级', itemStyle: { color: '#4da6ff' } }
-      ],
-      label: { show: true, color: '#fff', fontSize: 11 },
-      labelLine: { show: true }
-    }]
-  }
-  unsafeTypeDistChart.setOption(option)
-}
-
-const initUnsafePostDistChart = () => {
-  if (!unsafePostDistChartRef.value) return
-  unsafePostDistChart = echarts.init(unsafePostDistChartRef.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: '3%',
-      right: '4%',
-      bottom: '15%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: ['境外/非通道', '值机柜台', '验证/通道', '人身检查', 'X光/行李/开检', '开箱/货检'],
-      axisLabel: {
-        color: '#a0c4ff',
-        rotate: 30,
-        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: [100, 213, 150, 300, 187, 387],
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#ff6b9d' },
-          { offset: 1, color: '#bd03fb' }
-        ])
-      },
-      barWidth: '40%'
-    }]
-  }
-  unsafePostDistChart.setOption(option)
-}
-
-const initSecurityTestItemChart = () => {
-  if (!securityTestItemChartRef.value) return
-  securityTestItemChart = echarts.init(securityTestItemChartRef.value)
-  const option = {
-    series: [{
-      type: 'pie',
-      radius: ['40%', '70%'],
-      data: [
-        { value: 5, name: '烟花', itemStyle: { color: '#ffd93d' } },
-        { value: 8, name: '鞭炮', itemStyle: { color: '#7eff7e' } },
-        { value: 2, name: '打火机', itemStyle: { color: '#a0c4ff' } },
-        { value: 3, name: '野生点火器', itemStyle: { color: '#4da6ff' } }
-      ],
-      label: { show: true, color: '#fff', fontSize: 11 },
-      labelLine: { show: true }
-    }]
-  }
-  securityTestItemChart.setOption(option)
-}
-
-const initSecurityTestPassChart = () => {
-  if (!securityTestPassChartRef.value) return
-  securityTestPassChart = echarts.init(securityTestPassChartRef.value)
-  const option = {
-    series: [{
-      type: 'pie',
-      radius: ['40%', '70%'],
-      data: [
-        { value: 44, name: '通过', itemStyle: { color: '#ffd9b3' } },
-        { value: 4, name: '未通过', itemStyle: { color: '#a55eea' } }
-      ],
-      label: { show: true, color: '#fff', fontSize: 11 },
-      labelLine: { show: true }
-    }]
-  }
-  securityTestPassChart.setOption(option)
-}
-
-const initSecurityTestAreaChart = () => {
-  if (!securityTestAreaChartRef.value) return
-  securityTestAreaChart = echarts.init(securityTestAreaChartRef.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: '3%',
-      right: '4%',
-      bottom: '15%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'category',
-      data: ['T3国内出发（4层）', 'T3（8层出发）', 'T3国际出发', 'T3国际转国内', 'T1要客服务区西', 'T1要客服务区东'],
-      axisLabel: {
-        color: '#a0c4ff',
-        rotate: 30,
-        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: [100, 246, 160, 300, 100, 167, 307],
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#bd03fb' },
-          { offset: 1, color: '#ffd9b3' }
-        ])
-      },
-      barWidth: '40%'
-    }]
-  }
-  securityTestAreaChart.setOption(option)
-}
-
 const handleResize = () => {
   if (hourlyPassChart) hourlyPassChart.resize()
-  if (seizedSmallChart) seizedSmallChart.resize()
-  if (seizedChart) seizedChart.resize()
-  if (dailySeizedLine) dailySeizedLine.resize()
   if (dailySeizedArea) dailySeizedArea.resize()
-
-  if (workAreaDistChart) workAreaDistChart.resize()
-  if (unsafeItemDistChart) unsafeItemDistChart.resize()
-  if (unsafeTypeDistChart) unsafeTypeDistChart.resize()
-  if (unsafePostDistChart) unsafePostDistChart.resize()
-  if (securityTestItemChart) securityTestItemChart.resize()
-  if (securityTestPassChart) securityTestPassChart.resize()
-  if (securityTestAreaChart) securityTestAreaChart.resize()
 }
 
 onMounted(() => {
@@ -741,18 +423,7 @@ onMounted(() => {
   nextTick(() => {
     setTimeout(() => {
       initHourlyPassChart()
-      initSeizedSmallChart()
-      initSeizedChart()
-      initDailySeizedLine()
       initDailySeizedArea()
-
-      initWorkAreaDistChart()
-      initUnsafeItemDistChart()
-      initUnsafeTypeDistChart()
-      initUnsafePostDistChart()
-      initSecurityTestItemChart()
-      initSecurityTestPassChart()
-      initSecurityTestAreaChart()
       window.addEventListener('resize', handleResize)
     }, 100)
   })
@@ -762,18 +433,7 @@ onUnmounted(() => {
   clearInterval(dateTimer)
   window.removeEventListener('resize', handleResize)
   if (hourlyPassChart) hourlyPassChart.dispose()
-  if (seizedSmallChart) seizedSmallChart.dispose()
-  if (seizedChart) seizedChart.dispose()
-  if (dailySeizedLine) dailySeizedLine.dispose()
   if (dailySeizedArea) dailySeizedArea.dispose()
-
-  if (workAreaDistChart) workAreaDistChart.dispose()
-  if (unsafeItemDistChart) unsafeItemDistChart.dispose()
-  if (unsafeTypeDistChart) unsafeTypeDistChart.dispose()
-  if (unsafePostDistChart) unsafePostDistChart.dispose()
-  if (securityTestItemChart) securityTestItemChart.dispose()
-  if (securityTestPassChart) securityTestPassChart.dispose()
-  if (securityTestAreaChart) securityTestAreaChart.dispose()
 })
 </script>
 
@@ -784,6 +444,7 @@ onUnmounted(() => {
   gap: 20px;
 
   .content-row {
+  height: 400px;
     padding: 0 20px;
     display: flex;
     gap: 20px;
@@ -799,85 +460,11 @@ onUnmounted(() => {
     height: 350px;
   }
 
-  .seized-info {
-    display: flex;
-    gap: 20px;
-    min-height: 280px;
-    align-items: center;
-
-    .seized-number {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-
-      .number-circle {
-        width: 200px;
-        height: 200px;
-        border-radius: 50%;
-        background: linear-gradient(135deg, rgba(15, 70, 250, 0.3), rgba(189, 3, 251, 0.3));
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        border: 2px solid rgba(189, 3, 251, 0.5);
-
-        .number-value {
-          font-size: 48px;
-          font-weight: bold;
-          color: #fff;
-          text-shadow: 0 0 20px rgba(189, 3, 251, 0.8);
-        }
-
-        .number-label {
-          font-size: 14px;
-          color: #a0c4ff;
-          text-align: center;
-          margin-top: 10px;
-        }
-      }
-    }
-
-    .seized-small-chart {
-      flex: 1;
-
-      .small-chart {
-        width: 100%;
-        height: 200px;
-      }
-    }
-  }
-
-  .seized-distribution {
-    width: 100%;
-    height: 280px;
-
-    .seized-chart {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
   .daily-chart {
     width: 100%;
     height: 350px;
   }
 
-
-  .work-area-dist-chart {
-    width: 100%;
-    height: 400px;
-  }
-
-  .unsafe-item-dist-chart,
-  .unsafe-type-dist-chart,
-  .unsafe-post-dist-chart,
-  .security-test-item-chart,
-  .security-test-pass-chart,
-  .security-test-area-chart {
-    width: 100%;
-    height: 350px;
-  }
-
   .info-panel {
     width: 300px;
     min-width: 300px;

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

@@ -0,0 +1,209 @@
+<template>
+  <div class="main-content-wrapper">
+    <div class="main-content">
+      <div class="content-row">
+        <ProfileRadar
+          :chartData1="radarData"
+          :chartData2="radarIndicators"
+          :chartData3="radarSeries1"
+          :chartData4="radarSeries2"
+        />
+        <ProfileMembers
+          :columns="memberColumns"
+          :data="teamMembers"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfileBasicDistribution
+          :chartData1="genderData"
+          :chartData2="nationData"
+          :chartData3="politicalData"
+        />
+        <ProfilePositionDistribution
+          :chartData1="skillData"
+          :chartData2="operateData"
+          :chartData3="postData"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfilePassRate
+          :chartData1="passRatePassData"
+          :chartData2="passRateLineData"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfileSeizedInfo :chartData1="seizedTotal" />
+        <ProfileSeizedDistribution :chartData1="seizedDistributionData" />
+      </div>
+
+      <div class="content-row">
+        <ProfileDailySeizedLine :chartData1="dailyLineData" />
+        <ProfileDailySeizedArea
+          :chartData1="dailyAreaPersonA"
+          :chartData2="dailyAreaPersonB"
+          :chartData3="dailyAreaPersonC"
+          :chartData4="dailyAreaPersonD"
+          :chartData5="dailyAreaPersonE"
+        />
+      </div>
+
+      <div class="content-row">
+        <ProfileDailySeizedBar :chartData1="dailyBarData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import ProfileRadar from '../../components/ProfileRadar.vue'
+import ProfileMembers from '../../components/ProfileMembers.vue'
+import ProfileBasicDistribution from '../../components/ProfileBasicDistribution.vue'
+import ProfilePositionDistribution from '../../components/ProfilePositionDistribution.vue'
+import ProfilePassRate from '../../components/ProfilePassRate.vue'
+import ProfileSeizedInfo from '../../components/ProfileSeizedInfo.vue'
+import ProfileSeizedDistribution from '../../components/ProfileSeizedDistribution.vue'
+import ProfileDailySeizedLine from '../../components/ProfileDailySeizedLine.vue'
+import ProfileDailySeizedArea from '../../components/ProfileDailySeizedArea.vue'
+import ProfileDailySeizedBar from '../../components/ProfileDailySeizedBar.vue'
+
+const props = defineProps({
+  queryParams: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const radarData = ref([
+  { name: '通道安全防控力', value: 86, color: '#00e5ff' },
+  { name: '通道安全防控力', value: 90, color: '#00e5ff' },
+  { name: '通道安全防控力', value: 72, color: '#ff4757' },
+  { name: '通道安全防控力', value: 68, color: '#ff4757' },
+  { name: '通道安全防控力', value: 78, color: '#3742fa' },
+  { name: '通道安全防控力', value: 80, color: '#3742fa' },
+  { name: '通道协同作战能力', value: 72, color: '#ff4757' }
+])
+
+const radarIndicators = ref([
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道安全防控力', max: 100 },
+  { name: '通道协同作战能力', max: 100 }
+])
+
+const radarSeries1 = ref([86, 90, 72, 68, 78, 80, 72])
+const radarSeries2 = ref([80, 85, 65, 60, 72, 75, 68])
+
+const teamMembers = ref([
+  { name: '孙晓波', age: 25, seniority: 3, gender: '男', nation: '汉', political: '群众', position: '安检员', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 5, avgYears: 6, totalScore: 88 },
+  { name: '孙晓波', age: 28, seniority: 6, gender: '男', nation: '汉', political: '群众', position: '组长', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 5, avgYears: 5, totalScore: 85 },
+  { name: '孙晓波', age: 31, seniority: 2, gender: '女', nation: '汉', political: '党员', position: '组长', qualification: '前传、特检、人身', skillLevel: '四级', operateYears: 5, avgYears: 76, totalScore: 76 },
+  { name: '马力', age: 26, seniority: 3, gender: '男', nation: '汉', political: '群众', position: '组长', qualification: '前传、特检、人身', skillLevel: '五级', operateYears: 5, avgYears: 81, totalScore: 81 },
+  { name: '马建国', age: 24, seniority: 5, gender: '男', nation: '汉', political: '党员', position: '安检员', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 6, avgYears: 78, totalScore: 78 }
+])
+
+const memberColumns = ref([
+  { label: '姓名', prop: 'name' },
+  { label: '年龄', prop: 'age' },
+  { label: '司龄', prop: 'seniority' },
+  { label: '性别', prop: 'gender' },
+  { label: '民族', prop: 'nation' },
+  { label: '政治面貌', prop: 'political' },
+  { label: '职务', prop: 'position' },
+  { label: '岗位资质', prop: 'qualification' },
+  { label: '职业技能等级', prop: 'skillLevel' },
+  { label: '开机年限', prop: 'operateYears' },
+  { label: '平均年限', prop: 'avgYears' },
+  { label: '综合得分', prop: 'totalScore' }
+])
+
+const genderData = ref([
+  { value: 6, name: '女', itemStyle: { color: '#ff6b9d' } },
+  { value: 8, name: '男', itemStyle: { color: '#4da6ff' } }
+])
+
+const nationData = ref([
+  { value: 1, name: '回族', itemStyle: { color: '#ff9f43' } },
+  { value: 8, name: '汉族', itemStyle: { color: '#4da6ff' } },
+  { value: 5, name: '其他', itemStyle: { color: '#a55eea' } }
+])
+
+const politicalData = ref([
+  { value: 1, name: '党员', itemStyle: { color: '#ff6b6b' } },
+  { value: 2, name: '共青团员', itemStyle: { color: '#ffd93d' } },
+  { value: 5, name: '群众', itemStyle: { color: '#6bcb77' } },
+  { value: 6, name: '其他', itemStyle: { color: '#4d96ff' } }
+])
+
+const skillData = ref({
+  categories: ['等级1', '等级2', '等级3', '等级4', '等级5'],
+  values: [3, 5, 7, 8, 4],
+  colors: ['#4da6ff', '#0f46fa']
+})
+
+const operateData = ref({
+  categories: ['0-3', '4-7', '8-11', '12-15', '15-18'],
+  values: [4, 2, 3, 5, 8],
+  colors: ['#6bcb77', '#2ecc71']
+})
+
+const postData = ref({
+  categories: ['前传', '人身', '验证', '开包', '开机'],
+  values: [4, 5, 6, 7, 8],
+  colors: ['#ff6b6b', '#ee5a24']
+})
+
+const passRatePassData = ref([370, 352, 330, 387, 426, 342, 325, 384, 445, 407, 382, 401, 380, 464, 342, 443, 305, 394, 334, 430, 364, 362, 400, 420])
+const passRateLineData = ref([4.5, 5, 4, 6, 7, 5, 4, 6, 8, 7, 6, 7, 6, 8, 5, 7, 4, 6, 5, 7, 6, 6, 6.5, 7])
+
+const seizedTotal = ref(1658)
+
+const seizedDistributionData = ref([
+  { value: 20, name: '打火机', itemStyle: { color: '#ff9f43' } },
+  { value: 30, name: '管制刀具', itemStyle: { color: '#ff6b6b' } },
+  { value: 50, name: '其他违禁品', itemStyle: { color: '#4da6ff' } }
+])
+
+const dailyLineData = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
+const dailyAreaPersonA = ref([120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330])
+const dailyAreaPersonB = ref([220, 182, 191, 234, 290, 330, 310, 123, 144, 210, 182, 191])
+const dailyAreaPersonC = ref([150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410])
+const dailyAreaPersonD = ref([320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330])
+const dailyAreaPersonE = ref([820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290])
+const dailyBarData = ref([120, 200, 150, 80, 70, 110, 130, 90, 160, 140, 180])
+
+watch(() => props.queryParams, (newParams) => {
+  fetchData(newParams)
+}, { deep: true })
+
+const fetchData = (params) => {
+  console.log('查询参数:', params)
+}
+</script>
+
+<style lang="scss" scoped>
+.main-content-wrapper {
+  .main-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>

src/views/portraitManagement/teamProfile/component/runData.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="operation-data">
+    <div class="row">
+      <ChannelCheckChart :chartsData="chartsData" />
+    </div>
+    <div class="row">
+      <div class="col">
+        <SeizedInfo :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <SeizedItems :chartsData="chartsData" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <SeizedNumAll :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <SeizedNum :chartsData="chartsData" />
+      </div>
+    </div>
+    <div class="row">
+      <SeizedWorkArea :chartsData="chartsData" />
+    </div>
+    <div class="row">
+      <div class="col">
+        <EventItems :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <EventType :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <EventWorkArea :chartsData="chartsData"  />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <TestItems :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <TestResult :chartsData="chartsData"  />
+      </div>
+      <div class="col">
+        <TestArea :chartsData="chartsData"  />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <SupervisionDistribution :chartsData="chartsData"/>
+      </div>
+      <div class="col">
+        <InterceptionDistribution :chartsData="chartsData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ChannelCheckChart from '../../components/ChannelCheckChart.vue';
+import SeizedInfo from '../../components/SeizedInfo.vue';
+import SeizedItems from '../../components/SeizedItems.vue';
+import SeizedNumAll from '../../components/SeizedNumAll.vue';
+import SeizedNum from '../../components/SeizedNum.vue';
+import SeizedWorkArea from '../../components/SeizedWorkArea.vue';
+import EventItems from '../../components/EventItems.vue';
+import EventType from '../../components/EventType.vue';
+import EventWorkArea from '../../components/EventWorkArea.vue';
+import TestItems from '../../components/TestItems.vue';
+import TestResult from '../../components/TestResult.vue';
+import TestArea from '../../components/TestArea.vue';
+import SupervisionDistribution from '../../components/SupervisionDistribution.vue';
+import InterceptionDistribution from '../../components/InterceptionDistribution.vue';
+
+
+const chartsData = ref([
+  {
+    num: 370,
+    num1: 330,
+    num2: 120,
+    num3: 470,
+    num4: 570,
+    rate: 30,
+    name: '打火机'
+  },
+  {
+    num: 330,
+    num1: 430,
+    num2: 420,
+    num3: 430,
+    num4: 150,
+    rate: 60,
+    name: '火柴'
+  },
+  {
+    num: 410,
+    num1: 310,
+    num2: 220,
+    num3: 370,
+    num4: 510,
+    rate: 35,
+    name: '刀具'
+  },
+  {
+    num: 570,
+    num1: 440,
+    num2: 420,
+    num3: 410,
+    num4: 470,
+    rate: 80,
+    name: '充电宝'
+  },
+  {
+    num: 340,
+    num1: 330,
+    num2: 620,
+    num3: 370,
+    num4: 170,
+    rate: 60,
+    name: '烟火'
+  },
+])
+  
+
+</script>
+
+<style lang="scss" scoped>
+.operation-data {
+  padding: 20px;
+  .row {
+    display: flex;
+    column-gap: 15px;
+    height: 360px;
+    margin-bottom: 15px;
+    .col {
+      flex: 1;
+      height: 100%;
+      :deep(.info-card) {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/portraitManagement/teamProfile/index.vue

@@ -1 +1,174 @@
-<template></template>
+<template>
+  <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>
+
+  </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 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: '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 handleSearch = (params) => {
+  queryParams.value = params
+}
+
+const handleTabChange = (index) => {
+  activeTab.value = index
+}
+</script>
+
+<style lang="scss" scoped>
+.group-profile-page {
+  width: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+}
+</style>