feat(stationProfile): add station profile page and related features

1. 新增站画像页面路由配置
2. 更新测试环境API接口地址
3. 新增通用SectionTitle标题组件
4. 新增站画像页面全套业务组件：
   - 值班信息组件
   - 出勤状态组件
   - 团队成员表格组件
   - 不安全事件类型/物品/位置分布图表组件
   - 区域/物品客流分布图表组件
   - 安保测试图表组件
   - 人员基础/岗位资质分布组件
   - 查获信息/每日查获趋势图表组件
5. 新增站画像业务API接口

src/api/portraitManagement/portraitManagement.js

@@ -0,0 +1,101 @@
+import request from '@/utils/request'
+
+// 安保测试物品分类
+export function securityTestItemClassification(data) {
+    return request({ url: '/ledger/securityTest/securityTestItemClassification', method: 'post', data })
+}
+
+// 安保测试通过情况
+export function securityTestPassingStatus(data) {
+    return request({ url: '/ledger/securityTest/securityTestPassingStatus', method: 'post', data })
+}
+
+// 安保测试区域情况
+export function securityTestRegion(data) {
+    return request({ url: '/ledger/securityTest/securityTestRegion', method: 'post', data })
+}
+
+// 实时质控拦截物品分布
+export function realtimeInterceptionItem(data) {
+    return request({ url: '/ledger/realtimeInterception/realtimeInterceptionItem', method: 'post', data })
+}
+
+// 各岗位监察问题分布
+export function supervisionProblemPosition(data) {
+    return request({ url: '/ledger/supervisionProblem/supervisionProblemPosition', method: 'post', data })
+}
+
+// 获取部门内所有成员列表
+export function getDeptMembers(data) {
+    return request({ url: '/score/dept-portrait/members', method: 'post', data })
+}
+
+// 获取部门成员基本情况分布
+export function getDeptMemberDistribution(data) {
+    return request({ url: '/score/dept-portrait/distribution', method: 'post', data })
+}
+
+// 获取部门成员职位情况分布
+export function getDeptPositionDistribution(data) {
+    return request({ url: '/score/dept-portrait/position-distribution', method: 'post', data })
+}
+
+// 维度得分一览
+export function getDimensionScoreOverview(data) {
+    return request({ url: '/score/dept-portrait/group-portrait', method: 'post', data })
+}
+
+// 1.查询每日通道过检率
+export function countLanePeakThroughput(data) {
+    return request({ url: '/ledger/operationLanePeakThroughput/countLanePeakThroughput', method: 'post', data })
+}
+// 2.查询当天开航每小时区域过检人数
+export function countStationHourlyThroughput(data) {
+    return request({ url: '/ledger/operationStationHourlyThroughput/countStationHourlyThroughput', method: 'get', data })
+}
+// 3.查获信息展示
+export function countSeizureInfoItem(data) {
+    return request({ url: '/ledger/seizureStats/countSeizureInfoItem', method: 'post', data })
+}
+// 4.查获物品分布 
+export function countSeizeSubjectCategoryQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizeSubjectItemQuantity', method: 'post', data })
+}
+// 5.近30天查获数量（总表）
+export function countSeizureTotalQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizureTotalQuantity', method: 'post', data })
+}
+// 6.近30天查获数量（员工/小组/班组/部门）
+export function countSeizureSingleQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizureSingleQuantity', method: 'post', data })
+}
+// 7.查获工作区域分布
+export function countSeizeAreaQuantity(data) {
+    return request({ url: '/ledger/seizureStats/countSeizeAreaQuantity', method: 'post', data })
+}
+// 8.不安全事件物品分布
+export function countSeizureStatsItem(data) {
+    return request({ url: '/ledger/unsafeEvent/countSeizureStatsItem', method: 'post', data })
+}
+// 9.不安全事件类型分布
+export function countSeizureStatsType(data) {
+    return request({ url: '/ledger/unsafeEvent/countSeizureStatsType', method: 'post', data })
+}
+// 10.不安全事件岗位分布
+export function countSeizureStatsPost(data) {
+    return request({ url: '/ledger/unsafeEvent/countSeizureStatsPost', method: 'post', data })
+}
+
+//获取站级别下所有部门的团队画像统计
+export function countStationTeamStats(data) {
+    return request({ url: '/score/dept-portrait/station-team-stats', method: 'post', data })
+}
+
+//获取部门的团队画像统计
+export function countDeptTeamStats(data) {
+    return request({ url: '/score/dept-portrait/team-stats', method: 'post', data })
+}
+//标签得分
+export function countTagScore(params) {
+    return request({ url: '/ledger/scoreEmployeeAdditional/getTotalScoreByEmployee', method: 'get', params: params })
+}

src/components/SectionTitle.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="section-wrapper">
+    <div class="section-header">
+      <div class="section-title">{{ title }}</div>
+      <div class="section-header-right">
+        <slot name="header-right"></slot>
+      </div>
+    </div>
+    <div class="section-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SectionTitle',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.section-wrapper {
+  background: rgba(45, 42, 85, 0.9);
+  border-radius: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
+  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.section-title {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #A78BFA;
+}
+
+
+
+.section-header-right {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.5);
+}
+</style>

src/config.js

@@ -4,7 +4,7 @@ module.exports = {
  // baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.3.221:82/prod-api' : '/prod-api', //生产
   //  baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.3.221:8080' : '/prod-api',
 // baseUrl: process.env.NODE_ENV === 'development' ? 'http://guangxi.qinghe.sundot.cn:8088' : 'http://guangxi.qinghe.sundot.cn:8088/prod-api',
-    baseUrl: 'http://airport-test.samsundot.com:9024/prod-api',//测试
+    baseUrl: 'http://airport-test.samsundot.com:9035/prod-api',//测试
 // baseUrl:'http://airport.samsundot.com:9021/prod-api',//生产
   // 应用信息
   appInfo: {

src/pages.json

@@ -117,6 +117,12 @@
       }
     },
     {
+      "path": "pages/stationProfile/index",
+      "style": {
+        "navigationBarTitleText": "站画像"
+      }
+    },
+    {
       "path": "pages/attendanceStatistics/index",
       "style": {
         "navigationBarTitleText": "考勤统计"

src/pages/stationProfile/components/AreaDistribution.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="area-distribution">
+    <div class="chart-container" ref="areaChart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'AreaDistribution',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        labels: ['T1-A区', 'T1-B区', 'T2-A区', 'T2-B区', 'T3-A区', 'T3-B区'],
+        data: [320, 280, 350, 380, 320, 332]
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.chart) this.chart.dispose()
+          this.initChart()
+        })
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.areaChart) return
+      this.chart = echarts.init(this.$refs.areaChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        grid: {
+          left: '15%',
+          right: '5%',
+          bottom: '15%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10,
+            // rotate: 30
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        series: [{
+          type: 'bar',
+          data: this.chartsData.data,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#A78BFA'
+              }, {
+                offset: 1, color: '#6366F1'
+              }]
+            }
+          },
+          barWidth: '60%'
+        }]
+      }
+      this.chart.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.area-distribution {
+  .chart-container {
+    height: 280rpx;
+  }
+}
+</style>

