antissoft / lvqianmeiye_ERP

<template>
    <div class="report-test">
        <el-card class="test-card">
            <div slot="header" class="test-header">
                <h2>📊 报表功能测试</h2>
                <p>测试报表服务接口是否正常工作</p>
            </div>

            <div class="test-content">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card class="api-test-card">
                            <div slot="header">
                                <span>API接口测试</span>
                            </div>
                            <div class="test-buttons">
                                <el-button type="primary" @click="testDashboardData" :loading="loading.dashboard">
                                    测试仪表盘数据
                                </el-button>
                                <el-button type="success" @click="testStoreRanking" :loading="loading.storeRanking">
                                    测试门店排行榜
                                </el-button>
                                <el-button type="warning" @click="testHealthCoachRanking"
                                    :loading="loading.healthCoachRanking">
                                    测试健康师排行榜
                                </el-button>
                                <el-button type="info" @click="testGoldTriangleRanking"
                                    :loading="loading.goldTriangleRanking">
                                    测试金三角排行榜
                                </el-button>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :span="12">
                        <el-card class="result-card">
                            <div slot="header">
                                <span>测试结果</span>
                                <el-button size="mini" @click="clearResults">清空结果</el-button>
                            </div>
                            <div class="test-results">
                                <div v-for="(result, index) in testResults" :key="index" class="result-item">
                                    <div class="result-header">
                                        <span class="result-title">{{ result.title }}</span>
                                        <el-tag :type="result.success ? 'success' : 'danger'" size="mini">
                                            {{ result.success ? '成功' : '失败' }}
                                        </el-tag>
                                    </div>
                                    <div class="result-content">
                                        <pre>{{ result.data }}</pre>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>

                <div class="navigation-section">
                    <el-card>
                        <div slot="header">
                            <span>页面导航</span>
                        </div>
                        <div class="nav-buttons">
                            <el-button type="primary" size="large" @click="goToReport">
                                <i class="el-icon-data-analysis"></i>
                                进入报表页面
                            </el-button>
                            <el-button type="success" size="large" @click="goToSalaryCalculation">
                                <i class="el-icon-money"></i>
                                进入工资统计
                            </el-button>
                        </div>
                    </el-card>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import {
    getDashboardData,
    getStorePerformanceRanking,
    getHealthCoachPerformanceRanking,
    getGoldTrianglePerformanceRanking
} from '@/api/report'

export default {
    name: 'ReportTest',
    data() {
        return {
            loading: {
                dashboard: false,
                storeRanking: false,
                healthCoachRanking: false,
                goldTriangleRanking: false
            },
            testResults: []
        }
    },

    methods: {
        // 测试仪表盘数据
        async testDashboardData() {
            this.loading.dashboard = true
            try {
                const response = await getDashboardData({
                    statisticsMonth: '202509'
                })

                this.addTestResult('仪表盘数据', true, response.data)
            } catch (error) {
                this.addTestResult('仪表盘数据', false, error.message)
            } finally {
                this.loading.dashboard = false
            }
        },

        // 测试门店排行榜
        async testStoreRanking() {
            this.loading.storeRanking = true
            try {
                const response = await getStorePerformanceRanking({
                    statisticsMonth: '202509',
                    topCount: 10
                })

                this.addTestResult('门店排行榜', true, response.data)
            } catch (error) {
                this.addTestResult('门店排行榜', false, error.message)
            } finally {
                this.loading.storeRanking = false
            }
        },

        // 测试健康师排行榜
        async testHealthCoachRanking() {
            this.loading.healthCoachRanking = true
            try {
                const response = await getHealthCoachPerformanceRanking({
                    statisticsMonth: '202509',
                    topCount: 20
                })

                this.addTestResult('健康师排行榜', true, response.data)
            } catch (error) {
                this.addTestResult('健康师排行榜', false, error.message)
            } finally {
                this.loading.healthCoachRanking = false
            }
        },

        // 测试金三角排行榜
        async testGoldTriangleRanking() {
            this.loading.goldTriangleRanking = true
            try {
                const response = await getGoldTrianglePerformanceRanking({
                    statisticsMonth: '202509',
                    topCount: 10
                })

                this.addTestResult('金三角排行榜', true, response.data)
            } catch (error) {
                this.addTestResult('金三角排行榜', false, error.message)
            } finally {
                this.loading.goldTriangleRanking = false
            }
        },

        // 添加测试结果
        addTestResult(title, success, data) {
            this.testResults.unshift({
                title,
                success,
                data: JSON.stringify(data, null, 2),
                timestamp: new Date().toLocaleTimeString()
            })

            // 限制结果数量
            if (this.testResults.length > 10) {
                this.testResults = this.testResults.slice(0, 10)
            }
        },

        // 清空结果
        clearResults() {
            this.testResults = []
        },

        // 进入报表页面
        goToReport() {
            this.$router.push('/report')
        },

        // 进入工资统计
        goToSalaryCalculation() {
            this.$router.push('/salaryCalculation')
        }
    }
}
</script>

<style lang="scss" scoped>
.report-test {
    padding: 20px;
    background: #f5f5f5;
    min-height: 100vh;

    .test-card {
        max-width: 1200px;
        margin: 0 auto;

        .test-header {
            text-align: center;

            h2 {
                margin: 0 0 10px 0;
                color: #333;
            }

            p {
                margin: 0;
                color: #666;
            }
        }

        .test-content {

            .api-test-card,
            .result-card {
                height: 400px;

                .test-buttons {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;

                    .el-button {
                        width: 100%;
                    }
                }

                .test-results {
                    height: 320px;
                    overflow-y: auto;

                    .result-item {
                        margin-bottom: 15px;
                        padding: 10px;
                        border: 1px solid #e4e7ed;
                        border-radius: 4px;
                        background: #fafafa;

                        .result-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 8px;

                            .result-title {
                                font-weight: bold;
                                color: #333;
                            }
                        }

                        .result-content {
                            pre {
                                margin: 0;
                                font-size: 12px;
                                color: #666;
                                white-space: pre-wrap;
                                word-break: break-all;
                                max-height: 200px;
                                overflow-y: auto;
                            }
                        }
                    }
                }
            }
        }

        .navigation-section {
            margin-top: 20px;

            .nav-buttons {
                display: flex;
                justify-content: center;
                gap: 20px;

                .el-button {
                    padding: 15px 30px;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>