meilan-app/src/pages/home-new/components/performanceAnalysis.vue

<template>
    <div class="performance-analysis-container">
        <div class="section-title">绩效分析</div>

        <div class="cards-container">
            <div v-for="(item, index) in performanceData" :key="index" class="card-item">
                <div class="card-header">
                    <div class="card-title">{{ item.name }}数据明细</div>
                    <image :src="getTrophyIcon(item.rank)" class="trophy-icon"></image>
                </div>
                <div class="card-content">
                    <div class="data-item">
                        <div class="data-value">{{ item.totalScore || '0.0' }}</div>
                        <div class="data-label">总分</div>
                    </div>
                    <div class="divider"></div>
                    <div class="data-item">
                        <div class="data-value">{{ item.seizureEfficiency || '0.0' }}</div>
                        <div class="data-label">查获效率</div>
                    </div>
                    <div class="data-item">
                        <div class="data-value">{{ item.inspectionPassRate || '0.0' }}</div>
                        <div class="data-label">巡视检查合格率</div>
                    </div>
                    <div class="data-item">
                        <div class="data-value">{{ item.trainingScore || '0.0' }}</div>
                        <div class="data-label">培训得分</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PerformanceAnalysis',
    data() {
        return {
            trophyImages: {
                one: '/static/images/icon/one.png',
                two: '/static/images/icon/two.png',
                three: '/static/images/icon/three.png'
            }
        }
    },
    props: {
        performanceData: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        // performanceData: {
        //     handler(newVal) {
        //         console.log('绩效数据已更新:', newVal);
                
        //     },
        //     immediate: true,
        //     deep: true
        // }
    },
    methods: {
        getTrophyIcon(rank) {
            switch(rank) {
                case 1:
                    return this.trophyImages.one;
                case 2:
                    return this.trophyImages.two;
                case 3:
                    return this.trophyImages.three;
                default:
                    return ''; // 没有奖杯图标
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.performance-analysis-container {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 70rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 30rpx;
}

.cards-container {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}

.card-item {
    background: #EFF2FE;
    border-radius: 30rpx;
    padding: 20rpx;
}



.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
}

.card-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
}

.trophy-icon {
    width: 45rpx;
    height: 45rpx;
}

.card-content {
    display: flex;
    align-items: center;
    gap: 30rpx;
}

.data-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.data-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 8rpx;
}

.data-label {
    font-size: 24rpx;
    color: #666666;
}

.divider {
    width: 2rpx;
    height: 80rpx;
    background: #CCD3EF;
}
</style>