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

<template>
    <div class="quality-control-container">
        <div class="section-title">质控分析</div>

        <div class="data-block">
            <div class="block-title-row">
                <div class="block-title">查获数据TOP3</div>
            </div>
            <div class="data-grid" v-if="prohibitedTop3 && prohibitedTop3.length > 0">
                <div v-for="(item, index) in prohibitedTop3" :key="index" class="data-item">
                    <div class="item-label">{{ item.categoryName }}总数</div>
                    <div class="item-value">{{ item.quantity }}</div>
                    <div class="item-ratio">占比<span class="ratio-highlight">{{ item.percentage }}%</span></div>
                </div>
            </div>
            <div v-else class="no-data-text">暂无查获数据</div>
            <div class="note-text" v-if="prohibitedTop3Desc">注：{{ prohibitedTop3Desc }}</div>
        </div>

        <div class="data-block">
            <div class="block-title-row">
                <div class="block-title">质控发现问题</div>
                <div class="total-count">总数：<span class="count-highlight">{{ checkProblemDistributionTotal }}</span>
                </div>
            </div>
            <div class="data-grid" v-if="checkProblemDistribution && checkProblemDistribution.length > 0">
                <div v-for="(item, index) in checkProblemDistribution" :key="index" class="data-item">
                    <div class="item-label">{{ item.name }}类总数</div>
                    <div class="item-value">{{ item.total }}</div>
                    <div class="item-ratio">占比<span class="ratio-highlight">{{ item.percentage }}%</span></div>
                </div>
            </div>
            <div v-else class="no-data-text">暂未发现问题</div>
            <div class="note-text" v-if="checkProblemDistributionDesc">注：{{ checkProblemDistributionDesc }}</div>
        </div>

        <div class="data-block">
            <div class="block-title-row">
                <div class="block-title">培训测试正确率分析</div>
                <div class="total-count">平均正确率：<span class="count-highlight">{{ avgCorrectRate }}%</span></div>
            </div>
            <div class="data-grid" v-if="accuracyAnalysis && accuracyAnalysis.length > 0">
                <div v-for="(item, index) in accuracyAnalysis" :key="index" class="data-item">
                    <div class="item-label">{{ item.categoryName }}</div>
                    <div class="item-value" :class="getValueClass(item.color)">{{ item.correctRate }}%</div>
                    <div class="item-status" :class="getValueClass(item.color)">{{ item.label }}</div>
                </div>
            </div>
            <div v-else class="no-data-text">暂无培训测试数据</div>
            <div class="note-text" v-if="accuracyAnalysisDesc">注：{{ accuracyAnalysisDesc }}</div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'QualityControlAnalysis',
    data() {
        return {
            checkProblemDistribution: [],
            checkProblemDistributionTotal: 0,
            checkProblemDistributionDesc: '',
            avgCorrectRate: 0,
            accuracyAnalysisDesc: '',
            accuracyAnalysis: [],
            prohibitedTop3: [],
            prohibitedTop3Desc: ''
        }
    },
    props: {
        checkProblemDistributionData: {
            type: Object,
            default: () => ({})
        },
        accuracyAnalysisData: {
            type: Object,
            default: () => ({})
        },
        prohibitedTop3Data: {
            type: Array,
            default: () => ([])
        },
        concealmentPositionTop1Data: {
            type: Array,
            default: () => ([])
        },
    },
    watch: {
        // 监听checkProblemDistributionData变化，重新计算数据
        checkProblemDistributionData: {
            handler(newVal) {
                this.calculateCheckProblemDistribution();
            },
            deep: true,
            immediate: true
        },
        accuracyAnalysisData: {
            handler(newVal) {
                this.calculateAccuracyAnalysis();
            },
            deep: true,
            immediate: true
        },
        prohibitedTop3Data: {
            handler(newVal) {
                this.calculateProhibitedTop3();
            },
            deep: true,
            immediate: true
        },
        concealmentPositionTop1Data: {
            handler(newVal) {
                this.calculateProhibitedTop1();
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        calculateProhibitedTop1() {
            let str = this.concealmentPositionTop1Data.map(item => `${item.checkPositionNameOne}/${item.checkPositionNameTwo}`).join('/');

            this.prohibitedTop3Desc = str ? `隐匿重点部位以[${str}]为主` : "";
        },
        calculateAccuracyAnalysis() {
            const { avgCorrectRate, note, categoryList } = this.accuracyAnalysisData || [];
            this.avgCorrectRate = avgCorrectRate;
            this.accuracyAnalysisDesc = note;
            this.accuracyAnalysis = categoryList
        },

        // 计算违禁品TOP3数据
        calculateProhibitedTop3() {

            this.prohibitedTop3 = this.prohibitedTop3Data || [];
        },

        // 根据颜色获取值对应的CSS类
        getValueClass(color) {
            if (color === 'green') return 'value-green';
            if (color === 'red') return 'value-red';
            return '';
        },


        // 计算检查问题分布数据
        calculateCheckProblemDistribution() {

            const { checkProblemDistributionItemDtoList, desc } = this.checkProblemDistributionData || [];
            this.checkProblemDistributionDesc = desc;
            // 计算总问题数
            this.checkProblemDistributionTotal = (checkProblemDistributionItemDtoList || []).reduce((sum, item) => sum + (item.total || 0), 0);

            // 计算每个项目的百分比
            this.checkProblemDistribution = (checkProblemDistributionItemDtoList || []).map(item => ({
                ...item,
                percentage: this.checkProblemDistributionTotal > 0 ?
                    ((item.total / this.checkProblemDistributionTotal) * 100).toFixed(2) : '0.00'
            }));
        }
    }
}
</script>

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

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

.data-block {
    background: #EFF2FE;
    border-radius: 15rpx;
    padding: 25rpx;
    margin-bottom: 25rpx;

    &:last-child {
        margin-bottom: 0;
    }
}

.block-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
}

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

.total-count {
    font-size: 26rpx;
    color: #666666;
}

.count-highlight {
    color: #1890FF;
    font-weight: bold;
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 20rpx;
}

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

.item-label {
    font-size: 24rpx;
    color: #666666;
    margin-bottom: 8rpx;
}

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

.value-green {
    color: #00AE41 !important;
}

.value-red {
    color: #F96060 !important;
}

.item-ratio {
    font-size: 24rpx;
    color: #666666;
}

.ratio-highlight {
    color: #F96060;
    font-weight: bold;
}

.item-status {
    font-size: 24rpx;
    color: #666666;
}



.note-text {
    font-size: 24rpx;
    color: #F96060;
    line-height: 1.6;
}

.no-data-text {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
    padding: 40rpx 0;
    font-style: italic;
}
</style>