src/pages/stationProfile/components/AttendanceStatus.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="attendance-grid">
+    <div v-for="(item, index) in attendanceData" :key="index" class="attendance-item">
+      <div class="attendance-number">{{ item.number }}</div>
+      <div class="attendance-label">{{ item.label }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AttendanceStatus',
+  props: {
+    attendanceData: {
+      type: Array,
+      default: () => [
+        { number: '120', label: '主班在岗 | 旅检一部' },
+        { number: '130', label: '主班在岗 | 旅检二部' },
+        { number: '150', label: '主班在岗 | 旅检三部' },
+        { number: '80', label: '备勤在岗 | 旅检一部' },
+        { number: '70', label: '备勤在岗 | 旅检二部' },
+        { number: '65', label: '备勤在岗 | 旅检三部' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.attendance-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24rpx;
+}
+
+.attendance-item {
+  text-align: center;
+  
+  .attendance-number {
+    font-size: 48rpx;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 0.95);
+  }
+  
+  .attendance-label {
+    margin-top: 8rpx;
+    font-size: 20rpx;
+    color: rgba(255, 255, 255, 0.5);
+    line-height: 1.4;
+  }
+}
+</style>

src/pages/stationProfile/components/DailySeizureChart.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="daily-seizure-chart">
+    <div class="chart-section">
+      <div class="sub-title">总表</div>
+      <div class="chart-container" ref="totalChart"></div>
+    </div>
+    <div class="chart-section">
+      <div class="sub-title">部门对比</div>
+      <div class="chart-container" ref="deptChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'DailySeizureChart',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        total: {
+          labels: ['5/20', '5/21', '5/22', '5/23', '5/24', '5/25', '5/26'],
+          data: [280, 320, 290, 350, 310, 280, 152]
+        },
+        dept: {
+          labels: ['5/20', '5/21', '5/22', '5/23', '5/24', '5/25', '5/26'],
+          deptData: [
+            { name: '旅检一部', data: [90, 100, 95, 110, 100, 95, 52] },
+            { name: '旅检二部', data: [95, 110, 100, 120, 105, 90, 50] },
+            { name: '旅检三部', data: [95, 110, 95, 120, 105, 95, 50] }
+          ]
+        }
+      })
+    }
+  },
+  data() {
+    return {
+      charts: {}
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.disposeCharts()
+          this.initCharts()
+        })
+      }
+    }
+  },
+  methods: {
+    disposeCharts() {
+      Object.values(this.charts).forEach(chart => {
+        if (chart) chart.dispose()
+      })
+      this.charts = {}
+    },
+    initCharts() {
+      this.initTotalChart()
+      this.initDeptChart()
+    },
+    initTotalChart() {
+      if (!this.$refs.totalChart) return
+      this.charts.total = echarts.init(this.$refs.totalChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        grid: {
+          left: '10%',
+          right: '5%',
+          bottom: '14%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.total.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        series: [{
+          type: 'line',
+          data: this.chartsData.total.data,
+          smooth: true,
+          itemStyle: {
+            color: '#A78BFA'
+          },
+          areaStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#A78BFA40'
+              }, {
+                offset: 1, color: '#A78BFA00'
+              }]
+            }
+          }
+        }]
+      }
+      this.charts.total.setOption(option)
+    },
+    initDeptChart() {
+      if (!this.$refs.deptChart) return
+      this.charts.dept = echarts.init(this.$refs.deptChart)
+      const colors = ['#60A5FA', '#A78BFA', '#34D399']
+      const series = (this.chartsData.dept.deptData || []).map((dept, index) => ({
+        name: dept.name,
+        type: 'line',
+        data: dept.data,
+        smooth: true,
+        itemStyle: {
+          color: colors[index % colors.length]
+        }
+      }))
+      
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          data: (this.chartsData.dept.deptData || []).map(d => d.name),
+          textStyle: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 9
+          },
+          top: 0
+        },
+        grid: {
+          left: '10%',
+          right: '5%',
+          bottom: '14%',
+          top: '15%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.dept.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        series: series
+      }
+      this.charts.dept.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    Object.values(this.charts).forEach(chart => {
+      if (chart) chart.dispose()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.daily-seizure-chart {
+  .chart-section {
+    margin-bottom: 32rpx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  .sub-title {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.5);
+    margin-bottom: 16rpx;
+  }
+  
+  .chart-container {
+    height: 250rpx;
+  }
+}
+</style>

src/pages/stationProfile/components/DutyInfo.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="duty-grid">
+    <div v-for="(item, index) in dutyData" :key="index" class="duty-item">
+      <div class="duty-label">{{ item.label }}</div>
+      <div class="duty-value">{{ item.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DutyInfo',
+  props: {
+    dutyData: {
+      type: Array,
+      default: () => [
+        { label: '值班领导', value: '李凯' },
+        { label: '安全板块', value: '李凯' },
+        { label: '服务板块', value: '李凯' },
+        { label: '运行板块', value: '李凯' },
+        { label: '备勤值班', value: '李凯' }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.duty-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24rpx;
+}
+
+.duty-item {
+  display: flex;
+  justify-content: space-between;
+  
+  .duty-label {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.5);
+  }
+  
+  .duty-value {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+</style>

src/pages/stationProfile/components/ItemDistribution.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="item-distribution">
+    <div class="chart-container" ref="itemChart"></div>
+    <div class="legend-grid">
+      <div v-for="(item, index) in chartsData.items" :key="index" class="legend-item">
+        <div class="legend-dot" :style="{ backgroundColor: item.color }"></div>
+        <div class="legend-text">{{ item.name }}: {{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'ItemDistribution',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        items: [
+          { name: '刀具', value: 836, color: '#60A5FA' },
+          { name: '易燃易爆', value: 718, color: '#34D399' },
+          { name: '枪支警械', value: 255, color: '#FBBF24' },
+          { name: '管制刀具', value: 1, color: '#EF4444' },
+          { name: '其他', value: 172, color: '#9CA3AF' }
+        ]
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.chart) this.chart.dispose()
+          this.initChart()
+        })
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.itemChart) return
+      this.chart = echarts.init(this.$refs.itemChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: this.chartsData.items.map(item => ({
+            name: item.name,
+            value: item.value,
+            color: item.color
+          })),
+          itemStyle: {
+            color: function(params) {
+              return params.data.color || params.color
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.chart.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.item-distribution {
+  .chart-container {
+    height: 250rpx;
+  }
+  
+  .legend-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8rpx;
+    margin-top: 16rpx;
+  }
+  
+  .legend-item {
+    display: flex;
+    align-items: center;
+    font-size: 24rpx;
+    
+    .legend-dot {
+      width: 12rpx;
+      height: 12rpx;
+      border-radius: 50%;
+      margin-right: 8rpx;
+    }
+    
+    .legend-text {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}
+</style>

src/pages/stationProfile/components/MemberBasicDistribution.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="member-basic-distribution">
+    <div class="chart-list">
+      <div class="chart-item">
+        <div class="chart-label">性别分布</div>
+        <div class="chart-container" ref="genderChart"></div>
+      </div>
+      <div class="chart-item">
+        <div class="chart-label">民族分布</div>
+        <div class="chart-container" ref="ethnicityChart"></div>
+      </div>
+      <div class="chart-item">
+        <div class="chart-label">政治面貌分布</div>
+        <div class="chart-container" ref="politicalChart"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'MemberBasicDistribution',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        gender: { labels: ['女', '男'], data: [120, 198] },
+        ethnicity: { labels: ['汉族', '其他'], data: [280, 38] },
+        political: { labels: ['党员', '群众'], data: [150, 168] }
+      })
+    }
+  },
+  data() {
+    return {
+      charts: {}
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.disposeCharts()
+          this.initCharts()
+        })
+      }
+    }
+  },
+  methods: {
+    disposeCharts() {
+      Object.values(this.charts).forEach(chart => {
+        if (chart) chart.dispose()
+      })
+      this.charts = {}
+    },
+    initCharts() {
+      this.initGenderChart()
+      this.initEthnicityChart()
+      this.initPoliticalChart()
+    },
+    initGenderChart() {
+      if (!this.$refs.genderChart) return
+      this.charts.gender = echarts.init(this.$refs.genderChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['40%', '60%'],
+          data: this.chartsData.gender.data.map((value, index) => ({
+            name: this.chartsData.gender.labels[index],
+            value: value
+          })),
+          itemStyle: {
+            color: function(params) {
+              const colors = ['#60A5FA', '#F472B6']
+              return colors[params.dataIndex]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.charts.gender.setOption(option)
+    },
+    initEthnicityChart() {
+      if (!this.$refs.ethnicityChart) return
+      this.charts.ethnicity = echarts.init(this.$refs.ethnicityChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['40%', '60%'],
+          data: this.chartsData.ethnicity.data.map((value, index) => ({
+            name: this.chartsData.ethnicity.labels[index],
+            value: value
+          })),
+          itemStyle: {
+            color: function(params) {
+              const colors = ['#A78BFA', '#34D399']
+              return colors[params.dataIndex]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.charts.ethnicity.setOption(option)
+    },
+    initPoliticalChart() {
+      if (!this.$refs.politicalChart) return
+      this.charts.political = echarts.init(this.$refs.politicalChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['40%', '60%'],
+          data: this.chartsData.political.data.map((value, index) => ({
+            name: this.chartsData.political.labels[index],
+            value: value
+          })),
+          itemStyle: {
+            color: function(params) {
+              const colors = ['#FBBF24', '#6366F1']
+              return colors[params.dataIndex]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.charts.political.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    Object.values(this.charts).forEach(chart => {
+      if (chart) chart.dispose()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.member-basic-distribution {
+  .chart-list {
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+  }
+  
+  .chart-item {
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+    
+    .chart-label {
+      width: 160rpx;
+      flex-shrink: 0;
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.5);
+    }
+    
+    .chart-container {
+      flex: 1;
+      height:250rpx;
+    }
+  }
+}
+</style>

src/pages/stationProfile/components/MemberPositionDistribution.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="member-position-distribution">
+    <div class="chart-section">
+      <div class="sub-title">职业资格等级分布</div>
+      <div class="chart-container" ref="qualificationChart"></div>
+    </div>
+    <div class="chart-section">
+      <div class="sub-title">开机年限分布</div>
+      <div class="chart-container" ref="experienceChart"></div>
+    </div>
+    <div class="chart-section">
+      <div class="sub-title">岗位资质分布</div>
+      <div class="chart-container" ref="positionChart"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'MemberPositionDistribution',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        qualification: { labels: ['初级', '中级', '高级', '技师'], data: [50, 120, 80, 68] },
+        experience: { labels: ['1-3年', '3-5年', '5-10年', '10年以上'], data: [60, 80, 100, 78] },
+        position: { labels: ['开机员', '开包员', '引导员', '指挥员'], data: [100, 80, 60, 78] }
+      })
+    }
+  },
+  data() {
+    return {
+      charts: {}
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.disposeCharts()
+          this.initCharts()
+        })
+      }
+    }
+  },
+  methods: {
+    disposeCharts() {
+      Object.values(this.charts).forEach(chart => {
+        if (chart) chart.dispose()
+      })
+      this.charts = {}
+    },
+    initCharts() {
+      this.initQualificationChart()
+      this.initExperienceChart()
+      this.initPositionChart()
+    },
+    initQualificationChart() {
+      if (!this.$refs.qualificationChart) return
+      this.charts.qualification = echarts.init(this.$refs.qualificationChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        grid: {
+          left: '10%',
+          right: '5%',
+          bottom: '14%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.qualification.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        series: [{
+          type: 'bar',
+          data: this.chartsData.qualification.data,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#A78BFA'
+              }, {
+                offset: 1, color: '#6366F1'
+              }]
+            }
+          },
+          barWidth: '60%'
+        }]
+      }
+      this.charts.qualification.setOption(option)
+    },
+    initExperienceChart() {
+      if (!this.$refs.experienceChart) return
+      this.charts.experience = echarts.init(this.$refs.experienceChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        grid: {
+          left: '10%',
+          right: '5%',
+          bottom: '14%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.experience.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        series: [{
+          type: 'bar',
+          data: this.chartsData.experience.data,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#34D399'
+              }, {
+                offset: 1, color: '#059669'
+              }]
+            }
+          },
+          barWidth: '60%'
+        }]
+      }
+      this.charts.experience.setOption(option)
+    },
+    initPositionChart() {
+      if (!this.$refs.positionChart) return
+      this.charts.position = echarts.init(this.$refs.positionChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        grid: {
+          left: '10%',
+          right: '5%',
+          bottom: '20%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.position.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        dataZoom: [{
+          type: 'slider',
+          show: true,
+          xAxisIndex: 0,
+          height: 20,
+          bottom: 0,
+          borderColor: 'rgba(255, 255, 255, 0.1)',
+          backgroundColor: 'rgba(45, 42, 85, 0.8)',
+          fillerColor: 'rgba(167, 139, 250, 0.3)',
+          handleStyle: {
+            color: '#A78BFA'
+          },
+          labelStyle: {
+            color: 'rgba(255, 255, 255, 0.5)'
+          }
+        }],
+        series: [{
+          type: 'bar',
+          data: this.chartsData.position.data,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#FBBF24'
+              }, {
+                offset: 1, color: '#F59E0B'
+              }]
+            }
+          },
+          barWidth: '60%'
+        }]
+      }
+      this.charts.position.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    Object.values(this.charts).forEach(chart => {
+      if (chart) chart.dispose()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.member-position-distribution {
+  .chart-section {
+    margin-bottom: 32rpx;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  
+  .sub-title {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.5);
+    margin-bottom: 16rpx;
+  }
+  
+  .chart-container {
+    height: 250rpx;
+  }
+}
+</style>

src/pages/stationProfile/components/PassengerChart.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="passenger-chart">
+    <div class="chart-container" ref="passengerChart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'PassengerChart',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        labels: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
+        areas: {
+          'T1': [120, 280, 450, 380, 420, 500, 480, 320, 180],
+          'T2': [150, 320, 520, 450, 480, 580, 550, 380, 200],
+          'T3': [100, 250, 400, 350, 380, 450, 420, 280, 150]
+        },
+        totalFlow: [370, 850, 1370, 1180, 1280, 1530, 1450, 980, 530]
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.chart) this.chart.dispose()
+          this.initChart()
+        })
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.passengerChart) return
+      this.chart = echarts.init(this.$refs.passengerChart)
+
+      const colors = [
+        ['#4da6ff', '#0f46fa'],
+        ['#7eff7e', '#2ecc71'],
+        ['#bd03fb', '#8a06e8'],
+        ['#ffa500', '#ff6600'],
+        ['#00bfff', '#0077be']
+      ]
+
+      const areaNames = Object.keys(this.chartsData.areas)
+      const seriesBars = areaNames.map((areaName, idx) => {
+        const [c1, c2] = colors[idx % colors.length]
+        return {
+          name: areaName,
+          type: 'bar',
+          yAxisIndex: 0,
+          data: this.chartsData.areas[areaName],
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: c1 },
+              { offset: 1, color: c2 }
+            ])
+          },
+          barWidth: '20%'
+        }
+      })
+
+      const lineData = this.chartsData.totalFlow || []
+      const allBarValues = Object.values(this.chartsData.areas).flat()
+      const maxVal = Math.max(...allBarValues, ...lineData)
+
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: 'rgba(30, 27, 75, 0.95)',
+          borderColor: '#A78BFA',
+          textStyle: { color: '#fff' }
+        },
+        legend: {
+          data: [...areaNames, '人流总数'],
+          textStyle: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
+          top: 0
+        },
+        grid: {
+          left: '10%',
+          right: '8%',
+          bottom: '10%',
+          top: '22%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.labels,
+          axisLabel: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
+          axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '人数',
+            nameTextStyle: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
+            position: 'left',
+            max: Math.ceil(maxVal * 1.2),
+            axisLabel: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
+            axisLine: { show: false },
+            splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.05)' } }
+          },
+          {
+            type: 'value',
+            name: '人流总数',
+            nameTextStyle: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
+            position: 'right',
+            max: Math.ceil(maxVal * 1.2),
+            axisLabel: { color: 'rgba(255, 255, 255, 0.5)', fontSize: 10 },
+            axisLine: { show: false },
+            splitLine: { show: false }
+          }
+        ],
+        series: [
+          ...seriesBars,
+          {
+            name: '人流总数',
+            type: 'line',
+            yAxisIndex: 1,
+            data: lineData,
+            smooth: true,
+            itemStyle: { color: '#ffd93d' },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255,217,61,0.3)' },
+                { offset: 1, color: 'rgba(255,217,61,0.05)' }
+              ])
+            }
+          }
+        ]
+      }
+      this.chart.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.passenger-chart {
+  .chart-container {
+    height: 380rpx;
+  }
+}
+</style>

