antissoft / lvqianmeiye_ERP

<template>
    <div class="store-dashboard">
        <!-- 顶部筛选器 -->
        <div class="filter-bar">
            <el-form :inline="true" :model="queryParams" class="filter-form">
                <el-form-item label="选择月份">
                    <el-date-picker v-model="queryParams.month" type="month" value-format="yyyy-MM" placeholder="选择月份"
                        clearable size="small" @change="handleQueryChange" style="width: 150px" />
                </el-form-item>
                <el-form-item label="选择门店">
                    <el-select v-model="queryParams.storeId" placeholder="请选择门店" clearable filterable size="small"
                        @change="handleQueryChange" style="width: 200px">
                        <el-option v-for="store in storeOptions" :key="store.id" :label="store.fullName"
                            :value="store.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search"
                        @click="handleQueryChange">查询</el-button>
                    <el-button size="small" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 顶部：门店信息 + 核心指标 -->
        <div class="dashboard-header">
            <div class="header-left">
                <div class="store-info">
                    <div class="store-avatar">
                        <i class="el-icon-office-building"></i>
                    </div>
                    <div class="store-details">
                        <div class="store-name-row">
                            <h2 class="store-name">{{ currentStoreName || '请选择门店' }}</h2>
                            <el-tag type="success" size="small">正常营业</el-tag>
                        </div>
                        <div class="store-meta">
                            <span class="meta-item"><i class="el-icon-tickets"></i> {{ currentStoreCode || '-' }}</span>
                            <span class="meta-item"><i class="el-icon-location"></i> {{ currentStoreAddress || '-'
                                }}</span>
                            <span class="meta-item"><i class="el-icon-calendar"></i> {{ queryParams.month || '当前月份'
                                }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-right">
                <div class="core-stats" v-loading="loading">
                    <div class="core-stat-item primary">
                        <div class="stat-label">开单业绩</div>
                        <div class="stat-value">￥{{ storeData && storeData.Performance &&
                            storeData.Performance.BillingPerformance ?
                            formatMoney(storeData.Performance.BillingPerformance) : '0.00' }}</div>
                        <div class="stat-trend" v-if="false">+12.5%</div>
                    </div>
                    <div class="core-stat-item success">
                        <div class="stat-label">消耗业绩</div>
                        <div class="stat-value">￥{{ storeData && storeData.Performance &&
                            storeData.Performance.ConsumePerformance ?
                            formatMoney(storeData.Performance.ConsumePerformance) : '0.00' }}</div>
                        <div class="stat-trend" v-if="false">+8.3%</div>
                    </div>
                    <div class="core-stat-item info">
                        <div class="stat-label">完成率</div>
                        <div class="stat-value">{{ storeData && storeData.Performance &&
                            storeData.Performance.CompletionRate ?
                            formatMoney(storeData.Performance.CompletionRate, 2) : '0.00' }}%</div>
                        <div class="stat-trend" v-if="false">+2.1%</div>
                    </div>
                    <div class="core-stat-item warning">
                        <div class="stat-label">净业绩</div>
                        <div class="stat-value">￥{{ storeData && storeData.Performance &&
                            storeData.Performance.NetPerformance ?
                            formatMoney(storeData.Performance.NetPerformance) : '0.00' }}</div>
                        <div class="stat-trend" v-if="false">+15.8%</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域：左右分栏 -->
        <div class="main-content">
            <!-- 左侧：图表区域 -->
            <div class="content-left">
                <!-- 第一行：业绩趋势图 + 品项分类占比 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="16">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-data-line"></i>
                                <span>近12个月业绩趋势</span>
                            </div>
                            <div ref="trendChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-pie-chart"></i>
                                <span>品项分类占比</span>
                            </div>
                            <div ref="categoryChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第二行：业绩对比分析 + 各分类业绩堆叠对比 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-marketing"></i>
                                <span>业绩对比分析</span>
                            </div>
                            <div ref="compareChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-data"></i>
                                <span>各分类业绩堆叠对比</span>
                            </div>
                            <div ref="stackedChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第四行：会员转化漏斗 + 客单价与项目数关系 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-sort"></i>
                                <span>拓客转化漏斗</span>
                            </div>
                            <div ref="funnelChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-marketing"></i>
                                <span>客单价与项目数关系分析</span>
                            </div>
                            <div ref="scatterChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第五行：一周运营热力图 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="24">
                        <el-card class="chart-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-s-grid"></i>
                                <span>一周运营热力图</span>
                            </div>
                            <div ref="heatmapChart" class="chart-container"></div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第六行：品项开单排行 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="24">
                        <el-card class="table-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-shopping-bag-1"></i>
                                <span>品项开单排行（Top 10）</span>
                            </div>
                            <el-table :data="topBillingItems" size="small" border stripe>
                                <el-table-column type="index" label="排名" width="60" align="center">
                                    <template slot-scope="scope">
                                        <el-tag v-if="scope.$index < 3"
                                            :type="['danger', 'warning', 'success'][scope.$index]" size="mini">
                                            {{ scope.$index + 1 }}
                                        </el-tag>
                                        <span v-else>{{ scope.$index + 1 }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="itemName" label="品项名称" min-width="180" />
                                <el-table-column prop="billingAmount" label="开单金额" width="140" align="right">
                                    <template slot-scope="scope">
                                        <span style="font-weight: 600; color: #67C23A;">¥{{
                                            formatMoney(scope.row.billingAmount) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="billingCount" label="开单次数" width="100" align="center" />
                                <el-table-column prop="category" label="分类" width="80" align="center">
                                    <template slot-scope="scope">
                                        <el-tag size="mini" :type="getCategoryType(scope.row.category)">{{
                                            scope.row.category }}</el-tag>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 第七行：健康师业绩排行 + 消耗品项排行 -->
                <el-row :gutter="16" class="chart-row">
                    <el-col :span="12">
                        <el-card class="table-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-user-solid"></i>
                                <span>健康师业绩排行（Top 10）</span>
                            </div>
                            <el-table :data="healthCoachRanking" size="small" border stripe>
                                <el-table-column type="index" label="排名" width="60" align="center" />
                                <el-table-column prop="name" label="健康师姓名" min-width="120" />
                                <el-table-column prop="billingPerformance" label="开单业绩" width="120" align="right">
                                    <template slot-scope="scope">￥{{ formatMoney(scope.row.billingPerformance)
                                        }}</template>
                                </el-table-column>
                                <el-table-column prop="consumePerformance" label="消耗业绩" width="120" align="right">
                                    <template slot-scope="scope">￥{{ formatMoney(scope.row.consumePerformance)
                                        }}</template>
                                </el-table-column>
                                <el-table-column prop="totalPerformance" label="净业绩" width="120" align="right">
                                    <template slot-scope="scope">￥{{ formatMoney(scope.row.totalPerformance)
                                    }}</template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="table-card" shadow="hover">
                            <div slot="header" class="card-header">
                                <i class="el-icon-goods"></i>
                                <span>消耗品项排行（Top 10）</span>
                            </div>
                            <el-table :data="topConsumeItems" size="small" border stripe>
                                <el-table-column type="index" label="排名" width="60" align="center" />
                                <el-table-column prop="itemName" label="品项名称" min-width="150" />
                                <el-table-column prop="consumeAmount" label="消耗金额" width="120" align="right">
                                    <template slot-scope="scope">
                                        <span style="font-weight: 600; color: #409EFF;">￥{{
                                            formatMoney(scope.row.consumeAmount) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="category" label="分类" width="80" />
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- 右侧：指标卡片区域 -->
            <div class="content-right">
                <!-- 业绩概览 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-data-line"></i>
                        <span>业绩概览</span>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-item" v-for="(item, index) in performanceList" :key="index">
                            <div class="metric-icon" :style="{ background: item.iconBg }">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="metric-info">
                                <div class="metric-label">{{ item.label }}</div>
                                <div class="metric-value">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 运营指标 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-s-data"></i>
                        <span>运营指标</span>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-item" v-for="(item, index) in operationList" :key="index">
                            <div class="metric-icon" :style="{ background: item.iconBg }">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="metric-info">
                                <div class="metric-label">{{ item.label }}</div>
                                <div class="metric-value">{{ item.value }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 会员分析 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-user"></i>
                        <span>会员分析</span>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-item" v-for="(item, index) in memberList" :key="index">
                            <div class="metric-icon" :style="{ background: item.iconBg }">
                                <i :class="item.icon"></i>
                            </div>
                            <div class="metric-info">
                                <div class="metric-label">{{ item.label }}</div>
                                <div class="metric-value">{{ item.value }}</div>
                                <div class="metric-rate" v-if="item.rate">{{ item.rate }}</div>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 目标完成度仪表盘 -->
                <el-card class="chart-card-small" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-odometer"></i>
                        <span>目标完成度</span>
                    </div>
                    <div ref="gaugeChart" class="chart-container-small"></div>
                </el-card>


                <!-- 门店排名对比 -->
                <el-card class="metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-trophy"></i>
                        <span>门店排名对比</span>
                    </div>
                    <div class="ranking-content">
                        <div class="ranking-item">
                            <div class="ranking-label">业绩排名</div>
                            <div class="ranking-value">
                                <span class="rank-number">{{ comparison.performanceRanking }}</span>
                                <span class="rank-total">/ {{ comparison.totalStoreCount }}</span>
                            </div>
                            <div class="ranking-badge"
                                :class="getRankingClass(comparison.performanceRanking, comparison.totalStoreCount)">
                                {{ getRankingText(comparison.performanceRanking, comparison.totalStoreCount) }}
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div class="comparison-stats">
                            <div class="stat-row">
                                <span class="stat-label">同类型门店平均业绩</span>
                                <span class="stat-value">¥{{ formatMoney(comparison.avgPerformanceSameType) }}</span>
                            </div>
                            <div class="stat-row">
                                <span class="stat-label">同类型门店数</span>
                                <span class="stat-value">{{ comparison.sameTypeStoreCount }}家</span>
                            </div>
                            <div class="stat-row">
                                <span class="stat-label">同组织门店平均业绩</span>
                                <span class="stat-value">¥{{ formatMoney(comparison.avgPerformanceSameOrg) }}</span>
                            </div>
                            <div class="stat-row">
                                <span class="stat-label">同组织门店数</span>
                                <span class="stat-value">{{ comparison.sameOrgStoreCount }}家</span>
                            </div>
                        </div>
                    </div>
                </el-card>

                <!-- 本月经营提示 -->
                <el-card class="tips-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-warning"></i>
                        <span>本月经营提示</span>
                    </div>
                    <div class="tips-content">
                        <div class="tip-item" v-for="(tip, index) in operationTips" :key="index" :class="tip.type">
                            <i :class="tip.icon"></i>
                            <span>{{ tip.text }}</span>
                        </div>
                    </div>
                </el-card>

                <!-- 快速数据洞察 -->
                <el-card class="insight-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-data-analysis"></i>
                        <span>快速数据洞察</span>
                    </div>
                    <div class="insight-content">
                        <div class="insight-item" v-for="(insight, index) in dataInsights" :key="index">
                            <div class="insight-header">
                                <span class="insight-title">{{ insight.title }}</span>
                                <el-tag :type="insight.tagType" size="mini">{{ insight.tag }}</el-tag>
                            </div>
                            <div class="insight-value">{{ insight.value }}</div>
                            <div class="insight-desc">{{ insight.desc }}</div>
                        </div>
                    </div>
                </el-card>

                <!-- 本月关键指标 -->
                <el-card class="key-metrics-card" shadow="hover">
                    <div slot="header" class="card-header">
                        <i class="el-icon-s-flag"></i>
                        <span>本月关键指标</span>
                    </div>
                    <div class="key-metrics-content">
                        <div class="progress-item" v-for="(metric, index) in keyMetrics" :key="index">
                            <div class="progress-header">
                                <span class="progress-label">{{ metric.label }}</span>
                                <span class="progress-value">{{ metric.value }}%</span>
                            </div>
                            <el-progress :percentage="metric.value" :color="metric.color"
                                :stroke-width="8"></el-progress>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-section">

        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStoreSelector } from '@/api/extend/store'
import { getStoreDashboardStatistics, getStoreMonthlyTrend, getStoreItemAnalysis, getStoreMemberAnalysis, getCategoryMonthlyPerformance, getMemberConversionFunnel, getCustomerPriceProjectRelation, getStoreComparisonAnalysis, getWeeklyHeatmap, getStoreHealthCoachAnalysis } from '@/api/report'

export default {
    name: 'StoreDashboard',
    data() {
        return {
            // 查询参数
            queryParams: {
                month: '', // 月份，格式：yyyy-MM
                storeId: '' // 门店ID
            },
            // 门店选项
            storeOptions: [],
            // 当前选中的门店信息
            currentStoreName: '',
            currentStoreCode: '',
            currentStoreAddress: '',
            // 数据加载状态
            loading: false,
            // 门店统计数据
            storeData: null,
            performanceList: [],
            operationList: [],
            memberList: [],
            monthlyTrendData: [],
            categoryData: [],
            healthCoachRanking: [],
            topBillingItems: [],
            topConsumeItems: [],
            dailyData: [],
            trendChart: null,
            categoryChart: null,
            compareChart: null,
            stackedChart: null,
            funnelChart: null,
            scatterChart: null,
            heatmapChart: null,
            gaugeChart: null,
            categoryMonthlyData: [], // 各分类月度业绩数据
            funnelData: null, // 会员转化漏斗数据
            scatterData: [], // 客单价与项目数关系数据
            heatmapData: [], // 一周运营热力图数据
            comparison: {
                performanceRanking: 0,
                totalStoreCount: 0,
                avgPerformanceSameType: 0,
                sameTypeStoreCount: 0,
                avgPerformanceSameOrg: 0,
                sameOrgStoreCount: 0
            },
            operationTips: [],
            dataInsights: [],
            keyMetrics: []
        }
    },
    mounted() {
        this.initQueryParams()
        this.loadStoreOptions()
        // 不自动加载数据，等待用户选择门店和月份后再查询
        this.initCharts()
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        if (this.trendChart) this.trendChart.dispose()
        if (this.categoryChart) this.categoryChart.dispose()
        if (this.compareChart) this.compareChart.dispose()
        if (this.stackedChart) this.stackedChart.dispose()
        if (this.funnelChart) this.funnelChart.dispose()
        if (this.scatterChart) this.scatterChart.dispose()
        if (this.heatmapChart) this.heatmapChart.dispose()
        if (this.gaugeChart) this.gaugeChart.dispose()
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        // 初始化查询参数
        initQueryParams() {
            const now = new Date()
            const year = now.getFullYear()
            const month = String(now.getMonth() + 1).padStart(2, '0')
            this.queryParams.month = `${year}-${month}`
        },
        // 加载门店选项
        async loadStoreOptions() {
            try {
                const response = await getStoreSelector()
                if (response.code === 200 && response.data) {
                    this.storeOptions = response.data.list || []
                    // 如果有门店列表且当前未选中门店，默认选中第一个门店
                    if (this.storeOptions.length > 0 && !this.queryParams.storeId) {
                        this.queryParams.storeId = this.storeOptions[0].id
                        this.updateCurrentStoreInfo()
                        // 自动加载数据
                        this.loadDashboardData()
                    }
                }
            } catch (error) {
                console.error('获取门店列表失败:', error)
                this.storeOptions = []
            }
        },
        // 更新当前门店信息
        updateCurrentStoreInfo() {
            if (this.queryParams.storeId) {
                const store = this.storeOptions.find(s => s.id === this.queryParams.storeId)
                if (store) {
                    this.currentStoreName = store.fullName || store.dm || ''
                    this.currentStoreCode = store.enCode || store.bm || ''
                    this.currentStoreAddress = store.address || ''
                } else {
                    this.currentStoreName = ''
                    this.currentStoreCode = ''
                    this.currentStoreAddress = ''
                }
            } else {
                this.currentStoreName = ''
                this.currentStoreCode = ''
                this.currentStoreAddress = ''
            }
        },
        // 查询变化
        handleQueryChange() {
            this.updateCurrentStoreInfo()
            // TODO: 重新加载数据
            this.loadDashboardData()
        },
        // 重置查询
        handleReset() {
            this.initQueryParams()
            this.queryParams.storeId = ''
            this.updateCurrentStoreInfo()
            // 重置时清空所有数据（loadDashboardData会处理）
            this.loadDashboardData()
        },
        // 加载驾驶舱数据
        async loadDashboardData() {
            if (!this.queryParams.storeId || !this.queryParams.month) {
                // 如果没有选择门店或月份，清空所有数据
                this.storeData = null
                this.performanceList = []
                this.operationList = []
                this.memberList = []
                this.healthCoachRanking = []
                this.topBillingItems = []
                this.topConsumeItems = []
                this.monthlyTrendData = []
                this.categoryData = []
                this.categoryMonthlyData = []
                this.funnelData = null
                this.scatterData = []
                this.heatmapData = []
                this.comparison = {
                    performanceRanking: 0,
                    totalStoreCount: 0,
                    avgPerformanceSameType: 0,
                    sameTypeStoreCount: 0,
                    avgPerformanceSameOrg: 0,
                    sameOrgStoreCount: 0
                }
                this.operationTips = []
                this.dataInsights = []
                this.keyMetrics = []
                this.updateDisplayData()
                // 清空所有图表
                this.$nextTick(() => {
                    this.renderTrendChart()
                    this.renderCategoryChart()
                    this.renderCompareChart()
                    this.renderStackedChart()
                    this.renderFunnelChart()
                    this.renderScatterChart()
                    this.renderHeatmapChart()
                    this.renderGaugeChart()
                })
                return
            }

            this.loading = true
            try {
                // 将月份格式从 yyyy-MM 转换为 yyyyMM
                const statisticsMonth = this.queryParams.month.replace('-', '')

                const response = await getStoreDashboardStatistics({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data) {
                    // 将返回的数据转换为与原有结构兼容的格式
                    this.storeData = {
                        Performance: {
                            BillingPerformance: response.data.BillingPerformance || 0,
                            ConsumePerformance: response.data.ConsumePerformance || 0,
                            CompletionRate: response.data.CompletionRate || 0,
                            NetPerformance: response.data.NetPerformance || 0,
                            BillingCount: response.data.BillingCount || 0,
                            ConsumeCount: response.data.ConsumeCount || 0,
                            AvgBillingAmount: response.data.AvgBillingAmount || 0,
                            AvgConsumeAmount: response.data.AvgConsumeAmount || 0,
                            RefundAmount: response.data.RefundAmount || 0,
                            RefundCount: response.data.RefundCount || 0,
                            RemainingRightsAmount: response.data.RemainingRightsAmount || 0,
                            TargetPerformance: response.data.TargetPerformance || 0
                        },
                        Operation: {
                            HeadCount: response.data.HeadCount || 0,
                            PersonCount: response.data.PersonCount || 0,
                            ProjectCount: response.data.ProjectCount || 0,
                            AvgAmountPerPerson: response.data.AvgAmountPerPerson || 0,
                            AvgAmountPerProject: response.data.AvgAmountPerProject || 0,
                            AvgProjectPerHead: response.data.AvgProjectPerHead || 0
                        }
                    }
                    this.updateDisplayData()

                    // 加载其他数据
                    await Promise.all([
                        this.loadMonthlyTrendData(),
                        this.loadCategoryData(),
                        this.loadMemberAnalysisData(),
                        this.loadCategoryMonthlyData(),
                        this.loadFunnelData(),
                        this.loadScatterData(),
                        this.loadComparisonData(),
                        this.loadHeatmapData(),
                        this.loadTopBillingItems(),
                        this.loadTopConsumeItems(),
                        this.loadHealthCoachRanking()
                    ])

                    // 数据加载完成后，更新快速数据洞察、本月关键指标、本月经营提示
                    this.updateDataInsights()
                    this.updateKeyMetrics()
                    this.updateOperationTips()
                } else {
                    this.$message.error(response.msg || '获取数据失败')
                    this.storeData = null
                    this.updateDisplayData()
                    // 清空数据洞察、关键指标、经营提示
                    this.updateDataInsights()
                    this.updateKeyMetrics()
                    this.updateOperationTips()
                }
            } catch (error) {
                console.error('加载门店数据失败:', error)
                this.$message.error('加载数据失败：' + (error.message || '未知错误'))
                this.storeData = null
                this.updateDisplayData()
                // 清空数据洞察、关键指标、经营提示
                this.updateDataInsights()
                this.updateKeyMetrics()
                this.updateOperationTips()
            } finally {
                this.loading = false
            }
        },
        // 加载近12个月业绩趋势数据
        async loadMonthlyTrendData() {
            if (!this.queryParams.storeId) {
                this.monthlyTrendData = []
                this.$nextTick(() => {
                    this.renderTrendChart()
                    this.renderCompareChart()
                })
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getStoreMonthlyTrend({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.length > 0) {
                    this.monthlyTrendData = response.data
                } else {
                    this.monthlyTrendData = []
                }
                this.$nextTick(() => {
                    this.renderTrendChart()
                    this.renderCompareChart()
                })
            } catch (error) {
                console.error('加载业绩趋势数据失败:', error)
                this.monthlyTrendData = []
                this.$nextTick(() => {
                    this.renderTrendChart()
                    this.renderCompareChart()
                })
            }
        },
        // 加载品项分类占比数据
        async loadCategoryData() {
            if (!this.queryParams.storeId) {
                this.categoryData = []
                this.renderCategoryChart()
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getStoreItemAnalysis({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.CategoryRatios) {
                    this.categoryData = response.data.CategoryRatios
                } else {
                    this.categoryData = []
                }
                this.renderCategoryChart()
            } catch (error) {
                console.error('加载品项分类数据失败:', error)
                this.categoryData = []
                this.renderCategoryChart()
            }
        },
        // 加载会员分析数据
        async loadMemberAnalysisData() {
            if (!this.queryParams.storeId) {
                this.updateMemberList(null)
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getStoreMemberAnalysis({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data) {
                    this.updateMemberList(response.data)
                } else {
                    this.updateMemberList(null)
                }
            } catch (error) {
                console.error('加载会员分析数据失败:', error)
                this.updateMemberList(null)
            }
        },
        // 加载各分类月度业绩数据
        async loadCategoryMonthlyData() {
            if (!this.queryParams.storeId) {
                this.categoryMonthlyData = []
                this.$nextTick(() => {
                    this.renderStackedChart()
                })
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getCategoryMonthlyPerformance({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.length > 0) {
                    this.categoryMonthlyData = response.data
                } else {
                    this.categoryMonthlyData = []
                }
                this.$nextTick(() => {
                    this.renderStackedChart()
                })
            } catch (error) {
                console.error('加载各分类月度业绩数据失败:', error)
                this.categoryMonthlyData = []
                this.$nextTick(() => {
                    this.renderStackedChart()
                })
            }
        },
        // 加载会员转化漏斗数据
        async loadFunnelData() {
            if (!this.queryParams.storeId) {
                // 如果没有选择门店，设置为全0
                this.funnelData = {
                    ExpansionCount: 0,
                    InviteCount: 0,
                    AppointmentCount: 0,
                    ConsumeCount: 0,
                    BillingCount: 0
                }
                this.$nextTick(() => {
                    this.renderFunnelChart()
                })
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getMemberConversionFunnel({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data) {
                    // 确保所有字段都是0（如果没有数据）
                    this.funnelData = {
                        ExpansionCount: response.data.ExpansionCount || 0,
                        InviteCount: response.data.InviteCount || 0,
                        AppointmentCount: response.data.AppointmentCount || 0,
                        ConsumeCount: 0, // 不再使用
                        BillingCount: response.data.BillingCount || 0
                    }
                } else {
                    // 如果接口失败，设置为全0
                    this.funnelData = {
                        ExpansionCount: 0,
                        InviteCount: 0,
                        AppointmentCount: 0,
                        ConsumeCount: 0,
                        BillingCount: 0
                    }
                }
                this.$nextTick(() => {
                    this.renderFunnelChart()
                })
            } catch (error) {
                console.error('加载拓客转化漏斗数据失败:', error)
                // 出错时设置为全0
                this.funnelData = {
                    ExpansionCount: 0,
                    InviteCount: 0,
                    AppointmentCount: 0,
                    ConsumeCount: 0,
                    BillingCount: 0
                }
                this.$nextTick(() => {
                    this.renderFunnelChart()
                })
            }
        },
        // 加载客单价与项目数关系数据
        async loadScatterData() {
            if (!this.queryParams.storeId) {
                this.scatterData = []
                this.$nextTick(() => {
                    this.renderScatterChart()
                })
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getCustomerPriceProjectRelation({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.length > 0) {
                    this.scatterData = response.data
                } else {
                    this.scatterData = []
                }
                this.$nextTick(() => {
                    this.renderScatterChart()
                })
            } catch (error) {
                console.error('加载客单价与项目数关系数据失败:', error)
                this.scatterData = []
                this.$nextTick(() => {
                    this.renderScatterChart()
                })
            }
        },
        // 加载门店排名对比数据
        async loadComparisonData() {
            if (!this.queryParams.storeId) {
                this.comparison = {
                    performanceRanking: 0,
                    totalStoreCount: 0,
                    avgPerformanceSameType: 0,
                    sameTypeStoreCount: 0,
                    avgPerformanceSameOrg: 0,
                    sameOrgStoreCount: 0
                }
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getStoreComparisonAnalysis({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data) {
                    this.comparison = {
                        performanceRanking: response.data.PerformanceRanking || 0,
                        totalStoreCount: response.data.TotalStoreCount || 0,
                        avgPerformanceSameType: response.data.AvgPerformanceSameType || 0,
                        sameTypeStoreCount: response.data.SameTypeStoreCount || 0,
                        avgPerformanceSameOrg: response.data.AvgPerformanceSameOrg || 0,
                        sameOrgStoreCount: response.data.SameOrgStoreCount || 0
                    }
                } else {
                    this.comparison = {
                        performanceRanking: 0,
                        totalStoreCount: 0,
                        avgPerformanceSameType: 0,
                        sameTypeStoreCount: 0,
                        avgPerformanceSameOrg: 0,
                        sameOrgStoreCount: 0
                    }
                }
            } catch (error) {
                console.error('加载门店排名对比数据失败:', error)
                this.comparison = {
                    performanceRanking: 0,
                    totalStoreCount: 0,
                    avgPerformanceSameType: 0,
                    sameTypeStoreCount: 0,
                    avgPerformanceSameOrg: 0,
                    sameOrgStoreCount: 0
                }
            }
        },
        // 加载一周运营热力图数据
        async loadHeatmapData() {
            if (!this.queryParams.storeId) {
                this.heatmapData = []
                this.$nextTick(() => {
                    this.renderHeatmapChart()
                })
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getWeeklyHeatmap({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.length > 0) {
                    this.heatmapData = response.data
                } else {
                    this.heatmapData = []
                }
                this.$nextTick(() => {
                    this.renderHeatmapChart()
                })
            } catch (error) {
                console.error('加载一周运营热力图数据失败:', error)
                this.heatmapData = []
                this.$nextTick(() => {
                    this.renderHeatmapChart()
                })
            }
        },
        // 加载品项开单排行数据
        async loadTopBillingItems() {
            if (!this.queryParams.storeId) {
                this.topBillingItems = []
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getStoreItemAnalysis({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.TopBillingItems) {
                    this.topBillingItems = response.data.TopBillingItems.map(item => ({
                        itemName: item.ItemName || '未知品项',
                        billingAmount: item.BillingAmount || 0,
                        billingCount: item.BillingCount || 0,
                        category: item.Category || '其他'
                    }))
                } else {
                    this.topBillingItems = []
                }
            } catch (error) {
                console.error('加载品项开单排行数据失败:', error)
                this.topBillingItems = []
            }
        },
        // 加载消耗品项排行数据
        async loadTopConsumeItems() {
            if (!this.queryParams.storeId) {
                this.topConsumeItems = []
                return
            }

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getStoreItemAnalysis({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.TopConsumeItems) {
                    this.topConsumeItems = response.data.TopConsumeItems.map(item => ({
                        itemName: item.ItemName || '未知品项',
                        consumeAmount: item.ConsumeAmount || 0,
                        category: item.Category || '其他'
                    }))
                } else {
                    this.topConsumeItems = []
                }
            } catch (error) {
                console.error('加载消耗品项排行数据失败:', error)
                this.topConsumeItems = []
            }
        },
        // 加载健康师业绩排行数据
        async loadHealthCoachRanking() {
            if (!this.queryParams.storeId) return

            try {
                const statisticsMonth = this.queryParams.month.replace('-', '')
                const response = await getStoreHealthCoachAnalysis({
                    storeId: this.queryParams.storeId,
                    statisticsMonth: statisticsMonth
                })

                if (response.code === 200 && response.data && response.data.length > 0) {
                    this.healthCoachRanking = response.data.map(item => ({
                        name: item.HealthCoachName || '未知',
                        billingPerformance: item.BillingPerformance || 0,
                        consumePerformance: item.ConsumePerformance || 0,
                        totalPerformance: item.NetPerformance || 0 // 使用净业绩
                    }))
                }
            } catch (error) {
                console.error('加载健康师业绩排行数据失败:', error)
            }
        },
        // 更新显示数据
        updateDisplayData() {
            if (!this.storeData || !this.storeData.Performance || !this.storeData.Operation) {
                // 如果没有数据，使用默认值或清空
                this.updateCoreStats(null)
                this.updatePerformanceList(null)
                this.updateOperationList(null)
                return
            }

            const perf = this.storeData.Performance
            const oper = this.storeData.Operation

            // 更新顶部核心指标
            this.updateCoreStats(perf, oper)

            // 更新业绩概览列表
            this.updatePerformanceList(perf)

            // 更新运营指标列表
            this.updateOperationList(oper)

            // 更新目标完成度图表
            this.renderGaugeChart()

            // 更新快速数据洞察、本月关键指标、本月经营提示
            this.updateDataInsights()
            this.updateKeyMetrics()
            this.updateOperationTips()
        },
        // 更新顶部核心指标
        updateCoreStats(perf, oper) {
            if (!perf) {
                // 使用默认值
                return
            }

            // 这里的数据会在模板中直接使用 storeData，所以不需要更新
        },
        // 更新业绩概览列表
        updatePerformanceList(perf) {
            if (!perf) {
                this.performanceList = [
                    { label: '开单次数', value: '0', icon: 'el-icon-document', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                    { label: '消耗次数', value: '0', icon: 'el-icon-goods', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                    { label: '退卡次数', value: '0', icon: 'el-icon-refresh-left', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
                    { label: '平均开单金额', value: '￥0', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
                    { label: '平均消耗金额', value: '￥0', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                    { label: '剩余权益', value: '￥0', icon: 'el-icon-wallet', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
                    { label: '目标业绩', value: '￥0', icon: 'el-icon-aim', iconBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
                    { label: '退卡金额', value: '￥0', icon: 'el-icon-money', iconBg: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' }
                ]
                return
            }

            this.performanceList = [
                { label: '开单次数', value: this.formatNumber(perf.BillingCount), icon: 'el-icon-document', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                { label: '消耗次数', value: this.formatNumber(perf.ConsumeCount), icon: 'el-icon-goods', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                { label: '退卡次数', value: this.formatNumber(perf.RefundCount), icon: 'el-icon-refresh-left', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
                { label: '平均开单金额', value: '￥' + this.formatMoney(perf.AvgBillingAmount), icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
                { label: '平均消耗金额', value: '￥' + this.formatMoney(perf.AvgConsumeAmount), icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                { label: '剩余权益', value: '￥' + this.formatMoney(perf.RemainingRightsAmount), icon: 'el-icon-wallet', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
                { label: '目标业绩', value: '￥' + this.formatMoney(perf.TargetPerformance), icon: 'el-icon-aim', iconBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
                { label: '退卡金额', value: '￥' + this.formatMoney(perf.RefundAmount), icon: 'el-icon-money', iconBg: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' }
            ]
        },
        // 更新运营指标列表
        updateOperationList(oper) {
            if (!oper) {
                this.operationList = [
                    { label: '人头数', value: '0', icon: 'el-icon-user', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                    { label: '人次', value: '0', icon: 'el-icon-user-solid', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                    { label: '项目数', value: '0', icon: 'el-icon-menu', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
                    { label: '客单价', value: '￥0', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
                    { label: '项目单价', value: '￥0', icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                    { label: '人均项目数', value: '0', icon: 'el-icon-s-grid', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' }
                ]
                return
            }

            this.operationList = [
                { label: '人头数', value: this.formatNumber(oper.HeadCount), icon: 'el-icon-user', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                { label: '人次', value: this.formatNumber(oper.PersonCount), icon: 'el-icon-user-solid', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                { label: '项目数', value: this.formatNumber(oper.ProjectCount), icon: 'el-icon-menu', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
                { label: '客单价', value: '￥' + this.formatMoney(oper.AvgAmountPerPerson), icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
                { label: '项目单价', value: '￥' + this.formatMoney(oper.AvgAmountPerProject), icon: 'el-icon-coin', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                { label: '人均项目数', value: this.formatNumber(oper.AvgProjectPerHead, 2), icon: 'el-icon-s-grid', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' }
            ]
        },
        // 更新会员分析列表
        updateMemberList(memberData) {
            if (!memberData) {
                this.memberList = [
                    { label: '总会员数', value: '0', icon: 'el-icon-user', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                    { label: '本月新增', value: '0', icon: 'el-icon-user-solid', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                    { label: '活跃会员', value: '0', icon: 'el-icon-success', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', rate: '0%' },
                    { label: '沉睡会员', value: '0', icon: 'el-icon-warning', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', rate: '0%' },
                    { label: '生美会员', value: '0', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                    { label: '医美会员', value: '0', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
                    { label: '科美会员', value: '0', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
                    { label: '教育会员', value: '0', icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' }
                ]
                return
            }

            const totalMembers = memberData.TotalMembers || 0
            const activeRate = memberData.ActiveMemberRate || 0
            const sleepRate = memberData.SleepMemberRate || 0

            this.memberList = [
                { label: '总会员数', value: this.formatNumber(totalMembers), icon: 'el-icon-user', iconBg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
                { label: '本月新增', value: this.formatNumber(memberData.NewMembersThisMonth || 0), icon: 'el-icon-user-solid', iconBg: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
                { label: '活跃会员', value: this.formatNumber(memberData.ActiveMembers || 0), icon: 'el-icon-success', iconBg: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', rate: activeRate.toFixed(1) + '%' },
                { label: '沉睡会员', value: this.formatNumber(memberData.SleepMembers || 0), icon: 'el-icon-warning', iconBg: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', rate: sleepRate.toFixed(1) + '%' },
                { label: '生美会员', value: this.formatNumber(memberData.BeautyMembers || 0), icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
                { label: '医美会员', value: this.formatNumber(memberData.MedicalMembers || 0), icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
                { label: '科美会员', value: this.formatNumber(memberData.TechMembers || 0), icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
                { label: '教育会员', value: this.formatNumber(memberData.EducationMembers || 0), icon: 'el-icon-star-on', iconBg: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)' }
            ]
        },
        // 格式化数字（添加千分位）
        formatNumber(value, decimals = 0) {
            if (value === null || value === undefined) return '0'
            const num = Number(value)
            if (isNaN(num)) return '0'
            return num.toLocaleString('zh-CN', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
        },
        // 更新快速数据洞察
        updateDataInsights() {
            if (!this.storeData || !this.storeData.Operation || !this.heatmapData || this.heatmapData.length === 0) {
                this.dataInsights = [
                    { title: '最佳营业时段', tag: '暂无', tagType: 'info', value: '暂无数据', desc: '暂无数据' },
                    { title: '高价值会员', tag: '暂无', tagType: 'info', value: '0人', desc: '暂无数据' },
                    { title: '项目转化率', tag: '暂无', tagType: 'info', value: '0%', desc: '暂无数据' },
                    { title: '复购周期', tag: '暂无', tagType: 'info', value: '暂无', desc: '暂无数据' }
                ]
                return
            }

            const oper = this.storeData.Operation
            const perf = this.storeData.Performance

            // 1. 最佳营业时段（从热力图数据中找）
            let bestHour = 0
            let maxPersonCount = 0
            this.heatmapData.forEach(item => {
                if (item.PersonCount > maxPersonCount) {
                    maxPersonCount = item.PersonCount
                    bestHour = item.Hour
                }
            })
            const bestTimeRange = bestHour >= 0 && maxPersonCount > 0
                ? `${String(bestHour).padStart(2, '0')}:00-${String(bestHour + 1).padStart(2, '0')}:00`
                : '暂无数据'

            // 2. 高价值会员（客单价超过1000的会员数，这里用估算）
            const highValueMemberCount = oper.AvgAmountPerPerson > 1000
                ? Math.round(oper.HeadCount * 0.3) // 估算30%为高价值会员
                : 0

            // 3. 项目转化率（预约转化为开单的比例，这里用估算）
            const conversionRate = this.funnelData && this.funnelData.ExpansionCount > 0
                ? ((this.funnelData.BillingCount / this.funnelData.ExpansionCount) * 100).toFixed(1)
                : '0.0'

            // 4. 复购周期（估算，基于平均项目数和人均项目数）
            const avgProjectPerHead = oper.AvgProjectPerHead || 0
            const repurchaseCycle = avgProjectPerHead > 0
                ? Math.round(30 / avgProjectPerHead) + '天'
                : '暂无'

            this.dataInsights = [
                {
                    title: '最佳营业时段',
                    tag: maxPersonCount > 0 ? '热门' : '暂无',
                    tagType: maxPersonCount > 0 ? 'danger' : 'info',
                    value: bestTimeRange,
                    desc: maxPersonCount > 0 ? `此时段客流量最高(${maxPersonCount}人次),建议配置更多人手` : '暂无数据'
                },
                {
                    title: '高价值会员',
                    tag: highValueMemberCount > 0 ? '重点' : '暂无',
                    tagType: highValueMemberCount > 0 ? 'warning' : 'info',
                    value: highValueMemberCount > 0 ? `${highValueMemberCount}人` : '0人',
                    desc: highValueMemberCount > 0 ? `单次消费超过¥1000,需重点维护` : '暂无数据'
                },
                {
                    title: '项目转化率',
                    tag: parseFloat(conversionRate) > 50 ? '优秀' : parseFloat(conversionRate) > 30 ? '良好' : '待提升',
                    tagType: parseFloat(conversionRate) > 50 ? 'success' : parseFloat(conversionRate) > 30 ? 'warning' : 'info',
                    value: conversionRate + '%',
                    desc: `拓客转化为开单的比例`
                },
                {
                    title: '复购周期',
                    tag: repurchaseCycle !== '暂无' ? '正常' : '暂无',
                    tagType: repurchaseCycle !== '暂无' ? 'info' : 'info',
                    value: repurchaseCycle,
                    desc: repurchaseCycle !== '暂无' ? `会员平均复购间隔,保持稳定` : '暂无数据'
                }
            ]
        },
        // 更新本月关键指标
        updateKeyMetrics() {
            if (!this.storeData || !this.storeData.Performance) {
                this.keyMetrics = [
                    { label: '目标完成度', value: 0, color: '#67C23A' },
                    { label: '会员活跃度', value: 0, color: '#409EFF' },
                    { label: '项目满意度', value: 0, color: '#E6A23C' },
                    { label: '员工效率', value: 0, color: '#F56C6C' }
                ]
                return
            }

            const perf = this.storeData.Performance
            const oper = this.storeData.Operation
            const memberData = this.memberList && this.memberList.length > 0 ? this.memberList : null

            // 1. 目标完成度（消耗业绩/目标业绩）
            const completionRate = perf.TargetPerformance > 0
                ? Math.min(100, parseFloat((perf.ConsumePerformance / perf.TargetPerformance * 100).toFixed(1)))
                : 0

            // 2. 会员活跃度（活跃会员/总会员数）
            const activeMember = memberData && memberData.length > 0
                ? memberData.find(m => m.label === '活跃会员')
                : null
            const activeMemberRate = activeMember && activeMember.rate
                ? parseFloat(activeMember.rate)
                : 0

            // 3. 项目满意度（估算，基于退卡率，退卡率越低满意度越高）
            const refundRate = perf.BillingPerformance > 0
                ? (perf.RefundAmount / perf.BillingPerformance * 100)
                : 0
            const satisfactionRate = Math.max(0, Math.min(100, parseFloat((100 - refundRate * 10).toFixed(1))))

            // 4. 员工效率（基于人均项目数，估算）
            const avgProjectPerHead = oper.AvgProjectPerHead || 0
            const efficiencyRate = Math.min(100, parseFloat((avgProjectPerHead * 10).toFixed(1)))

            this.keyMetrics = [
                { label: '目标完成度', value: completionRate, color: completionRate >= 100 ? '#67C23A' : completionRate >= 80 ? '#E6A23C' : '#F56C6C' },
                { label: '会员活跃度', value: activeMemberRate, color: activeMemberRate >= 60 ? '#67C23A' : activeMemberRate >= 40 ? '#409EFF' : '#909399' },
                { label: '项目满意度', value: satisfactionRate, color: satisfactionRate >= 90 ? '#67C23A' : satisfactionRate >= 70 ? '#E6A23C' : '#F56C6C' },
                { label: '员工效率', value: efficiencyRate, color: efficiencyRate >= 80 ? '#67C23A' : efficiencyRate >= 60 ? '#409EFF' : '#F56C6C' }
            ]
        },
        // 更新本月经营提示
        updateOperationTips() {
            if (!this.storeData || !this.storeData.Performance) {
                this.operationTips = []
                return
            }

            const perf = this.storeData.Performance
            const oper = this.storeData.Operation
            const memberData = this.memberList && this.memberList.length > 0 ? this.memberList : null

            const tips = []

            // 1. 目标完成度提示
            const completionRate = perf.TargetPerformance > 0
                ? (perf.ConsumePerformance / perf.TargetPerformance * 100)
                : 0
            if (completionRate >= 100) {
                tips.push({ type: 'success', icon: 'el-icon-success', text: `本月业绩完成度${completionRate.toFixed(1)}%,超额完成目标,继续保持` })
            } else if (completionRate >= 80) {
                tips.push({ type: 'success', icon: 'el-icon-success', text: `本月业绩完成度${completionRate.toFixed(1)}%,保持当前节奏` })
            } else if (completionRate >= 60) {
                tips.push({ type: 'warning', icon: 'el-icon-warning', text: `本月业绩完成度${completionRate.toFixed(1)}%,需加快进度` })
            } else {
                tips.push({ type: 'danger', icon: 'el-icon-error', text: `本月业绩完成度${completionRate.toFixed(1)}%,严重滞后,需立即采取措施` })
            }

            // 2. 沉睡会员提示
            if (memberData && memberData.length > 0) {
                const sleepMember = memberData.find(m => m.label === '沉睡会员')
                if (sleepMember && parseFloat(sleepMember.rate || '0') > 20) {
                    tips.push({ type: 'warning', icon: 'el-icon-warning', text: `沉睡会员占比${sleepMember.rate},建议加强会员唤醒` })
                }
            }

            // 3. 客单价提示
            if (oper.AvgAmountPerPerson > 0) {
                const avgPrice = oper.AvgAmountPerPerson
                if (avgPrice < 300) {
                    tips.push({ type: 'info', icon: 'el-icon-info', text: `客单价¥${avgPrice.toFixed(0)},可通过项目组合提升` })
                } else if (avgPrice > 800) {
                    tips.push({ type: 'success', icon: 'el-icon-success', text: `客单价¥${avgPrice.toFixed(0)},表现优秀` })
                }
            }

            // 4. 退卡金额提示
            if (perf.RefundAmount > 0 && perf.BillingPerformance > 0) {
                const refundRate = (perf.RefundAmount / perf.BillingPerformance * 100)
                if (refundRate > 5) {
                    tips.push({ type: 'warning', icon: 'el-icon-warning', text: `退卡金额${this.formatMoney(perf.RefundAmount)},退卡率${refundRate.toFixed(1)}%,需关注服务质量` })
                }
            }

            // 5. 如果提示少于4条，补充一些通用提示
            if (tips.length < 4) {
                if (oper.HeadCount > 0) {
                    tips.push({ type: 'info', icon: 'el-icon-info', text: `本月服务${oper.HeadCount}位会员,${oper.PersonCount}人次` })
                }
            }

            this.operationTips = tips.slice(0, 4) // 最多显示4条
        },
        initCharts() {
            this.$nextTick(() => {
                this.renderTrendChart()
                this.renderCategoryChart()
                this.renderCompareChart()
                this.renderStackedChart()
                this.renderFunnelChart()
                this.renderScatterChart()
                this.renderHeatmapChart()
                this.renderGaugeChart()
            })
        },
        renderTrendChart() {
            if (!this.$refs.trendChart) return
            if (!this.trendChart) {
                this.trendChart = echarts.init(this.$refs.trendChart)
            }

            // 如果没有数据，使用空数据
            if (!this.monthlyTrendData || this.monthlyTrendData.length === 0) {
                const option = {
                    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
                    legend: { data: ['开单业绩', '消耗业绩', '净业绩'], top: 10 },
                    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                    xAxis: { type: 'category', data: [] },
                    yAxis: { type: 'value', axisLabel: { formatter: '￥{value}' } },
                    series: [
                        { name: '开单业绩', type: 'line', smooth: true, data: [], itemStyle: { color: '#409EFF' }, areaStyle: { color: 'rgba(64, 158, 255, 0.1)' } },
                        { name: '消耗业绩', type: 'line', smooth: true, data: [], itemStyle: { color: '#67C23A' }, areaStyle: { color: 'rgba(103, 194, 58, 0.1)' } },
                        { name: '净业绩', type: 'line', smooth: true, data: [], itemStyle: { color: '#E6A23C' }, areaStyle: { color: 'rgba(230, 162, 60, 0.1)' } }
                    ]
                }
                this.trendChart.setOption(option)
                return
            }

            // 格式化月份显示（从 YYYYMM 转为 YYYY-MM）
            const months = this.monthlyTrendData.map(item => {
                const month = item.Month || ''
                if (month.length === 6) {
                    return month.substring(0, 4) + '-' + month.substring(4, 6)
                }
                return month
            })
            const billingData = this.monthlyTrendData.map(item => item.BillingPerformance || 0)
            const consumeData = this.monthlyTrendData.map(item => item.ConsumePerformance || 0)
            const netData = this.monthlyTrendData.map(item => item.NetPerformance || 0)

            const option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
                legend: { data: ['开单业绩', '消耗业绩', '净业绩'], top: 10 },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'category', data: months },
                yAxis: { type: 'value', axisLabel: { formatter: value => value >= 10000 ? (value / 10000).toFixed(1) + '万' : value } },
                series: [
                    { name: '开单业绩', type: 'line', smooth: true, data: billingData, itemStyle: { color: '#409EFF' }, areaStyle: { color: 'rgba(64, 158, 255, 0.1)' } },
                    { name: '消耗业绩', type: 'line', smooth: true, data: consumeData, itemStyle: { color: '#67C23A' }, areaStyle: { color: 'rgba(103, 194, 58, 0.1)' } },
                    { name: '净业绩', type: 'line', smooth: true, data: netData, itemStyle: { color: '#E6A23C' }, areaStyle: { color: 'rgba(230, 162, 60, 0.1)' } }
                ]
            }
            this.trendChart.setOption(option)
        },
        renderCategoryChart() {
            if (!this.$refs.categoryChart) return
            if (!this.categoryChart) {
                this.categoryChart = echarts.init(this.$refs.categoryChart)
            }

            // 如果没有数据，使用空数据
            if (!this.categoryData || this.categoryData.length === 0) {
                const option = {
                    tooltip: { trigger: 'item' },
                    legend: { show: false },
                    series: [{
                        name: '品项分类',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: true,
                        itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
                        label: { show: true, position: 'outside', formatter: '{b}\n{c}', fontSize: 12 },
                        labelLine: { show: true, length: 15, length2: 10 },
                        data: []
                    }]
                }
                this.categoryChart.setOption(option)
                return
            }

            // 定义分类颜色映射
            const categoryColors = {
                '生美': '#A8D5E2',
                '医美': '#B8E6B8',
                '科美': '#FFD4A3',
                '产品': '#E6C1E6',
                '教育': '#F5DEB3',
                '其他': '#DDA0DD'
            }

            // 格式化数据
            const chartData = this.categoryData.map(item => ({
                value: item.ConsumeAmount || 0,
                name: item.CategoryName || '其他',
                itemStyle: {
                    color: categoryColors[item.CategoryName] || categoryColors['其他'],
                    borderRadius: 6,
                    borderColor: '#fff',
                    borderWidth: 2
                }
            }))

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: ￥{c} ({d}%)'
                },
                legend: { show: false },
                series: [{
                    name: '品项分类',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: true,
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: (params) => {
                            return params.name + '\n￥' + this.formatMoney(params.value)
                        },
                        fontSize: 12
                    },
                    labelLine: { show: true, length: 15, length2: 10 },
                    data: chartData
                }]
            }
            this.categoryChart.setOption(option)
        },
        renderCompareChart() {
            if (!this.$refs.compareChart) return
            if (!this.compareChart) {
                this.compareChart = echarts.init(this.$refs.compareChart)
            }

            // 如果没有数据，使用空数据
            if (!this.monthlyTrendData || this.monthlyTrendData.length === 0) {
                const option = {
                    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                    legend: { data: ['开单业绩', '消耗业绩'], top: 10 },
                    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                    xAxis: { type: 'category', data: [] },
                    yAxis: { type: 'value', axisLabel: { formatter: value => value >= 1 ? value.toFixed(1) + '万' : value } },
                    series: [
                        { name: '开单业绩', type: 'bar', data: [], itemStyle: { color: '#409EFF' } },
                        { name: '消耗业绩', type: 'bar', data: [], itemStyle: { color: '#67C23A' } }
                    ]
                }
                this.compareChart.setOption(option)
                return
            }

            // 格式化月份显示（从 YYYYMM 转为 月份显示）
            const months = this.monthlyTrendData.map(item => {
                const month = item.Month || ''
                if (month.length === 6) {
                    const monthNum = parseInt(month.substring(4, 6))
                    return monthNum + '月'
                }
                return month
            })
            const billingData = this.monthlyTrendData.map(item => (item.BillingPerformance || 0) / 10000) // 转换为万元
            const consumeData = this.monthlyTrendData.map(item => (item.ConsumePerformance || 0) / 10000) // 转换为万元

            const option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                legend: { data: ['开单业绩', '消耗业绩'], top: 10 },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'category', data: months },
                yAxis: { type: 'value', axisLabel: { formatter: value => value >= 1 ? value.toFixed(1) + '万' : value } },
                series: [
                    { name: '开单业绩', type: 'bar', data: billingData, itemStyle: { color: '#409EFF' } },
                    { name: '消耗业绩', type: 'bar', data: consumeData, itemStyle: { color: '#67C23A' } }
                ]
            }
            this.compareChart.setOption(option)
        },
        renderStackedChart() {
            if (!this.$refs.stackedChart) return
            if (!this.stackedChart) {
                this.stackedChart = echarts.init(this.$refs.stackedChart)
            }

            // 如果没有数据，使用空数据
            if (!this.categoryMonthlyData || this.categoryMonthlyData.length === 0) {
                const option = {
                    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                    legend: { data: ['生美', '医美', '科美', '产品'], top: 10 },
                    grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                    xAxis: { type: 'category', data: [] },
                    yAxis: { type: 'value', axisLabel: { formatter: value => value >= 10000 ? (value / 10000).toFixed(1) + '万' : value } },
                    series: [
                        { name: '生美', type: 'bar', stack: 'total', data: [], itemStyle: { color: '#A8D5E2' } },
                        { name: '医美', type: 'bar', stack: 'total', data: [], itemStyle: { color: '#B8E6B8' } },
                        { name: '科美', type: 'bar', stack: 'total', data: [], itemStyle: { color: '#FFD4A3' } },
                        { name: '产品', type: 'bar', stack: 'total', data: [], itemStyle: { color: '#E6C1E6' } }
                    ]
                }
                this.stackedChart.setOption(option)
                return
            }

            // 格式化月份显示（从 YYYYMM 转为 月份显示）
            const months = this.categoryMonthlyData.map(item => {
                const month = item.Month || ''
                if (month.length === 6) {
                    const monthNum = parseInt(month.substring(4, 6))
                    return monthNum + '月'
                }
                return month
            })
            const beautyData = this.categoryMonthlyData.map(item => (item.BeautyPerformance || 0) / 10000) // 转换为万元
            const medicalData = this.categoryMonthlyData.map(item => (item.MedicalPerformance || 0) / 10000) // 转换为万元
            const techData = this.categoryMonthlyData.map(item => (item.TechPerformance || 0) / 10000) // 转换为万元
            const productData = this.categoryMonthlyData.map(item => (item.ProductPerformance || 0) / 10000) // 转换为万元

            const option = {
                tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
                legend: { data: ['生美', '医美', '科美', '产品'], top: 10 },
                grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'category', data: months },
                yAxis: { type: 'value', axisLabel: { formatter: value => value >= 1 ? value.toFixed(1) + '万' : value } },
                series: [
                    { name: '生美', type: 'bar', stack: 'total', data: beautyData, itemStyle: { color: '#A8D5E2' } },
                    { name: '医美', type: 'bar', stack: 'total', data: medicalData, itemStyle: { color: '#B8E6B8' } },
                    { name: '科美', type: 'bar', stack: 'total', data: techData, itemStyle: { color: '#FFD4A3' } },
                    { name: '产品', type: 'bar', stack: 'total', data: productData, itemStyle: { color: '#E6C1E6' } }
                ]
            }
            this.stackedChart.setOption(option)
        },
        renderFunnelChart() {
            if (!this.$refs.funnelChart) return
            if (!this.funnelChart) {
                this.funnelChart = echarts.init(this.$refs.funnelChart)
            }

            // 如果没有数据，使用空数据
            if (!this.funnelData) {
                const option = {
                    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
                    legend: { data: ['拓客', '邀约', '预约', '开单'], top: 10 },
                    series: [{
                        name: '拓客转化',
                        type: 'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        width: '80%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: { show: true, position: 'inside', formatter: '{b}: {c}' },
                        labelLine: { length: 10, lineStyle: { width: 1, type: 'solid' } },
                        itemStyle: { borderColor: '#fff', borderWidth: 1 },
                        emphasis: { label: { fontSize: 20 } },
                        data: []
                    }]
                }
                this.funnelChart.setOption(option)
                return
            }

            // 计算最大值（用于设置漏斗图的max值）
            const maxValue = Math.max(
                this.funnelData.ExpansionCount || 0,
                this.funnelData.InviteCount || 0,
                this.funnelData.AppointmentCount || 0,
                this.funnelData.BillingCount || 0
            ) || 100

            const option = {
                tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
                legend: { data: ['拓客', '邀约', '预约', '开单'], top: 10 },
                series: [{
                    name: '拓客转化',
                    type: 'funnel',
                    left: '10%',
                    top: 60,
                    bottom: 60,
                    width: '80%',
                    min: 0,
                    max: maxValue,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: { show: true, position: 'inside', formatter: '{b}: {c}' },
                    labelLine: { length: 10, lineStyle: { width: 1, type: 'solid' } },
                    itemStyle: { borderColor: '#fff', borderWidth: 1 },
                    emphasis: { label: { fontSize: 20 } },
                    data: [
                        { value: this.funnelData.ExpansionCount || 0, name: '拓客', itemStyle: { color: '#409EFF' } },
                        { value: this.funnelData.InviteCount || 0, name: '邀约', itemStyle: { color: '#67C23A' } },
                        { value: this.funnelData.AppointmentCount || 0, name: '预约', itemStyle: { color: '#E6A23C' } },
                        { value: this.funnelData.BillingCount || 0, name: '开单', itemStyle: { color: '#909399' } }
                    ]
                }]
            }
            this.funnelChart.setOption(option)
        },
        renderScatterChart() {
            if (!this.$refs.scatterChart) return
            if (!this.scatterChart) {
                this.scatterChart = echarts.init(this.$refs.scatterChart)
            }

            // 如果没有数据，使用空数据
            if (!this.scatterData || this.scatterData.length === 0) {
                const option = {
                    tooltip: { trigger: 'item', formatter: '客单价: {c[0]}<br/>项目数: {c[1]}<br/>会员数: {c[2]}' },
                    legend: { data: ['会员分布'], top: 10 },
                    grid: { left: '3%', right: '7%', bottom: '3%', top: '15%', containLabel: true },
                    xAxis: { type: 'value', name: '客单价(元)', nameLocation: 'middle', nameGap: 30 },
                    yAxis: { type: 'value', name: '项目数', nameLocation: 'middle', nameGap: 50 },
                    series: [{
                        name: '会员分布',
                        type: 'scatter',
                        symbolSize: data => Math.sqrt(data[2]) * 2,
                        data: [],
                        itemStyle: { color: '#409EFF', opacity: 0.6 }
                    }]
                }
                this.scatterChart.setOption(option)
                return
            }

            // 格式化数据为散点图需要的格式 [客单价, 项目数, 会员数]
            const scatterData = this.scatterData.map(item => [
                item.AvgAmountPerPerson || 0,
                item.AvgProjectPerPerson || 0,
                item.MemberCount || 0
            ])

            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        const data = params.value
                        return `客单价: ¥${this.formatMoney(data[0])}<br/>项目数: ${data[1].toFixed(2)}<br/>会员数: ${data[2]}`
                    }
                },
                legend: { data: ['会员分布'], top: 10 },
                grid: { left: '3%', right: '7%', bottom: '3%', top: '15%', containLabel: true },
                xAxis: { type: 'value', name: '客单价(元)', nameLocation: 'middle', nameGap: 30 },
                yAxis: { type: 'value', name: '项目数', nameLocation: 'middle', nameGap: 50 },
                series: [{
                    name: '会员分布',
                    type: 'scatter',
                    symbolSize: data => {
                        const memberCount = data[2] || 1
                        return Math.sqrt(memberCount) * 3 + 5 // 根据会员数调整点的大小
                    },
                    data: scatterData,
                    itemStyle: { color: '#409EFF', opacity: 0.6 }
                }]
            }
            this.scatterChart.setOption(option)
        },
        renderHeatmapChart() {
            if (!this.$refs.heatmapChart) return
            if (!this.heatmapChart) {
                this.heatmapChart = echarts.init(this.$refs.heatmapChart)
            }

            const hours = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            const times = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00']

            // 如果没有数据，使用空数据
            if (!this.heatmapData || this.heatmapData.length === 0) {
                const option = {
                    tooltip: { position: 'top', formatter: params => `${hours[params.value[1]]} ${times[params.value[0]]}<br/>客流量: ${params.value[2]}` },
                    grid: { height: '50%', top: '10%' },
                    xAxis: { type: 'category', data: times, splitArea: { show: true }, position: 'top' },
                    yAxis: { type: 'category', data: hours, splitArea: { show: true } },
                    visualMap: {
                        min: 0,
                        max: 10,
                        calculable: true,
                        orient: 'horizontal',
                        left: 'center',
                        bottom: '5%',
                        inRange: { color: ['#e0f3ff', '#409EFF', '#1d4ed8'] }
                    },
                    series: [{
                        name: '客流量',
                        type: 'heatmap',
                        data: [],
                        label: { show: true },
                        emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
                    }]
                }
                this.heatmapChart.setOption(option)
                return
            }

            // 构建热力图数据 [时间段索引, 星期索引, 客流量]
            const data = []
            const timeIndexMap = {}
            times.forEach((time, index) => {
                timeIndexMap[time] = index
            })

            this.heatmapData.forEach(item => {
                const timeIndex = timeIndexMap[item.TimeSlot]
                if (timeIndex !== undefined) {
                    // MySQL的DAYOFWEEK返回1=周日，2=周一...，我们转换为0=周一，6=周日
                    // DayOfWeek: 0=周一, 6=周日
                    let dayIndex = item.DayOfWeek === 0 ? 6 : item.DayOfWeek - 1
                    if (dayIndex < 0 || dayIndex > 6) dayIndex = 0 // 容错处理
                    data.push([timeIndex, dayIndex, item.CustomerFlow || 0])
                }
            })

            // 计算最大值用于visualMap
            const maxValue = Math.max(...data.map(d => d[2]), 1)

            const option = {
                tooltip: { position: 'top', formatter: params => `${hours[params.value[1]]} ${times[params.value[0]]}<br/>客流量: ${params.value[2]}` },
                grid: { height: '50%', top: '10%' },
                xAxis: { type: 'category', data: times, splitArea: { show: true }, position: 'top' },
                yAxis: { type: 'category', data: hours, splitArea: { show: true } },
                visualMap: {
                    min: 0,
                    max: maxValue,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '5%',
                    inRange: { color: ['#e0f3ff', '#409EFF', '#1d4ed8'] }
                },
                series: [{
                    name: '客流量',
                    type: 'heatmap',
                    data: data,
                    label: { show: true },
                    emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
                }]
            }
            this.heatmapChart.setOption(option)
        },
        renderGaugeChart() {
            if (!this.$refs.gaugeChart) return
            if (!this.gaugeChart) {
                this.gaugeChart = echarts.init(this.$refs.gaugeChart)
            }

            // 获取完成率
            const completionRate = this.storeData && this.storeData.Performance
                ? (this.storeData.Performance.CompletionRate || 0)
                : 0

            const option = {
                tooltip: { formatter: '{a} <br/>{b}: {c}%' },
                series: [{
                    name: '目标完成度',
                    type: 'gauge',
                    progress: { show: true },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}%',
                        fontSize: 20,
                        offsetCenter: [0, '70%'],
                        color: completionRate >= 100 ? '#67C23A' : completionRate >= 80 ? '#409EFF' : '#F56C6C'
                    },
                    data: [{ value: parseFloat(completionRate.toFixed(1)), name: '完成率' }],
                    axisLine: {
                        lineStyle: {
                            width: 20,
                            color: [
                                [0.3, '#67C23A'],
                                [0.7, '#409EFF'],
                                [1, '#F56C6C']
                            ]
                        }
                    },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLabel: { show: false },
                    pointer: { show: false },
                    title: { show: false }
                }]
            }
            this.gaugeChart.setOption(option)
        },
        handleResize() {
            if (this.trendChart) this.trendChart.resize()
            if (this.categoryChart) this.categoryChart.resize()
            if (this.compareChart) this.compareChart.resize()
            if (this.stackedChart) this.stackedChart.resize()
            if (this.funnelChart) this.funnelChart.resize()
            if (this.scatterChart) this.scatterChart.resize()
            if (this.heatmapChart) this.heatmapChart.resize()
            if (this.gaugeChart) this.gaugeChart.resize()
        },
        formatMoney(value, decimals = 2) {
            if (value === null || value === undefined) return '0.00'
            const num = Number(value)
            if (isNaN(num)) return '0.00'
            return num.toLocaleString('zh-CN', { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
        },
        getRankingClass(rank, total) {
            const percentage = rank / total
            if (percentage <= 0.2) return 'excellent'
            if (percentage <= 0.5) return 'good'
            return 'normal'
        },
        getRankingText(rank, total) {
            const percentage = rank / total
            if (percentage <= 0.2) return '优秀'
            if (percentage <= 0.5) return '良好'
            return '一般'
        },
        getCategoryType(category) {
            const typeMap = {
                '生美': 'primary',
                '医美': 'success',
                '科美': 'warning',
                '产品': 'info'
            }
            return typeMap[category] || ''
        }
    }
}
</script>

<style lang="scss" scoped>
.store-dashboard {
    padding: 20px;
    background: #f5f7fa;
    min-height: calc(100vh - 84px);

    // 筛选器栏
    .filter-bar {
        background: #fff;
        padding: 16px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        .filter-form {
            margin: 0;

            ::v-deep .el-form-item {
                margin-bottom: 0;
            }

            ::v-deep .el-form-item__label {
                font-weight: 500;
                color: #606266;
            }
        }
    }

    // 顶部Header
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        background: #fff;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        .header-left {
            .store-info {
                display: flex;
                align-items: center;
                gap: 16px;

                .store-avatar {
                    width: 64px;
                    height: 64px;
                    border-radius: 12px;
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    font-size: 28px;
                }

                .store-details {
                    .store-name-row {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        margin-bottom: 8px;

                        .store-name {
                            margin: 0;
                            font-size: 24px;
                            font-weight: 600;
                            color: #303133;
                        }
                    }

                    .store-meta {
                        display: flex;
                        gap: 20px;
                        font-size: 14px;
                        color: #606266;

                        .meta-item {
                            display: flex;
                            align-items: center;
                            gap: 6px;

                            i {
                                color: #909399;
                            }
                        }
                    }
                }
            }
        }

        .header-right {
            .core-stats {
                display: flex;
                gap: 16px;

                .core-stat-item {
                    padding: 16px 20px;
                    border-radius: 10px;
                    min-width: 140px;
                    text-align: center;
                    transition: all 0.3s;

                    &.primary {
                        background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
                        border-left: 4px solid #409EFF;
                    }

                    &.success {
                        background: linear-gradient(135deg, #f0f9ff 0%, #e1f3ff 100%);
                        border-left: 4px solid #67C23A;
                    }

                    &.info {
                        background: linear-gradient(135deg, #f4f4f5 0%, #e9e9eb 100%);
                        border-left: 4px solid #909399;
                    }

                    &.warning {
                        background: linear-gradient(135deg, #fdf6ec 0%, #fae6d3 100%);
                        border-left: 4px solid #E6A23C;
                    }

                    .stat-label {
                        font-size: 13px;
                        color: #606266;
                        margin-bottom: 8px;
                    }

                    .stat-value {
                        font-size: 22px;
                        font-weight: 700;
                        color: #303133;
                        margin-bottom: 6px;
                    }

                    .stat-trend {
                        font-size: 12px;
                        font-weight: 500;

                        &.up {
                            color: #67C23A;
                        }

                        i {
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }

    // 主要内容区域：左右分栏
    .main-content {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 20px;
        margin-bottom: 20px;
        align-items: start;

        .content-left {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .content-right {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .chart-row {
            margin-bottom: 0;
        }
    }

    // 图表卡片
    .chart-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 16px 20px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 20px;
        }

        .chart-container {
            width: 100%;
            height: 360px;
            min-height: 360px;
        }
    }

    .chart-card-small {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .chart-container-small {
            width: 100%;
            height: 260px;
            min-height: 260px;
        }
    }

    // 指标卡片
    .metrics-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;

            .metric-item {
                display: flex;
                align-items: center;
                padding: 12px;
                background: #f8f9fa;
                border-radius: 8px;
                transition: all 0.3s;

                &:hover {
                    background: #f0f2f5;
                    transform: translateY(-1px);
                }

                .metric-icon {
                    width: 40px;
                    height: 40px;
                    border-radius: 8px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 18px;
                    margin-right: 10px;
                    flex-shrink: 0;
                }

                .metric-info {
                    flex: 1;
                    min-width: 0;

                    .metric-label {
                        font-size: 12px;
                        color: #909399;
                        margin-bottom: 4px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .metric-value {
                        font-size: 16px;
                        font-weight: 600;
                        color: #303133;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .metric-rate {
                        font-size: 11px;
                        color: #909399;
                        margin-top: 2px;
                    }
                }
            }
        }
    }

    // 卡片标题
    .card-header {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        color: #303133;

        i {
            margin-right: 8px;
            color: #409EFF;
            font-size: 16px;
        }
    }

    // 排名对比卡片
    .ranking-content {
        padding: 8px 0;

        .ranking-item {
            text-align: center;
            padding: 16px 0;

            .ranking-label {
                font-size: 13px;
                color: #909399;
                margin-bottom: 12px;
            }

            .ranking-value {
                margin-bottom: 12px;

                .rank-number {
                    font-size: 36px;
                    font-weight: 700;
                    color: #409EFF;
                }

                .rank-total {
                    font-size: 18px;
                    color: #909399;
                    margin-left: 4px;
                }
            }

            .ranking-badge {
                display: inline-block;
                padding: 4px 16px;
                border-radius: 12px;
                font-size: 13px;
                font-weight: 600;

                &.excellent {
                    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                    color: #fff;
                }

                &.good {
                    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                    color: #fff;
                }

                &.normal {
                    background: #f4f4f5;
                    color: #909399;
                }
            }
        }

        .comparison-stats {
            .stat-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;
                font-size: 13px;

                &:not(:last-child) {
                    border-bottom: 1px dashed #ebeef5;
                }

                .stat-label {
                    color: #606266;
                }

                .stat-value {
                    font-weight: 600;
                    color: #303133;
                }
            }
        }
    }

    // 经营提示卡片
    .tips-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .tips-content {
            .tip-item {
                display: flex;
                align-items: flex-start;
                padding: 12px;
                margin-bottom: 8px;
                border-radius: 8px;
                font-size: 13px;
                line-height: 1.6;
                transition: all 0.3s;

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

                i {
                    margin-right: 8px;
                    margin-top: 2px;
                    font-size: 14px;
                    flex-shrink: 0;
                }

                span {
                    flex: 1;
                }

                &.success {
                    background: #f0f9ff;
                    color: #67C23A;

                    i {
                        color: #67C23A;
                    }
                }

                &.warning {
                    background: #fdf6ec;
                    color: #E6A23C;

                    i {
                        color: #E6A23C;
                    }
                }

                &.info {
                    background: #f4f4f5;
                    color: #909399;

                    i {
                        color: #909399;
                    }
                }

                &:hover {
                    transform: translateX(4px);
                }
            }
        }
    }

    // 快速数据洞察卡片
    .insight-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .insight-content {
            .insight-item {
                padding: 14px;
                margin-bottom: 12px;
                background: #f8f9fa;
                border-radius: 8px;
                border-left: 3px solid #409EFF;
                transition: all 0.3s;

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

                &:hover {
                    background: #f0f2f5;
                    transform: translateX(4px);
                }

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

                    .insight-title {
                        font-size: 13px;
                        font-weight: 600;
                        color: #303133;
                    }
                }

                .insight-value {
                    font-size: 20px;
                    font-weight: 700;
                    color: #409EFF;
                    margin-bottom: 6px;
                }

                .insight-desc {
                    font-size: 12px;
                    color: #909399;
                    line-height: 1.5;
                }
            }
        }
    }

    // 关键指标卡片
    .key-metrics-card {
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

        ::v-deep .el-card__header {
            padding: 14px 18px;
            border-bottom: 1px solid #ebeef5;
        }

        ::v-deep .el-card__body {
            padding: 16px;
        }

        .key-metrics-content {
            .progress-item {
                margin-bottom: 20px;

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

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

                    .progress-label {
                        font-size: 13px;
                        color: #606266;
                        font-weight: 500;
                    }

                    .progress-value {
                        font-size: 16px;
                        font-weight: 700;
                        color: #303133;
                    }
                }
            }
        }
    }

    // 表格区域
    .table-section {
        .table-card {
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

            ::v-deep .el-card__header {
                padding: 16px 20px;
                border-bottom: 1px solid #ebeef5;
            }

            ::v-deep .el-card__body {
                padding: 20px;
            }
        }
    }
}
</style>