feat: 新增部门/班组/员工画像页面，重构公共组件

1.  新增部门、班组、小组、员工画像四个页面路由与基础文件
2.  将站画像页面的公共组件抽离到全局components目录
3.  添加员工画像相关的后端接口
4.  修复站画像页面的组件引用路径

src/api/portraitManagement/portraitManagement.js

@@ -98,4 +98,11 @@ export function countDeptTeamStats(data) {
 //标签得分
 export function countTagScore(params) {
     return request({ url: '/ledger/scoreEmployeeAdditional/getTotalScoreByEmployee', method: 'get', params: params })
+}
+// ===== 员工画像 =====
+export function getEmployeePortrait(params) {
+    return request({ url: '/score/portrait/employee', method: 'get', params })
+}
+export function searchPortraitUsers(keyword) {
+    return request({ url: '/score/portrait/searchUsers', method: 'get', params: { keyword } })
 }

src/pages.json

@@ -123,6 +123,30 @@
       }
     },
     {
+      "path": "pages/deptProfile/index",
+      "style": {
+        "navigationBarTitleText": "部门画像"
+      }
+    },
+    {
+      "path": "pages/teamProfile/index",
+      "style": {
+        "navigationBarTitleText": "班组画像"
+      }
+    },
+        {
+      "path": "pages/groupProfile/index",
+      "style": {
+        "navigationBarTitleText": "小组画像"
+      }
+    },
+    {
+      "path": "pages/employeeProfile/index",
+      "style": {
+        "navigationBarTitleText": "员工画像"
+      }
+    },
+    {
       "path": "pages/attendanceStatistics/index",
       "style": {
         "navigationBarTitleText": "考勤统计"

src/pages/components/DeptStats.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="dept-stats">
+        <div class="stats-grid">
+            <div class="stat-item">
+                <div class="stat-value">{{ statsData.totalScore || 0 }}</div>
+                <div class="stat-label">综合得分</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value">{{ statsData.employeeCount || 0 }}</div>
+                <div class="stat-label">人员数量</div>
+            </div>
+            <div class="stat-item center">
+                <div class="dept-name">{{ statsData.deptName || '' }}</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value">{{ statsData.avgAge || 0 }}</div>
+                <div class="stat-label">平均年龄</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value">{{ statsData.avgWorkYears || 0 }}</div>
+                <div class="stat-label">平均司龄</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'DeptStats',
+    props: {
+        statsData: {
+            type: Object,
+            default: () => ({})
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.dept-stats {
+    width: 100%;
+    padding: 16rpx 0;
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 16rpx;
+    align-items: center;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24rpx 16rpx;
+    background: linear-gradient(135deg, rgba(33, 33, 58, 0.95), rgba(15, 70, 250, 0.2));
+    border-radius: 16rpx;
+    border: 1rpx solid rgba(159, 3, 193, 0.3);
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2rpx;
+        background: linear-gradient(90deg, #0f46fa, transparent);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        height: 2rpx;
+        background: linear-gradient(90deg, transparent, #9903C1);
+    }
+}
+
+.stat-value {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 0 0 12rpx rgba(15, 70, 250, 0.8);
+    line-height: 1;
+}
+
+.stat-label {
+    font-size: 20rpx;
+    color: #a0c4ff;
+    margin-top: 8rpx;
+}
+
+.stat-item.center {
+    padding: 32rpx 16rpx;
+
+    .dept-name {
+        font-size: 28rpx;
+        font-weight: bold;
+        color: #fff;
+        text-align: center;
+    }
+}
+</style>

src/pages/components/InterceptionDistribution.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="interception-distribution">
+        <div class="chart-container" ref="chart"></div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+const countryColors = ['#6DA6FE', '#9963FB', '#FCE661', '#F801FA', '#95E530', '#22C2CC', '#F76723']
+
+export default {
+    name: 'InterceptionDistribution',
+    props: {
+        chartsData: {
+            type: Array,
+            default: () => []
+        }
+    },
+    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.chart) return
+            this.chart = echarts.init(this.$refs.chart)
+            const option = {
+                responsive: true,
+                maintainAspectRatio: false,
+                grid: {
+                    left: '25%',
+                    right: '10%',
+                    bottom: '10%',
+                    top: '10%'
+                },
+                xAxis: {
+                    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
+                    }
+                },
+                yAxis: {
+                    type: 'category',
+                    data: this.chartsData.map(item => item.name),
+                    axisLine: { show: false },
+                    axisTick: { show: false },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.05)'
+                        }
+                    },
+                    axisLabel: {
+                        color: 'rgba(255, 255, 255, 0.6)',
+                        fontSize: 9,
+                        formatter: function (value) {
+                            return value.length > 5 ? value.substring(0, 6) + '...' : value
+                        }
+                    }
+                },
+                series: [
+                    {
+                        name: '拦截数量',
+                        type: 'bar',
+                        data: this.chartsData.map(item => item.num),
+                        itemStyle: {
+                            borderRadius: [0, 5, 5, 0],
+                            color: function (param) {
+                                return countryColors[param.dataIndex % countryColors.length]
+                            }
+                        },
+                        label: {
+                            show: true,
+                            position: 'right',
+                            color: '#FFF',
+                            fontSize: 9,
+                            fontWeight: 500
+                        }
+                    }
+                ],
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor: 'rgba(13,80,122,0.95)',
+                    borderColor: '#70CFE7',
+                    textStyle: { color: '#fff' }
+                }
+            }
+            this.chart.setOption(option)
+        }
+    },
+    beforeDestroy() {
+        if (this.chart) this.chart.dispose()
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.interception-distribution {
+    .chart-container {
+        width: 100%;
+        height: 250rpx;
+    }
+}
+</style>

src/pages/components/ProfileRadar.vue

@@ -0,0 +1,224 @@
+<template>
+    <div class="profile-radar">
+        <div class="chart-container" ref="radarChart"></div>
+        <div class="radar-list">
+            <div v-for="(item, index) in radarData" :key="index" class="radar-item">
+                <span class="item-label">{{ item.name }}</span>
+                <div class="progress-row">
+                    <div class="progress-bar">
+                        <div class="progress-fill"
+                            :style="{ width: ((item.finalScore || 0) / (maxScore || 1) * 100) + '%', background: `linear-gradient(90deg, ${item.color}33, ${item.color})` }">
+                            <span class="progress-end" :style="{ background: item.color }"></span>
+                        </div>
+                    </div>
+                    <span class="item-value">{{ item.finalScore || 0 }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+const freshColors = [
+    '#00e5ff', '#36d399', '#fbbf24', '#f472b6', '#a78bfa',
+    '#34d399', '#f97316', '#2dd4bf', '#e879f9', '#38bdf8'
+]
+
+export default {
+    name: 'ProfileRadar',
+    props: {
+        chartsData: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            chart: null
+        }
+    },
+    computed: {
+        radarData() {
+            const data = this.chartsData.length > 0 ? this.chartsData : []
+            return data.map((item, index) => ({
+                ...item,
+                color: item.color || freshColors[index % freshColors.length]
+            }))
+        },
+        maxScore() {
+            const allScores = this.radarData.map(item => item.finalScore || 0)
+            return allScores.length > 0 ? Math.max(...allScores) : 100
+        },
+        indicators() {
+            const data = this.radarData
+            return data.map(item => ({
+                name: item.name,
+                max: Math.max(this.maxScore, 1)
+            }))
+        }
+    },
+    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.radarChart) return
+            this.chart = echarts.init(this.$refs.radarChart)
+            const option = {
+                responsive: true,
+                maintainAspectRatio: false,
+                grid: {
+                    top: 20,
+                    bottom: 20,
+                    left: 30,
+                    right: 30
+                },
+                radar: {
+                    indicator: this.indicators,
+                    center: ['50%', '50%'],
+                    radius: '60%',
+                    splitNumber: 5,
+                    axisLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.2)'
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        }
+                    },
+                    splitArea: { show: false },
+                    axisName: {
+                        color: 'rgba(255, 255, 255, 0.6)',
+                        fontSize: 10
+                    }
+                },
+                series: [
+                    {
+                        type: 'radar',
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        data: [
+                            {
+                                value: this.radarData.map(item => item.finalScore || 0),
+                                name: '综合得分',
+                                lineStyle: {
+                                    color: '#4DC8FE',
+                                    width: 2
+                                },
+                                itemStyle: {
+                                    color: '#fff',
+                                    borderWidth: 1,
+                                    borderColor: '#00C8DA'
+                                },
+                                areaStyle: {
+                                    color: 'rgba(77, 200, 254, 0.2)'
+                                }
+                            }
+                        ]
+                    }
+                ],
+                tooltip: {
+                    trigger: 'item',
+                    backgroundColor: 'rgba(13, 80, 122, 0.95)',
+                    borderColor: '#70CFE7',
+                    textStyle: {
+                        color: '#fff'
+                    }
+                }
+            }
+            this.chart.setOption(option)
+        }
+    },
+    beforeDestroy() {
+        if (this.chart) this.chart.dispose()
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.profile-radar {
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+
+    .chart-container {
+        width: 100%;
+        height: 350rpx;
+    }
+
+    .radar-list {
+        display: flex;
+        flex-direction: column;
+        gap: 12rpx;
+        padding: 0 10rpx;
+
+        .radar-item {
+            display: flex;
+            flex-direction: column;
+            gap: 6rpx;
+            font-size: 24rpx;
+
+            .item-label {
+                color: rgba(160, 196, 255, 0.9);
+            }
+
+            .progress-row {
+                display: flex;
+                align-items: center;
+                gap: 10rpx;
+
+                .progress-bar {
+                    flex: 1;
+                    height: 10rpx;
+                    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: -4rpx;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            width: 6rpx;
+                            height: 18rpx;
+                            background: #fff;
+                            border-radius: 4rpx;
+                        }
+                    }
+                }
+
+                .item-value {
+                    width: 80rpx;
+                    text-align: right;
+                    color: #fff;
+                    font-weight: bold;
+                    font-size: 24rpx;
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/components/SeizedNumAll.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="seized-num-all">
+        <div class="chart-container" ref="chart"></div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+    name: 'SeizedNumAll',
+    props: {
+        chartsData: {
+            type: Array,
+            default: () => []
+        }
+    },
+    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.chart) return
+            this.chart = echarts.init(this.$refs.chart)
+            const option = {
+                responsive: true,
+                maintainAspectRatio: false,
+                grid: {
+                    left: '15%',
+                    right: '5%',
+                    bottom: '15%',
+                    top: '10%'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.chartsData.map(item => item.recordDate),
+                    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: [
+                    {
+                        name: '查获数',
+                        type: 'line',
+                        data: this.chartsData.map(item => item.seizeQuantity),
+                        smooth: true,
+                        itemStyle: {
+                            color: '#71B138'
+                        },
+                        lineStyle: {
+                            color: '#71B138'
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    { offset: 0, color: 'rgba(113, 177, 56, 0.3)' },
+                                    { offset: 1, color: 'rgba(113, 177, 56, 0)' }
+                                ]
+                            }
+                        }
+                    }
+                ],
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor: 'rgba(13,80,122,0.95)',
+                    borderColor: '#70CFE7',
+                    textStyle: { color: '#fff' }
+                }
+            }
+            this.chart.setOption(option)
+        }
+    },
+    beforeDestroy() {
+        if (this.chart) this.chart.dispose()
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.seized-num-all {
+    .chart-container {
+        width: 100%;
+        height: 250rpx;
+    }
+}
+</style>

src/pages/components/SupervisionDistribution.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="supervision-distribution">
+        <div class="chart-container" ref="chart"></div>
+    </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+    name: 'SupervisionDistribution',
+    props: {
+        chartsData: {
+            type: Array,
+            default: () => []
+        }
+    },
+    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.chart) return
+            this.chart = echarts.init(this.$refs.chart)
+            const option = {
+                responsive: true,
+                maintainAspectRatio: false,
+                grid: {
+                    left: '15%',
+                    right: '5%',
+                    bottom: '20%',
+                    top: '10%'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.chartsData.map(item => item.name),
+                    axisLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        }
+                    },
+                    axisLabel: {
+                        color: 'rgba(255, 255, 255, 0.5)',
+                        fontSize: 9,
+                        rotate: 30
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '人数',
+                    nameTextStyle: {
+                        color: 'rgba(255, 255, 255, 0.5)',
+                        fontSize: 9
+                    },
+                    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: [
+                    {
+                        name: '查获数量',
+                        type: 'bar',
+                        data: this.chartsData.map(item => item.num),
+                        itemStyle: {
+                            borderRadius: [5, 5, 0, 0],
+                            color: '#F462CC'
+                        },
+                        label: {
+                            show: true,
+                            position: 'top',
+                            color: '#F462CC',
+                            fontSize: 9,
+                            fontWeight: 500
+                        },
+                        barWidth: '40%'
+                    }
+                ],
+                tooltip: {
+                    trigger: 'axis',
+                    backgroundColor: 'rgba(13,80,122,0.95)',
+                    borderColor: '#70CFE7',
+                    textStyle: { color: '#fff' }
+                }
+            }
+            this.chart.setOption(option)
+        }
+    },
+    beforeDestroy() {
+        if (this.chart) this.chart.dispose()
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.supervision-distribution {
+    .chart-container {
+        width: 100%;
+        height: 250rpx;
+    }
+}
+</style>

src/pages/deptProfile/index.vue

@@ -0,0 +1,758 @@
+<template>
+    <view class="dept-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>
+            </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="部门概况">
+                <DeptStats :statsData="deptStatsData" />
+            </SectionTitle>
+
+            <div v-if="activeTab === 'profile'">
+                <SectionTitle title="七维得分一览">
+                    <ProfileRadar :chartsData="radarData" />
+                </SectionTitle>
+
+                <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="每日查获数量(总表)">
+                    <SeizedNumAll :chartsData="dailySeizureTotalData" />
+                </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" />
+
+                <SectionTitle title="各岗位监察问题分布">
+                    <SupervisionDistribution :chartsData="supervisionData" />
+                </SectionTitle>
+
+                <SectionTitle title="实时质控拦截物品分布">
+                    <InterceptionDistribution :chartsData="interceptionData" />
+                </SectionTitle>
+            </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 ProfileRadar from '../components/ProfileRadar.vue'
+import SeizedNumAll from '../components/SeizedNumAll.vue'
+import SupervisionDistribution from '../components/SupervisionDistribution.vue'
+import InterceptionDistribution from '../components/InterceptionDistribution.vue'
+import DeptStats from '../components/DeptStats.vue'
+import {
+    countStationTeamStats,
+    getDeptMemberDistribution,
+    getDeptPositionDistribution,
+    countStationHourlyThroughput,
+    countSeizureInfoItem,
+    countSeizeSubjectCategoryQuantity,
+    countSeizureTotalQuantity,
+    countSeizureSingleQuantity,
+    countSeizeAreaQuantity,
+    countSeizureStatsItem,
+    countSeizureStatsType,
+    countSeizureStatsPost,
+    securityTestItemClassification,
+    securityTestPassingStatus,
+    securityTestRegion,
+    getDimensionScoreOverview,
+    countLanePeakThroughput,
+    realtimeInterceptionItem,
+    supervisionProblemPosition,
+    countDeptTeamStats
+} from '@/api/portraitManagement/portraitManagement'
+
+const itemColors = ['#60A5FA', '#34D399', '#FBBF24', '#EF4444', '#9CA3AF', '#A78BFA', '#F472B6', '#6EE7B7']
+
+export default {
+    name: 'DeptProfile',
+    components: {
+        SectionTitle,
+        TeamMemberTable,
+        MemberBasicDistribution,
+        MemberPositionDistribution,
+        PassengerChart,
+        SeizureInfo,
+        ItemDistribution,
+        DailySeizureChart,
+        AreaDistribution,
+        UnsafeItemsChart,
+        UnsafeTypesChart,
+        UnsafePositionChart,
+        SecurityTestCharts,
+        ProfileRadar,
+        SeizedNumAll,
+        SupervisionDistribution,
+        InterceptionDistribution,
+        DeptStats
+    },
+    data() {
+        return {
+            activeTab: 'profile',
+            selectedTimeTag: 3,
+            timeTags: ['近一周', '近一月', '近三月', '近一年', '自定义时间范围'],
+            currentTime: '',
+            timer: null,
+            startDate: '',
+            endDate: '',
+            radarData: [],
+            teamMemberData: [],
+            memberBasicData: {
+                gender: { labels: [], data: [] },
+                ethnicity: { labels: [], data: [] },
+                political: { labels: [], data: [] }
+            },
+            memberPositionData: {
+                qualification: { labels: [], data: [] },
+                experience: { labels: [], data: [] },
+                position: { labels: [], data: [] }
+            },
+            passengerData: {
+                labels: [],
+                areas: {},
+                totalFlow: []
+            },
+            seizureInfoData: {
+                total: 0,
+                depts: {
+                    labels: [],
+                    data: []
+                }
+            },
+            itemDistributionData: {
+                items: []
+            },
+            dailySeizureTotalData: [],
+            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: []
+                }
+            },
+            supervisionData: [],
+            interceptionData: [],
+            deptStatsData: {}
+        }
+    },
+    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.fetchDeptStats(params)
+            this.fetchRadarData(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)
+            this.fetchSupervisionData(copyParams)
+            this.fetchInterceptionData(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())
+            }
+        },
+        fetchDeptStats(params) {
+            countDeptTeamStats(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    this.deptStatsData = res.data
+                }
+            }).catch(() => { })
+        },
+        fetchRadarData(params) {
+            getDimensionScoreOverview(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    this.radarData = res.data.dimensions || []
+                }
+            }).catch(() => { })
+        },
+        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) {
+            countLanePeakThroughput(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    const rawData = res.data || []
+                    const hours = [...new Set(rawData.map(item => item.hour))]
+                    const areaMap = {}
+                    rawData.forEach(item => {
+                        (item.laneList || []).forEach(lane => {
+                            if (!areaMap[lane.laneName]) {
+                                areaMap[lane.laneName] = []
+                            }
+                            areaMap[lane.laneName].push(lane.throughputRate)
+                        })
+                    })
+                    this.passengerData = {
+                        labels: hours,
+                        areas: areaMap,
+                        totalFlow: rawData.map(item => item.totalLaneThroughput)
+                    }
+                }
+            }).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) {
+                    this.dailySeizureTotalData = res.data || []
+                    this.dailySeizureData.total = {
+                        labels: (res.data || []).map(item => item.recordDate),
+                        data: (res.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(() => { })
+        },
+        fetchSupervisionData(params) {
+            supervisionProblemPosition(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    this.supervisionData = (res.data || []).map(item => ({
+                        num: item.total,
+                        name: item.name
+                    }))
+                }
+            }).catch(() => { })
+        },
+        fetchInterceptionData(params) {
+            realtimeInterceptionItem(params).then(res => {
+                if (res.code === 200 && res.data) {
+                    this.interceptionData = (res.data || []).map(item => ({
+                        num: item.total,
+                        name: item.name
+                    }))
+                }
+            }).catch(() => { })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.dept-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);
+    }
+}
+
+.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;
+}
+</style>

src/pages/stationProfile/index.vue

@@ -116,20 +116,20 @@
 
 <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 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,