src/pages/stationProfile/components/SecurityTestCharts.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="security-test-charts">
+    <SectionTitle title="安保测试物品分类">
+      <div class="chart-container" ref="itemsChart"></div>
+    </SectionTitle>
+    <SectionTitle title="安保测试通过结果">
+      <div class="chart-container" ref="resultsChart"></div>
+    </SectionTitle>
+    <SectionTitle title="安保测试区域情况">
+      <div class="chart-container" ref="areasChart"></div>
+    </SectionTitle>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import SectionTitle from '@/components/SectionTitle.vue'
+
+export default {
+  name: 'SecurityTestCharts',
+  components: {
+    SectionTitle
+  },
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        items: {
+          labels: ['违禁品', '限制品', '生活用品'],
+          data: [45, 35, 20]
+        },
+        results: {
+          labels: ['通过', '未通过'],
+          data: [85, 15]
+        },
+        areas: {
+          labels: ['T1', 'T2', 'T3'],
+          data: [35, 35, 30]
+        }
+      })
+    }
+  },
+  data() {
+    return {
+      charts: {}
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.disposeCharts()
+          this.initCharts()
+        })
+      }
+    }
+  },
+  methods: {
+    disposeCharts() {
+      Object.values(this.charts).forEach(chart => {
+        if (chart) chart.dispose()
+      })
+      this.charts = {}
+    },
+    initCharts() {
+      this.initItemsChart()
+      this.initResultsChart()
+      this.initAreasChart()
+    },
+    initItemsChart() {
+      if (!this.$refs.itemsChart) return
+      this.charts.items = echarts.init(this.$refs.itemsChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: this.chartsData.items.labels.map((label, index) => ({
+            name: label,
+            value: this.chartsData.items.data[index]
+          })),
+          itemStyle: {
+            color: function (params) {
+              const colors = ['#60A5FA', '#A78BFA', '#34D399', '#FBBF24', '#F472B6', '#EF4444', '#A78BFA', '#6366F1']
+              return colors[params.dataIndex % colors.length]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.charts.items.setOption(option)
+    },
+    initResultsChart() {
+      if (!this.$refs.resultsChart) return
+      this.charts.results = echarts.init(this.$refs.resultsChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: this.chartsData.results.labels.map((label, index) => ({
+            name: label,
+            value: this.chartsData.results.data[index]
+          })),
+          itemStyle: {
+            color: function (params) {
+              const colors = ['#60A5FA', '#A78BFA', '#34D399', '#FBBF24', '#F472B6', '#EF4444', '#A78BFA', '#6366F1']
+              return colors[params.dataIndex % colors.length]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.charts.results.setOption(option)
+    },
+    initAreasChart() {
+      if (!this.$refs.areasChart) return
+      this.charts.areas = echarts.init(this.$refs.areasChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: this.chartsData.areas.labels.map((label, index) => ({
+            name: label,
+            value: this.chartsData.areas.data[index]
+          })),
+          itemStyle: {
+            color: function (params) {
+              const colors = ['#60A5FA', '#A78BFA', '#34D399', '#FBBF24', '#F472B6', '#EF4444', '#A78BFA', '#6366F1']
+              return colors[params.dataIndex % colors.length]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.charts.areas.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    Object.values(this.charts).forEach(chart => {
+      if (chart) chart.dispose()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.security-test-charts {
+  display: flex;
+
+
+  flex-direction: column;
+}
+.chart-container {
+  width: 100%;
+  height: 240px;
+}
+</style>

src/pages/stationProfile/components/SeizureInfo.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="seizure-info">
+    <div class="total-section">
+      <div class="donut-container">
+        <div class="chart-container" ref="seizureDonut"></div>
+      </div>
+      <div class="dept-bar-container">
+        <div class="chart-container" ref="deptSeizureBar"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'SeizureInfo',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        total: 1982,
+        depts: {
+          labels: ['旅检一部', '旅检二部', '旅检三部'],
+          data: [620, 680, 682]
+        }
+      })
+    }
+  },
+  data() {
+    return {
+      charts: {}
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initCharts()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          this.disposeCharts()
+          this.initCharts()
+        })
+      }
+    }
+  },
+  methods: {
+    disposeCharts() {
+      Object.values(this.charts).forEach(chart => {
+        if (chart) chart.dispose()
+      })
+      this.charts = {}
+    },
+    initCharts() {
+      this.initSeizureDonut()
+      this.initDeptSeizureBar()
+    },
+    initSeizureDonut() {
+      if (!this.$refs.seizureDonut) return
+      this.charts.seizureDonut = echarts.init(this.$refs.seizureDonut)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['60%', '80%'],
+          data: [
+            { value: this.chartsData.total, name: '查获总数' }
+          ],
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 1,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#A78BFA'
+              }, {
+                offset: 1, color: '#6366F1'
+              }]
+            }
+          },
+          label: {
+            show: false
+          }
+        }],
+        graphic: [
+          {
+            type: 'text',
+            left: 'center',
+            top: '38%',
+            style: {
+              text: String(this.chartsData.total),
+              fill: 'rgba(255, 255, 255, 0.9)',
+              fontSize: 14,
+              fontWeight: 'bold',
+              textAlign: 'center'
+            },
+            z: 100
+          },
+          {
+            type: 'text',
+            left: 'center',
+            top: '58%',
+            style: {
+              text: '查获总数',
+              fill: 'rgba(255, 255, 255, 0.5)',
+              fontSize: 15,
+              textAlign: 'center'
+            },
+            z: 100
+          }
+        ]
+      }
+      this.charts.seizureDonut.setOption(option)
+    },
+    initDeptSeizureBar() {
+      if (!this.$refs.deptSeizureBar) return
+      this.charts.deptSeizureBar = echarts.init(this.$refs.deptSeizureBar)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        grid: {
+          left: '15%',
+          right: '5%',
+          bottom: '15%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.depts.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          // axisLabel: {
+          //   color: 'rgba(255, 255, 255, 0.5)',
+          //   fontSize: 9,
+          //   rotate: 30
+          // }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 9
+          }
+        },
+        series: [{
+          type: 'bar',
+          data: this.chartsData.depts.data,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#60A5FA'
+              }, {
+                offset: 1, color: '#3B82F6'
+              }]
+            }
+          },
+          barWidth: '50%'
+        }]
+      }
+      this.charts.deptSeizureBar.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    Object.values(this.charts).forEach(chart => {
+      if (chart) chart.dispose()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.seizure-info {
+  .total-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .donut-container {
+    position: relative;
+    width: 240rpx;
+    height: 240rpx;
+    margin-bottom: 24rpx;
+    
+    .chart-container {
+      min-height: 240rpx;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .dept-bar-container {
+    width: 100%;
+    height: 240rpx;
+
+    .chart-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/pages/stationProfile/components/TeamMemberTable.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="team-member-table">
+    <scroll-view scroll-x class="table-scroll">
+      <table class="data-table">
+        <thead>
+          <tr>
+            <th>部门</th>
+            <th>员工数量</th>
+            <th>党员数量</th>
+            <th>平均年龄</th>
+            <th>平均司龄</th>
+            <th>证书数量</th>
+            <th>开机年限</th>
+            <th>综合得分</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in chartsData" :key="index">
+            <td>{{ item.department }}</td>
+            <td>{{ item.employeeCount }}</td>
+            <td>{{ item.partyMemberCount }}</td>
+            <td>{{ item.avgAge }}</td>
+            <td>{{ item.avgTenure }}</td>
+            <td>{{ item.certificateCount }}</td>
+            <td>{{ item.machineYears }}</td>
+            <td>{{ item.comprehensiveScore }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </scroll-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TeamMemberTable',
+  props: {
+    chartsData: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.team-member-table {
+  .table-scroll {
+    width: 100%;
+  }
+  
+  .data-table {
+    width: 100%;
+    font-size: 24rpx;
+    border-collapse: collapse;
+    
+    th, td {
+      padding: 16rpx 8rpx;
+      text-align: left;
+      white-space: nowrap;
+    }
+    
+    th {
+      color: rgba(255, 255, 255, 0.5);
+      border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
+    }
+    
+    td {
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+}
+</style>

src/pages/stationProfile/components/UnsafeItemsChart.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="unsafe-items-chart">
+    <div class="chart-container" ref="itemsChart"></div>
+    <div class="items-list">
+      <div v-for="(item, index) in chartsData.items" :key="index" class="list-item">
+        <div class="item-name">{{ item.name }}</div>
+        <div class="item-value">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'UnsafeItemsChart',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        items: [
+          { name: '打火机', value: 57 },
+          { name: '固体酒精', value: 55 },
+          { name: '手机', value: 56 },
+          { name: '不合格充电宝', value: 56 },
+          { name: '登山杖', value: 55 }
+        ]
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.chart) this.chart.dispose()
+          this.initChart()
+        })
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.itemsChart) return
+      this.chart = echarts.init(this.$refs.itemsChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: this.chartsData.items.map(item => ({
+            name: item.name,
+            value: item.value
+          })),
+          itemStyle: {
+            color: function(params) {
+              const colors = ['#60A5FA', '#A78BFA', '#34D399', '#FBBF24', '#F472B6']
+              return colors[params.dataIndex]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.chart.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.unsafe-items-chart {
+  .chart-container {
+    height: 220rpx;
+  }
+  
+  .items-list {
+    margin-top: 16rpx;
+  }
+  
+  .list-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    padding: 8rpx 0;
+    
+    .item-name {
+      color: rgba(255, 255, 255, 0.7);
+    }
+    
+    .item-value {
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+}
+</style>

src/pages/stationProfile/components/UnsafePositionChart.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="unsafe-position-chart">
+    <div class="chart-container" ref="positionChart"></div>
+    <div class="position-info">
+      <div class="info-text">X光机操作员: {{ chartsData.total }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'UnsafePositionChart',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        total: 279,
+        positions: {
+          labels: ['X光机', '开包台', '引导岗', '验证岗', '维序岗'],
+          data: [279, 0, 0, 0, 0]
+        }
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.chart) this.chart.dispose()
+          this.initChart()
+        })
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.positionChart) return
+      this.chart = echarts.init(this.$refs.positionChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        grid: {
+          left: '15%',
+          right: '5%',
+          bottom: '15%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.positions.labels,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.1)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10,
+            // rotate: 30
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255, 255, 255, 0.05)'
+            }
+          },
+          axisLabel: {
+            color: 'rgba(255, 255, 255, 0.5)',
+            fontSize: 10
+          }
+        },
+        series: [{
+          type: 'bar',
+          data: this.chartsData.positions.data,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [{
+                offset: 0, color: '#F472B6'
+              }, {
+                offset: 1, color: '#DB2777'
+              }]
+            }
+          },
+          barWidth: '60%'
+        }]
+      }
+      this.chart.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.unsafe-position-chart {
+  .chart-container {
+    height: 240rpx;
+  }
+  
+  .position-info {
+    margin-top: 16rpx;
+    text-align: center;
+    
+    .info-text {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+</style>

src/pages/stationProfile/components/UnsafeTypesChart.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="unsafe-types-chart">
+    <div class="chart-container" ref="typesChart"></div>
+    <div class="types-list">
+      <div v-for="(item, index) in chartsData.types" :key="index" class="list-item">
+        <div class="item-name">{{ item.name }}</div>
+        <div class="item-value">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'UnsafeTypesChart',
+  props: {
+    chartsData: {
+      type: Object,
+      default: () => ({
+        types: [
+          { name: '一类', value: 56 },
+          { name: '二类', value: 57 },
+          { name: '三类', value: 56 },
+          { name: '四类', value: 55 },
+          { name: '五类', value: 55 }
+        ]
+      })
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  watch: {
+    chartsData: {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.chart) this.chart.dispose()
+          this.initChart()
+        })
+      }
+    }
+  },
+  methods: {
+    initChart() {
+      if (!this.$refs.typesChart) return
+      this.chart = echarts.init(this.$refs.typesChart)
+      const option = {
+        responsive: true,
+        maintainAspectRatio: false,
+        series: [{
+          type: 'pie',
+          radius: ['50%', '70%'],
+          data: this.chartsData.types.map(item => ({
+            name: item.name,
+            value: item.value
+          })),
+          itemStyle: {
+            color: function(params) {
+              const colors = ['#A78BFA', '#6366F1', '#8B5CF6', '#7C3AED', '#6D28D9']
+              return colors[params.dataIndex]
+            }
+          },
+          label: {
+            show: true,
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 10,
+            formatter: '{b}\n{d}%'
+          }
+        }]
+      }
+      this.chart.setOption(option)
+    }
+  },
+  beforeDestroy() {
+    if (this.chart) this.chart.dispose()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.unsafe-types-chart {
+  .chart-container {
+    height: 220rpx;
+  }
+  
+  .types-list {
+    margin-top: 16rpx;
+  }
+  
+  .list-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 24rpx;
+    padding: 8rpx 0;
+    
+    .item-name {
+      color: rgba(255, 255, 255, 0.7);
+    }
+    
+    .item-value {
+      color: rgba(255, 255, 255, 0.9);
+    }
+  }
+}
+</style>

src/pages/stationProfile/index.vue

@@ -0,0 +1,732 @@
+<template>
+    <view class="station-profile-page">
+        <div class="page-header">
+            <div class="header-title">
+                <div class="title-main">旅检部综合信息展示</div>
+                <div class="header-right">
+                    <div class="current-time">{{ currentTime }}</div>
+                    <!-- <div class="menu-icon">
+            <uni-icons type="bars" size="20" color="#A78BFA"></uni-icons>
+          </div> -->
+                </div>
+            </div>
+
+            <div class="time-filter">
+                <scroll-view scroll-x class="time-scroll">
+                    <div class="time-tags">
+                        <div v-for="(tag, index) in timeTags" :key="index"
+                            :class="['time-tag', { active: selectedTimeTag === index }]" @click="onTimeTagClick(index)">
+                            {{ tag }}
+                        </div>
+                    </div>
+                </scroll-view>
+                <div v-if="selectedTimeTag === 4" class="date-range-picker">
+                    <picker mode="date" :value="startDate" @change="onStartDateChange">
+                        <div class="date-input" :class="{ filled: startDate }">
+                            {{ startDate || '开始日期' }}
+                        </div>
+                    </picker>
+                    <span class="date-separator">至</span>
+                    <picker mode="date" :value="endDate" @change="onEndDateChange">
+                        <div class="date-input" :class="{ filled: endDate }">
+                            {{ endDate || '结束日期' }}
+                        </div>
+                    </picker>
+                </div>
+            </div>
+
+            <div class="tab-nav">
+                <div class="tab-item" :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
+                    站点画像
+                </div>
+                <div class="tab-item" :class="{ active: activeTab === 'data' }" @click="activeTab = 'data'">
+                    运行数据
+                </div>
+            </div>
+        </div>
+
+        <div class="page-content">
+            <SectionTitle title="值班信息">
+                <template #header-right>
+                    <div class="date-text">{{ currentDate }}</div>
+                </template>
+                <DutyInfo :dutyData="dutyData" />
+            </SectionTitle>
+
+            <SectionTitle title="人员在岗情况">
+                <AttendanceStatus :attendanceData="attendanceData" />
+            </SectionTitle>
+
+            <div v-if="activeTab === 'profile'">
+                <SectionTitle title="团队成员">
+                    <TeamMemberTable :chartsData="teamMemberData" />
+                </SectionTitle>
+
+                <SectionTitle title="成员基本情况分布">
+                    <MemberBasicDistribution :chartsData="memberBasicData" />
+                </SectionTitle>
+
+                <SectionTitle title="成员职位情况分布">
+                    <MemberPositionDistribution :chartsData="memberPositionData" />
+                </SectionTitle>
+            </div>
+
+            <div v-if="activeTab === 'data'">
+                <SectionTitle title="当天开航每小时各区过检人数组合图">
+                    <PassengerChart :chartsData="passengerData" />
+                </SectionTitle>
+
+
+                <SectionTitle title="查获信息展示">
+                    <SeizureInfo :chartsData="seizureInfoData" />
+                </SectionTitle>
+
+                <SectionTitle title="查获物品分布">
+                    <ItemDistribution :chartsData="itemDistributionData" />
+                </SectionTitle>
+
+
+                <SectionTitle title="每日查获数量">
+                    <DailySeizureChart :chartsData="dailySeizureData" />
+                </SectionTitle>
+
+                <SectionTitle title="查获工作区域分布">
+                    <AreaDistribution :chartsData="areaDistributionData" />
+                </SectionTitle>
+
+
+                <SectionTitle title="不安全事件物品分布">
+                    <UnsafeItemsChart :chartsData="unsafeItemsData" />
+                </SectionTitle>
+
+                <SectionTitle title="不安全事件类型分布">
+                    <UnsafeTypesChart :chartsData="unsafeTypesData" />
+                </SectionTitle>
+
+
+                <SectionTitle title="不安全事件查获岗位分布">
+                    <UnsafePositionChart :chartsData="unsafePositionData" />
+                </SectionTitle>
+
+                <SecurityTestCharts :chartsData="securityTestData" />
+            </div>
+        </div>
+    </view>
+</template>
+
+<script>
+import SectionTitle from '@/components/SectionTitle.vue'
+import TeamMemberTable from './components/TeamMemberTable.vue'
+import MemberBasicDistribution from './components/MemberBasicDistribution.vue'
+import MemberPositionDistribution from './components/MemberPositionDistribution.vue'
+import PassengerChart from './components/PassengerChart.vue'
+import SeizureInfo from './components/SeizureInfo.vue'
+import ItemDistribution from './components/ItemDistribution.vue'
+import DailySeizureChart from './components/DailySeizureChart.vue'
+import AreaDistribution from './components/AreaDistribution.vue'
+import UnsafeItemsChart from './components/UnsafeItemsChart.vue'
+import UnsafeTypesChart from './components/UnsafeTypesChart.vue'
+import UnsafePositionChart from './components/UnsafePositionChart.vue'
+import SecurityTestCharts from './components/SecurityTestCharts.vue'
+import DutyInfo from './components/DutyInfo.vue'
+import AttendanceStatus from './components/AttendanceStatus.vue'
+import {
+    countStationTeamStats,
+    getDeptMemberDistribution,
+    getDeptPositionDistribution,
+    countStationHourlyThroughput,
+    countSeizureInfoItem,
+    countSeizeSubjectCategoryQuantity,
+    countSeizureTotalQuantity,
+    countSeizureSingleQuantity,
+    countSeizeAreaQuantity,
+    countSeizureStatsItem,
+    countSeizureStatsType,
+    countSeizureStatsPost,
+    securityTestItemClassification,
+    securityTestPassingStatus,
+    securityTestRegion
+} from '@/api/portraitManagement/portraitManagement'
+
+const itemColors = ['#60A5FA', '#34D399', '#FBBF24', '#EF4444', '#9CA3AF', '#A78BFA', '#F472B6', '#6EE7B7']
+
+export default {
+    components: {
+        SectionTitle,
+        TeamMemberTable,
+        MemberBasicDistribution,
+        MemberPositionDistribution,
+        PassengerChart,
+        SeizureInfo,
+        ItemDistribution,
+        DailySeizureChart,
+        AreaDistribution,
+        UnsafeItemsChart,
+        UnsafeTypesChart,
+        UnsafePositionChart,
+        SecurityTestCharts,
+        DutyInfo,
+        AttendanceStatus
+    },
+    data() {
+        return {
+            activeTab: 'profile',
+            selectedTimeTag: 3,
+            timeTags: ['近一周', '近一月', '近三月', '近一年', '自定义时间范围'],
+            currentTime: '',
+            timer: null,
+            startDate: '',
+            endDate: '',
+            dutyData: [
+                { label: '值班领导', value: '李凯' },
+                { label: '安全板块', value: '李凯' },
+                { label: '服务板块', value: '李凯' },
+                { label: '运行板块', value: '李凯' },
+                { label: '备勤值班', value: '李凯' }
+            ],
+            attendanceData: [
+                { number: '120', label: '主班在岗 | 旅检一部' },
+                { number: '130', label: '主班在岗 | 旅检二部' },
+                { number: '150', label: '主班在岗 | 旅检三部' },
+                { number: '80', label: '备勤在岗 | 旅检一部' },
+                { number: '70', label: '备勤在岗 | 旅检二部' },
+                { number: '65', label: '备勤在岗 | 旅检三部' }
+            ],
+            teamMemberData: [],
+            memberBasicData: {
+                gender: { labels: [], data: [] },
+                ethnicity: { labels: [], data: [] },
+                political: { labels: [], data: [] }
+            },
+            memberPositionData: {
+                qualification: { labels: [], data: [] },
+                experience: { labels: [], data: [] },
+                position: { labels: [], data: [] }
+            },
+            passengerData: {
+                labels: [],
+                areas: {}
+            },
+            seizureInfoData: {
+                total: 0,
+                depts: {
+                    labels: [],
+                    data: []
+                }
+            },
+            itemDistributionData: {
+                items: []
+            },
+            dailySeizureData: {
+                total: {
+                    labels: [],
+                    data: []
+                },
+                dept: {
+                    labels: [],
+                    data: {}
+                }
+            },
+            areaDistributionData: {
+                labels: [],
+                data: []
+            },
+            unsafeItemsData: {
+                items: []
+            },
+            unsafeTypesData: {
+                types: []
+            },
+            unsafePositionData: {
+                total: 0,
+                positions: {
+                    labels: [],
+                    data: []
+                }
+            },
+            securityTestData: {
+                items: {
+                    labels: [],
+                    data: []
+                },
+                results: {
+                    labels: [],
+                    data: []
+                },
+                areas: {
+                    labels: [],
+                    data: []
+                }
+            }
+        }
+    },
+    computed: {
+        currentDate() {
+            const now = new Date()
+            const year = now.getFullYear()
+            const month = String(now.getMonth() + 1).padStart(2, '0')
+            const day = String(now.getDate()).padStart(2, '0')
+            const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+            const weekDay = weekDays[now.getDay()]
+            return `${year}年${month}月${day}日 ${weekDay}`
+        }
+    },
+    mounted() {
+        this.updateTime()
+        this.timer = setInterval(() => {
+            this.updateTime()
+        }, 1000)
+        this.onTimeTagClick(3)
+    },
+    beforeDestroy() {
+        if (this.timer) {
+            clearInterval(this.timer)
+        }
+    },
+    methods: {
+        updateTime() {
+            const now = new Date()
+            const hours = String(now.getHours()).padStart(2, '0')
+            const minutes = String(now.getMinutes()).padStart(2, '0')
+            const seconds = String(now.getSeconds()).padStart(2, '0')
+            this.currentTime = `${hours}:${minutes}:${seconds}`
+        },
+        fetchAllData(params) {
+            this.fetchTeamData(params)
+            this.fetchMemberDistribution(params)
+            this.fetchPositionDistribution(params)
+            const copyParams = { startDate:params.startDate, endDate:params.endDate }
+            this.fetchPassengerData(copyParams)
+            this.fetchSeizureInfo(copyParams)
+            this.fetchItemDistribution(copyParams)
+            this.fetchDailySeizure(copyParams)
+            this.fetchAreaDistribution(copyParams)
+            this.fetchUnsafeItems(copyParams)
+            this.fetchUnsafeTypes(copyParams)
+            this.fetchUnsafePosition(copyParams)
+            this.fetchSecurityTestData(copyParams)
+        },
+        buildTimeParams() {
+            const now = new Date()
+            const today = this.formatDate(now)
+            if (this.selectedTimeTag === 4) {
+                if (this.startDate && this.endDate) {
+                    return { startDate: this.startDate, endDate: this.endDate, deptId: '100' }
+                }
+                return { deptId: '100' }
+            }
+            let startDate
+            switch (this.selectedTimeTag) {
+                case 0:
+                    startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+                    break
+                case 1:
+                    startDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate())
+                    break
+                case 2:
+                    startDate = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())
+                    break
+                case 3:
+                    startDate = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate())
+                    break
+                default:
+                    return { deptId: '100' }
+            }
+            return { startDate: this.formatDate(startDate), endDate: today, deptId: '100' }
+        },
+        formatDate(date) {
+            const y = date.getFullYear()
+            const m = String(date.getMonth() + 1).padStart(2, '0')
+            const d = String(date.getDate()).padStart(2, '0')
+            return `${y}-${m}-${d}`
+        },
+        onTimeTagClick(index) {
+            this.selectedTimeTag = index
+            if (index === 4) {
+                this.startDate = ''
+                this.endDate = ''
+                return
+            }
+            const params = this.buildTimeParams()
+            this.fetchAllData(params)
+        },
+        onStartDateChange(e) {
+            this.startDate = e.detail.value
+            if (this.startDate && this.endDate) {
+                this.fetchAllData(this.buildTimeParams())
+            }
+        },
+        onEndDateChange(e) {
+            this.endDate = e.detail.value
+            if (this.startDate && this.endDate) {
+                this.fetchAllData(this.buildTimeParams())
+            }
+        },
+        fetchTeamData(params) {
+            countStationTeamStats(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    this.teamMemberData = (res.data || []).map(item => ({
+                        department: item.deptName,
+                        employeeCount: item.employeeCount,
+                        partyMemberCount: item.partyMemberCount,
+                        avgAge: item.avgAge,
+                        avgTenure: item.avgWorkYears,
+                        certificateCount: item.qualificationLevel,
+                        machineYears: item.avgXrayOperatorYears,
+                        comprehensiveScore: item.totalScore
+                    }))
+                }
+            }).catch(() => { })
+        },
+        fetchMemberDistribution(params) {
+            getDeptMemberDistribution(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    this.memberBasicData = {
+                        gender: {
+                            labels: (res.data.sexDistribution || []).map(item => item.name),
+                            data: (res.data.sexDistribution || []).map(item => item.count)
+                        },
+                        ethnicity: {
+                            labels: (res.data.nationDistribution || []).map(item => item.name),
+                            data: (res.data.nationDistribution || []).map(item => item.count)
+                        },
+                        political: {
+                            labels: (res.data.politicalDistribution || []).map(item => item.name),
+                            data: (res.data.politicalDistribution || []).map(item => item.count)
+                        }
+                    }
+                }
+
+            }).catch(() => { })
+        },
+        fetchPositionDistribution(params) {
+            getDeptPositionDistribution(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    this.memberPositionData = {
+                        qualification: {
+                            labels: (res.data.qualificationDistribution || []).map(item => item.name),
+                            data: (res.data.qualificationDistribution || []).map(item => item.count)
+                        },
+                        experience: {
+                            labels: (res.data.xrayYearDistribution || []).map(item => item.name),
+                            data: (res.data.xrayYearDistribution || []).map(item => item.count)
+                        },
+                        position: {
+                            labels: (res.data.positionDistribution || []).map(item => item.name),
+                            data: (res.data.positionDistribution || []).map(item => item.count)
+                        }
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchPassengerData(params) {
+            countStationHourlyThroughput(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const rawData = res.data || []
+                    const hours = rawData.map(item => item.hour)
+                    const areaMap = {}
+                    rawData.forEach(item => {
+                        (item.areaList || []).forEach(area => {
+                            if (!areaMap[area.areaName]) {
+                                areaMap[area.areaName] = []
+                            }
+                            areaMap[area.areaName].push(area.areaFlow)
+                        })
+                    })
+                    this.passengerData = {
+                        labels: hours,
+                        areas: areaMap,
+                        totalFlow: rawData.map(item => item.totalHourFlow)
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchSeizureInfo(params) {
+            countSeizureInfoItem(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const itemList = res.data.itemList || []
+                    this.seizureInfoData = {
+                        total: res.data.totalSeizeNum || 0,
+                        depts: {
+                            labels: itemList.map(item => item.name),
+                            data: itemList.map(item => item.seizeNum)
+                        }
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchItemDistribution(params) {
+            countSeizeSubjectCategoryQuantity(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const items = (res.data || []).map((item, index) => ({
+                        name: item.itemName,
+                        value: item.itemNum,
+                        color: itemColors[index % itemColors.length]
+                    }))
+                    this.itemDistributionData = { items }
+                }
+            }).catch(() => { })
+        },
+        fetchDailySeizure(params) {
+            countSeizureTotalQuantity(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    this.dailySeizureData.total = {
+                        labels: data.map(item => item.recordDate),
+                        data: data.map(item => item.seizeQuantity)
+                    }
+                }
+            }).catch(() => { })
+            countSeizureSingleQuantity(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const rawData = res.data || []
+                    const dates = rawData.map(item => item.recordDate)
+                    const deptMap = {}
+                    rawData.forEach(dayItem => {
+                        (dayItem.items || []).forEach(subItem => {
+                            if (!deptMap[subItem.groupName]) {
+                                deptMap[subItem.groupName] = []
+                            }
+                            deptMap[subItem.groupName].push(subItem.seizeQuantity)
+                        })
+                    })
+                    this.dailySeizureData.dept = {
+                        labels: dates,
+                        deptData: Object.keys(deptMap).map(name => ({
+                            name,
+                            data: deptMap[name]
+                        }))
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchAreaDistribution(params) {
+            countSeizeAreaQuantity(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    this.areaDistributionData = {
+                        labels: data.map(item => item.workArea),
+                        data: data.map(item => item.areaSeizeNum)
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchUnsafeItems(params) {
+            countSeizureStatsItem(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    this.unsafeItemsData = {
+                        items: data.map(item => ({
+                            name: item.itemName,
+                            value: item.itemNum
+                        }))
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchUnsafeTypes(params) {
+            countSeizureStatsType(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    this.unsafeTypesData = {
+                        types: data.map(item => ({
+                            name: item.eventType,
+                            value: item.eventTypeNum
+                        }))
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchUnsafePosition(params) {
+            countSeizureStatsPost(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    const total = data.reduce((sum, item) => sum + (item.count || 0), 0)
+                    this.unsafePositionData = {
+                        total: total,
+                        positions: {
+                            labels: data.map(item => item.positionName),
+                            data: data.map(item => item.positionNum)
+                        }
+                    }
+                }
+            }).catch(() => { })
+        },
+        fetchSecurityTestData(params) {
+            securityTestItemClassification(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    this.securityTestData.items = {
+                        labels: data.map(item => item.name),
+                        data: data.map(item => item.total)
+                    }
+                }
+            }).catch(() => { })
+            securityTestPassingStatus(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    this.securityTestData.results = {
+                        labels: data.map(item => item.name),
+                        data: data.map(item => item.total)
+                    }
+                }
+            }).catch(() => { })
+            securityTestRegion(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const data = res.data || []
+                    this.securityTestData.areas = {
+                        labels: data.map(item => item.name),
+                        data: data.map(item => item.total)
+                    }
+                }
+            }).catch(() => { })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.station-profile-page {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
+    padding-bottom: 40rpx;
+}
+
+.page-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(30, 27, 75, 0.9);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
+}
+
+.header-title {
+    padding: 24rpx 32rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .title-main {
+        font-size: 36rpx;
+        font-weight: bold;
+        background: linear-gradient(90deg, #A78BFA, #60A5FA);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+
+    .current-time {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    .menu-icon {
+        display: flex;
+        align-items: center;
+    }
+}
+
+.time-filter {
+    padding: 16rpx 32rpx;
+    background: rgba(30, 27, 75, 0.8);
+}
+
+.time-scroll {
+    width: 100%;
+}
+
+.time-tags {
+    display: flex;
+    gap: 16rpx;
+    white-space: nowrap;
+}
+
+.time-tag {
+    padding: 8rpx 10rpx;
+    border-radius: 50rpx;
+    background: rgba(45, 42, 85, 0.8);
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.6);
+    transition: all 0.3s;
+
+    &.active {
+        background: #A78BFA;
+        color: #1E1B4B;
+        font-weight: 500;
+    }
+}
+
+.date-range-picker {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    margin-top: 16rpx;
+    padding-top: 16rpx;
+    border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+}
+
+.date-input {
+    flex: 1;
+    padding: 12rpx 24rpx;
+    border-radius: 12rpx;
+    background: rgba(45, 42, 85, 0.8);
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.4);
+    text-align: center;
+
+    &.filled {
+        color: rgba(255, 255, 255, 0.9);
+    }
+}
+
+.date-separator {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.5);
+    flex-shrink: 0;
+}
+
+.tab-nav {
+    padding: 16rpx 32rpx;
+    display: flex;
+    justify-content: center;
+    gap: 64rpx;
+}
+
+.tab-item {
+    font-size: 28rpx;
+    color: rgba(255, 255, 255, 0.5);
+    padding-bottom: 8rpx;
+    border-bottom: 2rpx solid transparent;
+    transition: all 0.3s;
+
+    &.active {
+        color: #A78BFA;
+        border-bottom-color: #A78BFA;
+    }
+}
+
+.page-content {
+    padding: 32rpx;
+    display: flex;
+    flex-direction: column;
+    /* gap: 32rpx; */
+}
+
+.two-col-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24rpx;
+}
+
+.date-text {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.5);
+}
+</style>