dailyReportnew.html 15.5 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业绩报表</title>
    <script src="config.js"></script>
    <script src="auth-utils.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
            color: #2e7d32;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
            border-radius: 20px;
            padding: 24px 32px;
            box-shadow: 0 8px 32px 0 rgba(76, 175, 80, 0.15);
            border: 1px solid #e8f5e9;
        }

        .title {
            font-size: 1.5em;
            font-weight: bold;
            color: #fff;
            letter-spacing: 2px;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .btn-return {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.95em;
            font-weight: 600;
            transition: all 0.2s ease;
            box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3);
        }

        .btn-return:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        .summary-section {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 32px 0 rgba(76, 175, 80, 0.15);
            margin-bottom: 24px;
            border: 1px solid #e8f5e9;
            overflow: hidden;
        }

        .summary-header {
            background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
            padding: 16px 24px;
            border-bottom: 2px solid #4CAF50;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .summary-row:last-child {
            margin-bottom: 0;
        }

        .summary-label {
            font-size: 0.95em;
            color: #2e7d32;
            font-weight: 600;
        }

        .summary-value {
            font-size: 1.1em;
            color: #43a047;
            font-weight: bold;
        }

        .completion-rate {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 600;
        }

        .table-container {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 32px 0 rgba(76, 175, 80, 0.15);
            border: 1px solid #e8f5e9;
            overflow: hidden;
        }

        .table-header {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 16px 0;
        }

        .table-header-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            gap: 10px;
            padding: 0 20px;
            font-weight: 600;
            font-size: 0.95em;
            letter-spacing: 0.5px;
        }

        .table-body {
            max-height: 600px;
            overflow-y: auto;
        }

        .table-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            gap: 10px;
            padding: 12px 20px;
            border-bottom: 1px solid #e8f5e9;
            transition: background-color 0.2s ease;
            align-items: center;
        }

        .table-row:hover {
            background-color: #f9fff9;
        }

        .table-row:nth-child(even) {
            background-color: #fafafa;
        }

        .table-row:nth-child(even):hover {
            background-color: #f0f8f0;
        }

        .department-cell {
            font-weight: 600;
            color: #2e7d32;
            font-size: 0.95em;
        }

        .store-cell {
            color: #43a047;
            font-weight: 500;
        }

        .number-cell {
            text-align: right;
            font-weight: 600;
            color: #2e7d32;
        }

        .completion-cell {
            text-align: right;
            font-weight: 600;
        }

        .completion-high {
            color: #4CAF50;
        }

        .completion-medium {
            color: #FF9800;
        }

        .completion-low {
            color: #F44336;
        }

        .rank-cell {
            text-align: right;
            font-weight: bold;
        }

        .rank-1 {
            color: #FFD700;
        }

        .rank-2 {
            color: #C0C0C0;
        }

        .rank-3 {
            color: #CD7F32;
        }

        .rank-other {
            color: #4A90E2;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(4px);
        }

        .loading-overlay.show {
            display: flex;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 4px solid #e8f5e9;
            border-top: 4px solid #43a047;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        .loading-text {
            margin-top: 20px;
            color: #388e3c;
            font-size: 16px;
            font-weight: 500;
            text-align: center;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media (max-width: 768px) {
            body {
                padding: 16px;
            }

            .header {
                flex-direction: column;
                gap: 16px;
                text-align: center;
                padding: 20px 24px;
            }

            .table-header-row,
            .table-row {
                grid-template-columns: 1fr 1fr 1fr;
                font-size: 0.85em;
            }

            .table-row {
                padding: 10px 16px;
            }
        }
    </style>
</head>
<body>
    <!-- 等待效果遮罩层 -->
    <div class="loading-overlay" id="loadingOverlay">
        <div style="text-align: center;">
            <div class="loading-spinner"></div>
            <div class="loading-text" id="loadingText">加载中...</div>
        </div>
    </div>

    <div class="container">
        <div class="header">
            <h1 class="title">业绩报表</h1>
            <div class="header-actions">
                <button class="btn-return" onclick="window.location.href='index.html'">
                    <span>←</span>
                    返回
                </button>
            </div>
        </div>

        <!-- 汇总信息 -->
        <div class="summary-section">
            <div class="summary-header">
                <div class="summary-row">
                    <span class="summary-label">时间</span>
                    <span class="summary-value" id="reportDate">7月31日</span>
                    <span class="summary-label">时间占比</span>
                    <span class="summary-value">100%</span>
                </div>
                <div class="summary-row">
                    <span class="summary-label">目标业绩</span>
                    <span class="summary-value" id="targetPerformance">5,690,000</span>
                    <span class="summary-label">完成业绩</span>
                    <span class="summary-value" id="actualPerformance">5,377,233</span>
                    <span class="summary-label">完成率</span>
                    <span class="completion-rate" id="completionRate">95%</span>
                </div>
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <div class="table-header">
                <div class="table-header-row">
                    <div>部门</div>
                    <div>门店</div>
                    <div>目标业绩</div>
                    <div>完成业绩</div>
                    <div>完成率</div>
                    <div>排名</div>
                </div>
            </div>
            <div class="table-body" id="tableBody">
                <!-- 数据将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <script>
        // 模拟数据
        const mockData = [
            { department: '事业一部', store: '红光', target: 150000, actual: 259745, completion: 173, rank: 1 },
            { department: '事业一部', store: '双流', target: 180000, actual: 311108, completion: 173, rank: 2 },
            { department: '事业三部', store: '紫荆', target: 350000, actual: 522756, completion: 149, rank: 3 },
            { department: '事业三部', store: '静居寺', target: 200000, actual: 280000, completion: 140, rank: 4 },
            { department: '事业五部', store: '涌泉', target: 250000, actual: 320000, completion: 128, rank: 5 },
            { department: '事业五部', store: '川师', target: 300000, actual: 360000, completion: 120, rank: 6 },
            { department: '事业六部', store: '沙河', target: 180000, actual: 200000, completion: 111, rank: 7 },
            { department: '事业六部', store: '大丰', target: 220000, actual: 240000, completion: 109, rank: 8 },
            { department: '事业四部', store: '荣华南路', target: 280000, actual: 300000, completion: 107, rank: 9 },
            { department: '事业四部', store: '光华', target: 320000, actual: 340000, completion: 106, rank: 10 },
            { department: '事业二部', store: '凤凰山', target: 200000, actual: 210000, completion: 105, rank: 11 },
            { department: '事业二部', store: '亚洲湾', target: 250000, actual: 260000, completion: 104, rank: 12 },
            { department: '事业一部', store: '龙湖', target: 300000, actual: 310000, completion: 103, rank: 13 },
            { department: '事业三部', store: '川音', target: 180000, actual: 185000, completion: 103, rank: 14 },
            { department: '事业五部', store: '荣华北路', target: 220000, actual: 225000, completion: 102, rank: 15 },
            { department: '事业六部', store: '融创', target: 280000, actual: 285000, completion: 102, rank: 16 },
            { department: '事业四部', store: '千禧', target: 200000, actual: 200000, completion: 100, rank: 17 },
            { department: '事业二部', store: '中和', target: 250000, actual: 245000, completion: 98, rank: 18 },
            { department: '事业一部', store: '龙城国际', target: 300000, actual: 290000, completion: 97, rank: 19 },
            { department: '事业三部', store: '华润', target: 180000, actual: 170000, completion: 94, rank: 20 },
            { department: '事业五部', store: '骑士郡', target: 220000, actual: 200000, completion: 91, rank: 21 },
            { department: '事业六部', store: '大源', target: 280000, actual: 250000, completion: 89, rank: 22 },
            { department: '事业四部', store: '保利', target: 200000, actual: 175000, completion: 88, rank: 23 },
            { department: '事业二部', store: '鹭岛', target: 250000, actual: 220000, completion: 88, rank: 24 },
            { department: '事业一部', store: '优品道', target: 300000, actual: 260000, completion: 87, rank: 25 },
            { department: '事业三部', store: '468', target: 180000, actual: 150000, completion: 83, rank: 26 },
            { department: '事业五部', store: '明信', target: 220000, actual: 180000, completion: 82, rank: 27 },
            { department: '事业六部', store: '南湖', target: 280000, actual: 220000, completion: 79, rank: 28 },
            { department: '事业四部', store: '犀浦', target: 200000, actual: 100000, completion: 50, rank: 29 }
        ];

        // 等待效果控制函数
        function showLoading(text = '加载中...') {
            document.getElementById('loadingText').textContent = text;
            document.getElementById('loadingOverlay').classList.add('show');
        }

        function hideLoading() {
            document.getElementById('loadingOverlay').classList.remove('show');
        }

        // 格式化数字
        function formatNumber(num) {
            return num.toLocaleString();
        }

        // 获取完成率样式类
        function getCompletionClass(completion) {
            if (completion >= 100) return 'completion-high';
            if (completion >= 80) return 'completion-medium';
            return 'completion-low';
        }

        // 获取排名样式类
        function getRankClass(rank) {
            if (rank <= 3) return `rank-${rank}`;
            return 'rank-other';
        }

        // 渲染表格数据
        function renderTable() {
            const tableBody = document.getElementById('tableBody');
            tableBody.innerHTML = '';

            mockData.forEach(item => {
                const row = document.createElement('div');
                row.className = 'table-row';

                row.innerHTML = `
                    <div class="department-cell">${item.department}</div>
                    <div class="store-cell">${item.store}</div>
                    <div class="number-cell">${formatNumber(item.target)}</div>
                    <div class="number-cell">${formatNumber(item.actual)}</div>
                    <div class="completion-cell ${getCompletionClass(item.completion)}">${item.completion}%</div>
                    <div class="rank-cell ${getRankClass(item.rank)}">${item.rank}</div>
                `;

                tableBody.appendChild(row);
            });
        }

        // 计算汇总数据
        function calculateSummary() {
            const totalTarget = mockData.reduce((sum, item) => sum + item.target, 0);
            const totalActual = mockData.reduce((sum, item) => sum + item.actual, 0);
            const completionRate = Math.round((totalActual / totalTarget) * 100);

            document.getElementById('targetPerformance').textContent = formatNumber(totalTarget);
            document.getElementById('actualPerformance').textContent = formatNumber(totalActual);
            document.getElementById('completionRate').textContent = `${completionRate}%`;
        }

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            showLoading('加载数据中...');

            // 模拟加载延迟
            setTimeout(() => {
                calculateSummary();
                renderTable();
                hideLoading();
            }, 1000);
        });
    </script>
</body>
</html>