{layout name="layout1" /}
<style>
    .dashboard-container {
        padding: 15px;
    }
    .kpi-card {
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .kpi-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }
    .kpi-value {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }
    .kpi-compare {
        font-size: 12px;
        color: #999;
    }
    .chart-card {
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .chart-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
    }
    .chart-container {
        height: 300px;
    }
    .chart-container-large {
        height: 400px;
    }
    .progress-item {
        margin-bottom: 15px;
    }
    .progress-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 14px;
    }
    .progress-bar-container {
        height: 20px;
        background: #f0f0f0;
        border-radius: 10px;
        overflow: hidden;
    }
    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #4A70F4 0%, #6DD047 100%);
        transition: width 0.3s;
    }
    .table-card {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .date-filter {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* 优化表格样式 */
    .table-card .layui-table {
        margin-top: 0;
        border: none;
    }
    .table-card .layui-table thead tr {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .table-card .layui-table thead th {
        color: #fff;
        font-weight: 600;
        text-align: center;
        padding: 15px 10px;
        border: none;
        font-size: 14px;
    }
    .table-card .layui-table tbody tr {
        transition: all 0.3s ease;
        border-bottom: 1px solid #f0f0f0;
    }
    .table-card .layui-table tbody tr:hover {
        background-color: #f8f9ff;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .table-card .layui-table tbody td {
        text-align: center;
        padding: 12px 10px;
        border: none;
        color: #333;
        font-size: 13px;
    }
    .table-card .layui-table tbody td:first-child {
        font-weight: 600;
        color: #4A70F4;
        background-color: #f8f9ff;
    }
    .table-card .layui-table tbody td.empty-data {
        color: #999;
        font-style: italic;
    }
    .table-card .chart-title {
        display: flex;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
        margin-bottom: 20px;
    }
    .table-card .chart-title::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 18px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        margin-right: 10px;
        border-radius: 2px;
    }
</style>
<div class="layui-fluid dashboard-container">
    <!-- 顶部KPI指标 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">月销售总额</div>
                <div class="kpi-value" id="monthly-sales">--</div>
                <div class="kpi-compare">同比: <span id="sales-compare">--</span></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">月订单量</div>
                <div class="kpi-value" id="monthly-orders">--</div>
                <div class="kpi-compare">同比: <span id="orders-compare">--</span></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">月客户数</div>
                <div class="kpi-value" id="monthly-customers">--</div>
                <div class="kpi-compare">同比: <span id="customers-compare">--</span></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="kpi-card">
                <div class="kpi-title">日期筛选</div>
                <div class="date-filter">
                    <input type="text" class="layui-input" id="date-filter" placeholder="年月日(可筛选)">
                </div>
            </div>
        </div>
    </div>

    <!-- 第一行图表 -->
    <div class="layui-row layui-col-space15">
        <!-- 月客户分析 -->
        <div class="layui-col-md4">
            <div class="chart-card">
                <div class="chart-title">月客户分析</div>
                <div class="chart-container" id="customer-analysis-chart"></div>
            </div>
        </div>
        <!-- 月销售情况 -->
        <div class="layui-col-md4">
            <div class="chart-card">
                <div class="chart-title">月销售情况</div>
                <div class="chart-container" id="sales-situation-chart"></div>
            </div>
        </div>
        <!-- 当月客户渠道分析 -->
        <div class="layui-col-md4">
            <div class="chart-card">
                <div class="chart-title">当月客户渠道分析</div>
                <div class="chart-container" id="channel-analysis-chart"></div>
            </div>
        </div>
    </div>

    <!-- 第二行：目标完成率 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="chart-card">
                <div class="chart-title">当月目标完成率</div>
                <div style="margin-bottom: 20px;">
                    <div style="font-size: 14px; color: #666; margin-bottom: 10px;">本月销售目标: <span style="color: #4A70F4; font-weight: bold;">10万</span></div>
                    <div class="progress-item">
                        <div class="progress-label">
                            <span>总体完成率</span>
                            <span style="color: #4A70F4; font-weight: bold;">84%</span>
                        </div>
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width: 84%;"></div>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 30px;">
                    <div class="chart-title" style="font-size: 14px; margin-bottom: 15px;">客服目标完成率(N个客服的目标陈列)</div>
                    <div id="staff-progress-list">
                        <!-- 客服进度条列表 -->
                        <div class="progress-item">
                            <div class="progress-label">
                                <span>啦啦</span>
                                <span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 0%;"></div>
                            </div>
                        </div>
                        <div class="progress-item">
                            <div class="progress-label">
                                <span>小喵</span>
                                <span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 0%;"></div>
                            </div>
                        </div>
                        <div class="progress-item">
                            <div class="progress-label">
                                <span>哆哆</span>
                                <span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 0%;"></div>
                            </div>
                        </div>
                        <div class="progress-item">
                            <div class="progress-label">
                                <span>大猫</span>
                                <span>销售额: XXX | 百分比: xx% | 同比: xx%</span>
                            </div>
                            <div class="progress-bar-container">
                                <div class="progress-bar" style="width: 0%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 第三行：趋势图和区域图 -->
    <div class="layui-row layui-col-space15">
        <!-- 每日销售趋势 -->
        <div class="layui-col-md6">
            <div class="chart-card">
                <div class="chart-title">每日销售趋势</div>
                <div style="text-align: right; margin-bottom: 10px; color: #f56c6c; font-size: 14px;">
                    ▼ 29.23% 上月同比
                </div>
                <div class="chart-container-large" id="daily-sales-trend-chart"></div>
            </div>
        </div>
        <!-- 区域月销售额 -->
        <div class="layui-col-md6">
            <div class="chart-card">
                <div class="chart-title">区域月销售额</div>
                <div class="chart-container-large" id="regional-sales-chart"></div>
            </div>
        </div>
    </div>

    <!-- 第四行：数据表格 -->
    <div class="layui-row layui-col-space15">
        <!-- 渠道月销售详情 -->
        <div class="layui-col-md12">
            <div class="table-card">
                <div class="chart-title">渠道月销售详情</div>
                <table class="layui-table" lay-size="sm">
                    <thead>
                        <tr>
                            <th>渠道</th>
                            <th>美团</th>
                            <th>公众号</th>
                            <th>抖音</th>
                            <th>员工</th>
                            <th>异业</th>
                            <th>渠道</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>总额</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>年卡</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>次卡</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>单次服务</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>其他服务</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 第五行：区域月销售详情 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="table-card">
                <div class="chart-title">区域月销售详情</div>
                <table class="layui-table" lay-size="sm">
                    <thead>
                        <tr>
                            <th>服务类型</th>
                            <th>南明区</th>
                            <th>云岩区</th>
                            <th>白云区</th>
                            <th>乌当区</th>
                            <th>花溪区</th>
                            <th>龙里</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>总额</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>年卡</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>次卡</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>单次服务</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                        <tr>
                            <td>其他服务</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                            <td class="empty-data">-</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
layui.config({
    version:"{$front_version}",
    base: '/static/plug/layui-admin/dist/layuiadmin/'
}).extend({
    index: 'lib/index'
}).use(['index', 'laydate'], function(){
    var $ = layui.$
        ,laydate = layui.laydate;

    // 日期选择器
    laydate.render({
        elem: '#date-filter',
        type: 'date',
        format: 'yyyy-MM-dd'
    });

    // 初始化所有图表（仅样式，不填充数据）
    initCharts();

    function initCharts() {
        // 月客户分析 - 饼图
        var customerChart = echarts.init(document.getElementById('customer-analysis-chart'));
        customerChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                name: '客户分析',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {d}%'
                },
                data: [
                    {value: 28, name: '老客', itemStyle: {color: '#FFB6C1'}},
                    {value: 72, name: '新客', itemStyle: {color: '#FF69B4'}}
                ]
            }]
        });

        // 月销售情况 - 饼图
        var salesChart = echarts.init(document.getElementById('sales-situation-chart'));
        salesChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                bottom: '5%',
                left: 'center'
            },
            series: [{
                name: '销售情况',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {c}'
                },
                data: [
                    {value: 8.2, name: '年卡销售', itemStyle: {color: '#4A70F4'}},
                    {value: 3.2, name: '次卡销售', itemStyle: {color: '#6DD047'}},
                    {value: 1.4, name: '单次服务', itemStyle: {color: '#F6A23F'}},
                    {value: 1.2, name: '其他服务', itemStyle: {color: '#87CEEB'}}
                ]
            }]
        });

        // 当月客户渠道分析 - 环形图
        var channelChart = echarts.init(document.getElementById('channel-analysis-chart'));
        channelChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                name: '客户渠道',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {d}%'
                },
                data: [
                    {value: 0, name: '美团'},
                    {value: 24, name: '公众号-企业客户'},
                    {value: 0, name: '抖音'},
                    {value: 0, name: '渠道'},
                    {value: 0, name: '员工'},
                    {value: 0, name: '异业'},
                    {value: 0, name: '普通客户'}
                ]
            }]
        });

        // 每日销售趋势 - 折线图
        var trendChart = echarts.init(document.getElementById('daily-sales-trend-chart'));
        trendChart.setOption({
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value',
                name: '销售额',
                axisLabel: {
                    formatter: '{value}K'
                }
            },
            series: [{
                name: '销售额',
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(74, 112, 244, 0.3)'
                        }, {
                            offset: 1, color: 'rgba(74, 112, 244, 0.1)'
                        }]
                    }
                },
                itemStyle: {
                    color: '#4A70F4'
                },
                data: []
            }]
        });

        // 区域月销售额 - 柱状图
        var regionalChart = echarts.init(document.getElementById('regional-sales-chart'));
        regionalChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7', '区域8']
            },
            yAxis: {
                type: 'value',
                name: '销量'
            },
            series: [{
                name: '销量',
                type: 'bar',
                itemStyle: {
                    color: '#4A70F4'
                },
                data: [4668, 3775, 2912, 2200, 1259, 700, 403, 0]
            }]
        });

        // 响应式调整
        window.addEventListener('resize', function() {
            customerChart.resize();
            salesChart.resize();
            channelChart.resize();
            trendChart.resize();
            regionalChart.resize();
        });
    }
});
</script>