antissoft / lvqianmeiye_ERP

<template>
  <el-dialog :visible.sync="visibleSync" title="门店数据结构分析" :width="'1500px'" append-to-body top="8vh"
    custom-class="store-data-analysis-dialog" :close-on-click-modal="false" @closed="handleClosed">
    <div v-loading="loading" class="analysis-wrapper">
      <!-- 顶部：门店核心信息卡片 -->
      <div class="analysis-header">
        <div class="header-avatar">
          <div class="avatar-circle">
            <i class="el-icon-office-building"></i>
          </div>
        </div>
        <div class="header-main">
          <div class="store-name-row">
            <h2 class="store-name">{{ baseInfo.StoreName || '—' }}</h2>
            <el-tag v-if="baseInfo.Status" type="info" size="small" class="status-tag">
              {{ baseInfo.Status }}
            </el-tag>
          </div>
          <div class="store-meta">
            <div class="meta-item" v-if="baseInfo.StoreCode">
              <i class="el-icon-tickets"></i>
              <span>编码：{{ baseInfo.StoreCode }}</span>
            </div>
            <div class="meta-item" v-if="baseInfo.City">
              <i class="el-icon-location"></i>
              <span>{{ baseInfo.City }}</span>
            </div>
            <div class="meta-item" v-if="baseInfo.Address">
              <i class="el-icon-map-location"></i>
              <span>{{ baseInfo.Address }}</span>
            </div>
            <div class="meta-item" v-if="baseInfo.OpenTime">
              <i class="el-icon-calendar"></i>
              <span>开业：{{ formatDate(baseInfo.OpenTime) }}</span>
            </div>
            <div class="meta-item" v-if="baseInfo.BusinessUnit">
              <i class="el-icon-office-building"></i>
              <span>事业部：{{ baseInfo.BusinessUnit }}</span>
            </div>
            <div class="meta-item" v-if="baseInfo.TechDepartment">
              <i class="el-icon-cpu"></i>
              <span>科技部：{{ baseInfo.TechDepartment }}</span>
            </div>
            <div class="meta-item" v-if="baseInfo.EducationDepartment">
              <i class="el-icon-reading"></i>
              <span>教育部：{{ baseInfo.EducationDepartment }}</span>
            </div>
            <div class="meta-item" v-if="baseInfo.MajorProjectDepartment">
              <i class="el-icon-folder-opened"></i>
              <span>大项目部：{{ baseInfo.MajorProjectDepartment }}</span>
            </div>
          </div>
        </div>
        <div class="header-right">
          <div class="header-stats">
            <div class="stat-card stat-primary">
              <el-tag type="primary" size="small" class="stat-label-tag">开单业绩</el-tag>
              <span class="stat-value">￥{{ formatMoney(performance.BillingPerformance || 0) }}</span>
            </div>
            <div class="stat-card stat-success">
              <el-tag type="success" size="small" class="stat-label-tag">消耗业绩</el-tag>
              <span class="stat-value">￥{{ formatMoney(performance.ConsumePerformance || 0) }}</span>
            </div>
            <div class="stat-card stat-info">
              <el-tag type="info" size="small" class="stat-label-tag">完成率</el-tag>
              <span class="stat-value">{{ formatMoney(performance.CompletionRate || 0) }}%</span>
            </div>
            <div class="stat-card stat-warning">
              <el-tag type="warning" size="small" class="stat-label-tag">净业绩</el-tag>
              <span class="stat-value">￥{{ formatMoney(performance.NetPerformance || 0) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 选项卡内容 -->
      <el-tabs v-model="activeTab" class="analysis-tabs">
        <!-- 概览 -->
        <el-tab-pane label="概览" name="overview">
          <div class="tab-content">
            <!-- 业绩概览 -->
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-data-line"></i>
                <span class="card-title">业绩概览</span>
              </div>
              <div class="card-body">
                <div class="performance-grid">
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-document"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">开单次数</div>
                      <div class="performance-value">{{ performance.BillingCount || 0 }}</div>
                    </div>
                  </div>
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-goods"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">消耗次数</div>
                      <div class="performance-value">{{ performance.ConsumeCount || 0 }}</div>
                    </div>
                  </div>
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-refresh-left"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">退卡次数</div>
                      <div class="performance-value">{{ performance.RefundCount || 0 }}</div>
                    </div>
                  </div>
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-coin"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">平均开单金额</div>
                      <div class="performance-value">￥{{ formatMoney(performance.AvgBillingAmount) }}</div>
                    </div>
                  </div>
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-coin"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">平均消耗金额</div>
                      <div class="performance-value">￥{{ formatMoney(performance.AvgConsumeAmount) }}</div>
                    </div>
                  </div>
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-wallet"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">剩余权益</div>
                      <div class="performance-value">￥{{ formatMoney(performance.RemainingRightsAmount) }}</div>
                    </div>
                  </div>
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-aim"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">目标业绩</div>
                      <div class="performance-value">￥{{ formatMoney(performance.TargetPerformance) }}</div>
                    </div>
                  </div>
                  <div class="performance-item">
                    <div class="performance-icon">
                      <i class="el-icon-money"></i>
                    </div>
                    <div class="performance-content">
                      <div class="performance-label">退卡金额</div>
                      <div class="performance-value">￥{{ formatMoney(performance.RefundAmount) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 运营指标 -->
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-s-data"></i>
                <span class="card-title">运营指标</span>
              </div>
              <div class="card-body">
                <div class="operation-grid">
                  <div class="operation-item">
                    <div class="operation-icon">
                      <i class="el-icon-user"></i>
                    </div>
                    <div class="operation-content">
                      <div class="operation-label">人头数</div>
                      <div class="operation-value">{{ operation.HeadCount || 0 }}</div>
                    </div>
                  </div>
                  <div class="operation-item">
                    <div class="operation-icon">
                      <i class="el-icon-user-solid"></i>
                    </div>
                    <div class="operation-content">
                      <div class="operation-label">人次</div>
                      <div class="operation-value">{{ operation.PersonCount || 0 }}</div>
                    </div>
                  </div>
                  <div class="operation-item">
                    <div class="operation-icon">
                      <i class="el-icon-menu"></i>
                    </div>
                    <div class="operation-content">
                      <div class="operation-label">项目数</div>
                      <div class="operation-value">{{ operation.ProjectCount || 0 }}</div>
                    </div>
                  </div>
                  <div class="operation-item">
                    <div class="operation-icon">
                      <i class="el-icon-coin"></i>
                    </div>
                    <div class="operation-content">
                      <div class="operation-label">客单价</div>
                      <div class="operation-value">￥{{ formatMoney(operation.AvgAmountPerPerson || 0) }}</div>
                    </div>
                  </div>
                  <div class="operation-item">
                    <div class="operation-icon">
                      <i class="el-icon-coin"></i>
                    </div>
                    <div class="operation-content">
                      <div class="operation-label">项目单价</div>
                      <div class="operation-value">￥{{ formatMoney(operation.AvgAmountPerProject || 0) }}</div>
                    </div>
                  </div>
                  <div class="operation-item">
                    <div class="operation-icon">
                      <i class="el-icon-s-grid"></i>
                    </div>
                    <div class="operation-content">
                      <div class="operation-label">人均项目数</div>
                      <div class="operation-value">{{ formatMoney(operation.AvgProjectPerHead || 0) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 近12个月趋势图 -->
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-data-line"></i>
                <span class="card-title">近12个月业绩趋势</span>
              </div>
              <div class="card-body">
                <div ref="trendChart" class="trend-chart"></div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 会员分析 -->
        <el-tab-pane label="会员分析" name="member">
          <div class="tab-content">
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-user"></i>
                <span class="card-title">会员分析</span>
              </div>
              <div class="card-body">
                <div class="member-grid">
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-user"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">总会员数</div>
                      <div class="member-value">{{ member.TotalMembers || 0 }}</div>
                    </div>
                  </div>
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-user-solid"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">本月新增</div>
                      <div class="member-value">{{ member.NewMembersThisMonth || 0 }}</div>
                    </div>
                  </div>
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-success"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">活跃会员</div>
                      <div class="member-value">{{ member.ActiveMembers || 0 }}</div>
                      <div class="member-rate">活跃率：{{ formatMoney(member.ActiveMemberRate) }}%</div>
                    </div>
                  </div>
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-warning"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">沉睡会员</div>
                      <div class="member-value">{{ member.SleepMembers || 0 }}</div>
                      <div class="member-rate">沉睡率：{{ formatMoney(member.SleepMemberRate) }}%</div>
                    </div>
                  </div>
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-star-on"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">生美会员</div>
                      <div class="member-value">{{ member.BeautyMembers || 0 }}</div>
                    </div>
                  </div>
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-star-on"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">医美会员</div>
                      <div class="member-value">{{ member.MedicalMembers || 0 }}</div>
                    </div>
                  </div>
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-star-on"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">科美会员</div>
                      <div class="member-value">{{ member.TechMembers || 0 }}</div>
                    </div>
                  </div>
                  <div class="member-item">
                    <div class="member-icon">
                      <i class="el-icon-star-on"></i>
                    </div>
                    <div class="member-content">
                      <div class="member-label">教育会员</div>
                      <div class="member-value">{{ member.EducationMembers || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 健康师分析 -->
        <el-tab-pane label="健康师分析" name="healthCoach">
          <div class="tab-content">
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-user"></i>
                <span class="card-title">健康师业绩排行（Top 10）</span>
              </div>
              <div class="card-body">
                <el-table :data="healthCoachRanking" size="small" border stripe>
                  <el-table-column type="index" label="排名" width="60" align="center" />
                  <el-table-column prop="HealthCoachName" 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-column prop="BillingCount" label="开单次数" width="100" align="center" />
                  <el-table-column prop="ConsumeCount" label="消耗次数" width="100" align="center" />
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 品项分析 -->
        <el-tab-pane label="品项分析" name="item">
          <div class="tab-content">
            <!-- 品项消耗排行 -->
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-goods"></i>
                <span class="card-title">消耗品项排行（Top 10，按金额排序）</span>
              </div>
              <div class="card-body">
                <el-table :data="item.TopConsumeItems" size="small" border stripe
                  default-sort="{prop: 'ConsumeAmount', order: 'descending'}">
                  <el-table-column type="index" label="排名" width="60" align="center" />
                  <el-table-column prop="ItemName" label="品项名称" min-width="200" />
                  <el-table-column prop="ConsumeAmount" label="消耗金额" width="140" align="right" sortable>
                    <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="100" />
                  <el-table-column prop="ConsumeCount" label="消耗次数" width="100" align="center" />
                </el-table>
              </div>
            </div>

            <!-- 品项开单排行 -->
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-document"></i>
                <span class="card-title">开单品项排行（Top 10，按金额排序）</span>
              </div>
              <div class="card-body">
                <el-table :data="item.TopBillingItems" size="small" border stripe>
                  <el-table-column type="index" label="排名" width="60" align="center" />
                  <el-table-column prop="ItemName" label="品项名称" min-width="200" />
                  <el-table-column prop="Category" label="分类" width="100" />
                  <el-table-column prop="BillingAmount" label="开单金额" width="120" align="right">
                    <template slot-scope="scope">￥{{ formatMoney(scope.row.BillingAmount) }}</template>
                  </el-table-column>
                  <el-table-column prop="BillingCount" label="开单次数" width="100" align="center" />
                </el-table>
              </div>
            </div>

            <!-- 品项分类占比 -->
            <div class="content-card">
              <div class="card-header">
                <i class="el-icon-pie-chart"></i>
                <span class="card-title">品项分类占比</span>
              </div>
              <div class="card-body category-card-body">
                <div class="category-chart-wrapper">
                  <div ref="categoryChart" class="category-chart"></div>
                </div>
                <div class="category-list-wrapper">
                  <div class="category-list-header">
                    <span class="list-title">分类明细</span>
                  </div>
                  <div class="category-list">
                    <div v-for="(cat, index) in item.CategoryRatios" :key="cat.CategoryName || index" class="category-item">
                      <div class="category-info">
                        <span class="category-color-dot" :style="{ backgroundColor: getCategoryColor(index) }"></span>
                        <span class="category-name">{{ cat.CategoryName || '无' }}</span>
                      </div>
                      <div class="category-data">
                        <span class="category-amount">￥{{ formatMoney(cat.ConsumeAmount) }}</span>
                        <span class="category-ratio">{{ formatMoney(cat.Ratio) }}%</span>
                      </div>
                    </div>
                    <div v-if="!item.CategoryRatios || item.CategoryRatios.length === 0" class="category-empty">
                      <i class="el-icon-info"></i>
                      <span>暂无数据</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 每日运营数据 -->
        <el-tab-pane label="每日运营数据" name="daily">
          <div class="tab-content daily-tab-content">
            <div class="content-card daily-content-card">
              <div class="card-header">
                <i class="el-icon-date"></i>
                <span class="card-title">每日运营数据（当月）</span>
              </div>
              <div class="card-body daily-card-body">
                <div class="daily-chart-wrapper">
                  <div ref="dailyChart" class="daily-chart"></div>
                </div>
                <div class="daily-table-wrapper">
                  <el-table :data="dailyData" size="small" border stripe class="daily-data-table">
                    <el-table-column prop="Date" label="日期"  align="center">
                      <template slot-scope="scope">{{ formatDate(scope.row.Date) }}</template>
                    </el-table-column>
                    <el-table-column prop="HeadCount" label="人头数"  align="center" />
                    <el-table-column prop="PersonCount" label="人次" align="center" />
                    <el-table-column prop="ProjectCount" label="项目数"  align="center" />
                    <el-table-column prop="BillingPerformance" label="开单业绩"  align="center">
                      <template slot-scope="scope">￥{{ formatMoney(scope.row.BillingPerformance) }}</template>
                    </el-table-column>
                    <el-table-column prop="ConsumePerformance" label="消耗业绩"align="center">
                      <template slot-scope="scope">￥{{ formatMoney(scope.row.ConsumePerformance) }}</template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import * as echarts from 'echarts'

export default {
  name: 'StoreDataAnalysisDialog',
  props: {
    visible: { type: Boolean, default: false },
    storeId: { type: String, default: '' },
    statisticsMonth: { type: String, default: '' }
  },
  data() {
    return {
      visibleSync: false,
      loading: false,
      activeTab: 'overview',
      baseInfo: {},
      performance: {},
      operation: {},
      member: {},
      healthCoachRanking: [],
      item: { TopConsumeItems: [], TopBillingItems: [], CategoryRatios: [] },
      dailyData: [],
      monthlyTrend: [],
      trendChart: null,
      categoryChart: null,
      dailyChart: null
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(v) {
        this.visibleSync = v
        if (v && this.storeId) {
          this.fetchData()
        }
      }
    },
    storeId: {
      handler(newVal) {
        if (newVal && this.visibleSync) {
          this.fetchData()
        }
      }
    },
    activeTab: {
      handler(newTab) {
        // 切换 tab 时重新渲染对应的图表
        this.$nextTick(() => {
          setTimeout(() => {
            if (newTab === 'item' && this.item && this.item.CategoryRatios && this.item.CategoryRatios.length > 0) {
              this.renderCategoryChart()
            }
            if (newTab === 'daily' && this.dailyData && this.dailyData.length > 0) {
              this.renderDailyChart()
            }
            if (newTab === 'overview' && this.monthlyTrend && this.monthlyTrend.length > 0) {
              this.renderTrendChart()
            }
          }, 200)
        })
      }
    }
  },
  methods: {
    // 获取分类颜色（浅色系）
    getCategoryColor(index) {
      const lightColors = [
        '#A8D5E2', // 浅蓝色
        '#B8E6B8', // 浅绿色
        '#FFD4A3', // 浅橙色
        '#E6C1E6', // 浅紫色
        '#FFB6C1', // 浅粉色
        '#D4E6F1', // 浅天蓝色
        '#F0E68C', // 浅黄色
        '#DDA0DD', // 浅紫红色
        '#B0E0E6', // 浅青色
        '#F5DEB3'  // 浅米色
      ]
      return lightColors[index % lightColors.length]
    },
    async fetchData() {
      if (!this.storeId) {
        this.$message.warning('门店ID不能为空')
        return
      }

      this.loading = true
      try {
        // 准备请求参数（所有接口共用）
        const requestParams = {
          storeId: this.storeId,
          statisticsMonth: this.statisticsMonth || this.getCurrentMonth()
        }

        // 第一步：获取门店基础信息（单独接口）
        console.log('开始获取门店基础信息，门店ID:', this.storeId)
        
        const baseInfoRes = await request({
          url: '/api/Extend/LqReport/get-store-base-info',
          method: 'POST',
          data: requestParams
        })

        console.log('门店基础信息接口响应:', baseInfoRes)

        // 处理门店基础信息
        if (baseInfoRes && baseInfoRes.code === 200 && baseInfoRes.data) {
          const baseInfoData = baseInfoRes.data
          console.log('门店基础信息数据:', baseInfoData)
          this.baseInfo = {
            StoreId: baseInfoData.StoreId || this.storeId,
            StoreName: baseInfoData.StoreName || '—',
            StoreCode: baseInfoData.StoreCode || '',
            City: baseInfoData.City || '',
            Address: baseInfoData.Address || '',
            Status: baseInfoData.Status || '',
            OpenTime: baseInfoData.OpenTime || null,
            EmployeeCount: baseInfoData.EmployeeCount || 0,
            StoreType: baseInfoData.StoreType || '',
            StoreCategory: baseInfoData.StoreCategory || '',
            BusinessUnit: baseInfoData.BusinessUnit || '',
            EducationDepartment: baseInfoData.EducationDepartment || '',
            TechDepartment: baseInfoData.TechDepartment || '',
            MajorProjectDepartment: baseInfoData.MajorProjectDepartment || ''
          }
          console.log('处理后的门店基础信息:', this.baseInfo)
        } else {
          console.error('门店基础信息接口返回异常:', baseInfoRes)
          if (baseInfoRes && baseInfoRes.msg) {
            this.$message.error('获取门店基础信息失败: ' + baseInfoRes.msg)
          } else {
            this.$message.error('获取门店基础信息失败: 接口返回异常')
          }
          // 如果获取失败，尝试从门店接口获取基本信息（但归属信息会是ID）
          try {
            const fallbackRes = await request({
              url: `/api/Extend/LqMdxx/${this.storeId}`,
              method: 'GET'
            })
            if (fallbackRes && fallbackRes.code === 200 && fallbackRes.data) {
              const data = fallbackRes.data
              this.baseInfo = {
                StoreId: data.id || this.storeId,
                StoreName: data.dm || '—',
                StoreCode: data.mdbm || '',
                City: data.cs || '',
                Address: data.dz || '',
                Status: data.zxzt || '',
                OpenTime: data.kysj || null,
                EmployeeCount: data.zzrs || 0,
                StoreType: (data.storeType != null ? data.storeType.toString() : '') || '',
                StoreCategory: (data.storeCategory != null ? data.storeCategory.toString() : '') || '',
                BusinessUnit: '', // 备用方案：无法获取名称时留空
                EducationDepartment: '',
                TechDepartment: '',
                MajorProjectDepartment: ''
              }
            }
          } catch (e) {
            console.error('备用方案也失败:', e)
          }
        }

        // 第二步：获取业绩概览
        console.log('开始获取业绩概览，参数:', requestParams)
        const performanceRes = await request({
          url: '/api/Extend/LqReport/get-store-performance-overview',
          method: 'POST',
          data: requestParams
        })

        console.log('业绩概览接口响应:', performanceRes)

        // 处理业绩概览
        if (performanceRes && performanceRes.code === 200 && performanceRes.data) {
          this.performance = performanceRes.data
          console.log('处理后的业绩概览:', this.performance)
        } else {
          console.error('业绩概览接口返回异常:', performanceRes)
          this.performance = {}
          if (performanceRes && performanceRes.msg) {
            this.$message.warning('获取业绩概览失败: ' + performanceRes.msg)
          }
        }

        // 第三步：获取运营指标
        console.log('开始获取运营指标，参数:', requestParams)
        const operationRes = await request({
          url: '/api/Extend/LqReport/get-store-operation-metrics',
          method: 'POST',
          data: requestParams
        })

        console.log('运营指标接口响应:', operationRes)

        // 处理运营指标
        if (operationRes && operationRes.code === 200 && operationRes.data) {
          this.operation = operationRes.data
          console.log('处理后的运营指标:', this.operation)
        } else {
          console.error('运营指标接口返回异常:', operationRes)
          this.operation = {}
          if (operationRes && operationRes.msg) {
            this.$message.warning('获取运营指标失败: ' + operationRes.msg)
          }
        }

        // 第四步：获取近12个月业绩趋势
        console.log('开始获取近12个月业绩趋势，参数:', requestParams)
        const trendRes = await request({
          url: '/api/Extend/LqReport/get-store-monthly-trend',
          method: 'POST',
          data: requestParams
        })

        console.log('近12个月业绩趋势接口响应:', trendRes)

        // 处理业绩趋势
        if (trendRes && trendRes.code === 200 && trendRes.data) {
          this.monthlyTrend = trendRes.data || []
          console.log('处理后的业绩趋势:', this.monthlyTrend)
          // 数据获取成功后立即渲染图表
          this.$nextTick(() => {
            this.renderTrendChart()
          })
        } else {
          console.error('业绩趋势接口返回异常:', trendRes)
          this.monthlyTrend = []
          if (trendRes && trendRes.msg) {
            this.$message.warning('获取业绩趋势失败: ' + trendRes.msg)
          }
          // 即使数据获取失败，也尝试渲染空图表
          this.$nextTick(() => {
            this.renderTrendChart()
          })
        }

        // 第五步：获取会员分析
        console.log('开始获取会员分析，参数:', requestParams)
        const memberRes = await request({
          url: '/api/Extend/LqReport/get-store-member-analysis',
          method: 'POST',
          data: requestParams
        })

        console.log('会员分析接口响应:', memberRes)

        // 处理会员分析
        if (memberRes && memberRes.code === 200 && memberRes.data) {
          this.member = memberRes.data
          console.log('处理后的会员分析:', this.member)
        } else {
          console.error('会员分析接口返回异常:', memberRes)
          this.member = {}
          if (memberRes && memberRes.msg) {
            this.$message.warning('获取会员分析失败: ' + memberRes.msg)
          }
        }

        // 第六步：获取健康师分析
        console.log('开始获取健康师分析，参数:', requestParams)
        const healthCoachRes = await request({
          url: '/api/Extend/LqReport/get-store-health-coach-analysis',
          method: 'POST',
          data: requestParams
        })

        console.log('健康师分析接口响应:', healthCoachRes)

        // 处理健康师分析
        if (healthCoachRes && healthCoachRes.code === 200 && healthCoachRes.data) {
          this.healthCoachRanking = healthCoachRes.data || []
          console.log('处理后的健康师分析:', this.healthCoachRanking)
        } else {
          console.error('健康师分析接口返回异常:', healthCoachRes)
          this.healthCoachRanking = []
          if (healthCoachRes && healthCoachRes.msg) {
            this.$message.warning('获取健康师分析失败: ' + healthCoachRes.msg)
          }
        }

        // 第七步：获取品项分析
        console.log('开始获取品项分析，参数:', requestParams)
        const itemRes = await request({
          url: '/api/Extend/LqReport/get-store-item-analysis',
          method: 'POST',
          data: requestParams
        })

        console.log('品项分析接口响应:', itemRes)

        // 处理品项分析
        if (itemRes && itemRes.code === 200 && itemRes.data) {
          this.item = {
            TopConsumeItems: itemRes.data.TopConsumeItems || [],
            TopBillingItems: itemRes.data.TopBillingItems || [],
            CategoryRatios: itemRes.data.CategoryRatios || []
          }
          console.log('处理后的品项分析:', this.item)
          // 渲染分类占比图表
          this.$nextTick(() => {
            this.renderCategoryChart()
          })
        } else {
          console.error('品项分析接口返回异常:', itemRes)
          this.item = { TopConsumeItems: [], TopBillingItems: [], CategoryRatios: [] }
          if (itemRes && itemRes.msg) {
            this.$message.warning('获取品项分析失败: ' + itemRes.msg)
          }
        }

        // 第八步：获取每日运营数据
        console.log('开始获取每日运营数据，参数:', requestParams)
        const dailyRes = await request({
          url: '/api/Extend/LqReport/get-store-daily-operation-data',
          method: 'POST',
          data: requestParams
        })

        console.log('每日运营数据接口响应:', dailyRes)

        // 处理每日运营数据
        if (dailyRes && dailyRes.code === 200 && dailyRes.data) {
          this.dailyData = dailyRes.data || []
          console.log('处理后的每日运营数据:', this.dailyData)
          // 渲染每日运营数据图表
          this.$nextTick(() => {
            this.renderDailyChart()
          })
        } else {
          console.error('每日运营数据接口返回异常:', dailyRes)
          this.dailyData = []
          if (dailyRes && dailyRes.msg) {
            this.$message.warning('获取每日运营数据失败: ' + dailyRes.msg)
          }
        }

        // 趋势图已在获取数据后立即渲染，这里不需要再次渲染
      } catch (error) {
        console.error('获取门店数据结构分析失败:', error)
        this.$message.error('获取门店数据结构分析失败: ' + (error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    getStartTime() {
      const month = this.statisticsMonth || this.getCurrentMonth()
      const year = parseInt(month.substring(0, 4))
      const monthNum = parseInt(month.substring(4, 2))
      return `${year}-${String(monthNum).padStart(2, '0')}-01 00:00:00`
    },
    getEndTime() {
      const month = this.statisticsMonth || this.getCurrentMonth()
      const year = parseInt(month.substring(0, 4))
      const monthNum = parseInt(month.substring(4, 2))
      const lastDay = new Date(year, monthNum, 0).getDate()
      const now = new Date()
      // 如果是当前月份，使用当前时间，否则使用月末
      if (month === this.getCurrentMonth()) {
        return `${year}-${String(monthNum).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
      } else {
        return `${year}-${String(monthNum).padStart(2, '0')}-${String(lastDay).padStart(2, '0')} 23:59:59`
      }
    },
    getCurrentMonth() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      return `${year}${month}`
    },
    renderTrendChart() {
      if (!this.$refs.trendChart) {
        return
      }

      if (!this.trendChart) {
        this.trendChart = echarts.init(this.$refs.trendChart)
      }

      // 如果没有数据，不渲染图表
      if (!this.monthlyTrend || this.monthlyTrend.length === 0) {
        return
      }

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
          formatter: function (params) {
            let result = params[0].name + '<br/>'
            params.forEach(function (item) {
              result += item.seriesName + ': ￥' + item.value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '<br/>'
            })
            return result
          }
        },
        legend: {
          data: ['开单业绩', '消耗业绩', '净业绩']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.monthlyTrend.map(t => {
            // 将 YYYYMM 格式转换为 YYYY-MM 格式显示
            if (t.Month && t.Month.length === 6) {
              return `${t.Month.substring(0, 4)}-${t.Month.substring(4, 6)}`
            }
            return t.Month || ''
          })
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '￥{value}'
          }
        },
        series: [
          {
            name: '开单业绩',
            type: 'line',
            data: this.monthlyTrend.map(t => t.BillingPerformance)
          },
          {
            name: '消耗业绩',
            type: 'line',
            data: this.monthlyTrend.map(t => t.ConsumePerformance)
          },
          {
            name: '净业绩',
            type: 'line',
            data: this.monthlyTrend.map(t => t.NetPerformance)
          }
        ]
      }

      this.trendChart.setOption(option)
      // 确保图表自适应大小
      if (this.trendChart) {
        setTimeout(() => {
          this.trendChart.resize()
        }, 100)
      }
    },
    renderCategoryChart() {
      const dom = this.$refs.categoryChart
      if (!dom) {
        console.warn('categoryChart ref not found')
        return
      }

      // 先销毁旧图表
      if (this.categoryChart) {
        this.categoryChart.dispose()
        this.categoryChart = null
      }

      // 如果没有数据，显示空状态
      if (!this.item || !this.item.CategoryRatios || this.item.CategoryRatios.length === 0) {
        const chart = echarts.init(dom)
        chart.setOption({
          title: {
            text: '暂无数据',
            left: 'center',
            top: 'middle',
            textStyle: { color: '#909399', fontSize: 14 }
          }
        })
        this.categoryChart = chart
        return
      }

      // 确保容器有尺寸
      if (dom.offsetWidth === 0 || dom.offsetHeight === 0) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.renderCategoryChart()
          }, 100)
        })
        return
      }

      // 初始化图表
      const chart = echarts.init(dom)
      if (!chart) {
        console.error('Failed to initialize categoryChart')
        return
      }

      // 浅色系颜色配置
      const lightColors = [
        '#A8D5E2', // 浅蓝色
        '#B8E6B8', // 浅绿色
        '#FFD4A3', // 浅橙色
        '#E6C1E6', // 浅紫色
        '#FFB6C1', // 浅粉色
        '#D4E6F1', // 浅天蓝色
        '#F0E68C', // 浅黄色
        '#DDA0DD', // 浅紫红色
        '#B0E0E6', // 浅青色
        '#F5DEB3'  // 浅米色
      ]

      // 准备数据，添加颜色
      const chartData = this.item.CategoryRatios.map((cat, index) => ({
        value: Number(cat.ConsumeAmount) || 0,
        name: cat.CategoryName || '未分类',
        itemStyle: {
          color: lightColors[index % lightColors.length]
        }
      }))

      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          borderColor: '#E4E7ED',
          borderWidth: 1,
          textStyle: {
            color: '#303133'
          },
          formatter: function (params) {
            return '<div style="padding: 4px 0;">' +
              '<div style="font-weight: 600; margin-bottom: 4px;">' + params.name + '</div>' +
              '<div style="color: #606266;">消耗金额: <span style="color: #409EFF; font-weight: 600;">￥' + 
              params.value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + 
              '</span></div>' +
              '<div style="color: #606266;">占比: <span style="color: #67C23A; font-weight: 600;">' + 
              params.percent.toFixed(2) + '%</span></div>' +
              '</div>'
          }
        },
        legend: {
          show: false
        },
        series: [
          {
            name: '品项分类',
            type: 'pie',
            radius: ['35%', '70%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            minAngle: 5,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 3
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function (params) {
                const percent = params.percent || 0
                if (percent < 5) {
                  return ''
                }
                return params.name + '\n' + percent.toFixed(1) + '%'
              },
              fontSize: 13,
              color: '#606266',
              fontWeight: 500,
              distanceToLabelLine: 12
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 15,
              lineStyle: {
                color: '#DCDFE6',
                width: 1,
                type: 'solid'
              },
              smooth: 0.2
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold',
                color: '#303133'
              },
              itemStyle: {
                shadowBlur: 15,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                borderWidth: 4
              },
              scale: true,
              scaleSize: 8
            },
            data: chartData
          }
        ]
      }

      chart.setOption(option)
      this.categoryChart = chart

      // 延迟调整图表大小，确保DOM已渲染
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.categoryChart) {
            this.categoryChart.resize()
          }
        }, 300)
      })

      // 窗口大小改变时重新调整图表大小
      if (this._categoryChartResizeHandler) {
        window.removeEventListener('resize', this._categoryChartResizeHandler)
      }
      const resizeHandler = () => {
        if (this.categoryChart) {
          this.categoryChart.resize()
        }
      }
      window.addEventListener('resize', resizeHandler)
      this._categoryChartResizeHandler = resizeHandler
    },
    renderDailyChart() {
      const dom = this.$refs.dailyChart
      if (!dom) {
        console.warn('dailyChart ref not found')
        return
      }

      // 先销毁旧图表
      if (this.dailyChart) {
        this.dailyChart.dispose()
        this.dailyChart = null
      }

      // 确保容器有正确的宽度
      if (dom) {
        dom.style.width = '100%'
        dom.style.minWidth = '0'
        dom.style.display = 'block'
        dom.style.boxSizing = 'border-box'
      }

      // 确保父容器也有正确的宽度
      const wrapper = dom.parentElement
      if (wrapper) {
        wrapper.style.width = '100%'
        wrapper.style.minWidth = '0'
        wrapper.style.boxSizing = 'border-box'
      }

      // 如果没有数据，显示空状态
      if (!this.dailyData || this.dailyData.length === 0) {
        const chart = echarts.init(dom)
        chart.setOption({
          title: {
            text: '暂无数据',
            left: 'center',
            top: 'middle',
            textStyle: { color: '#909399', fontSize: 14 }
          }
        })
        this.dailyChart = chart
        return
      }

      // 确保容器有尺寸
      if (dom.offsetWidth === 0 || dom.offsetHeight === 0) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.renderDailyChart()
          }, 100)
        })
        return
      }

      // 初始化图表
      const chart = echarts.init(dom)
      if (!chart) {
        console.error('Failed to initialize dailyChart')
        return
      }

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'cross' },
          formatter: function (params) {
            let result = params[0].name + '<br/>'
            params.forEach(function (item) {
              if (item.seriesName === '开单业绩' || item.seriesName === '消耗业绩') {
                result += item.seriesName + ': ￥' + item.value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '<br/>'
              } else {
                result += item.seriesName + ': ' + item.value + '<br/>'
              }
            })
            return result
          }
        },
        legend: {
          data: ['开单业绩', '消耗业绩', '人头数', '人次', '项目数'],
          top: 10,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 20,
          textStyle: {
            fontSize: 12
          }
        },
        grid: {
          left: '60px',
          right: '80px',
          top: '50px',
          bottom: '60px',
          containLabel: false
        },
        xAxis: {
          type: 'category',
          data: this.dailyData.map(d => this.formatDate(d.Date)),
          axisLabel: {
            rotate: 45,
            interval: 0,
            fontSize: 11,
            color: '#666666'
          },
          axisLine: {
            lineStyle: {
              color: '#E4E7ED'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '业绩',
            position: 'left',
            axisLabel: {
              formatter: function (value) {
                if (value >= 10000) {
                  return '￥' + (value / 10000).toFixed(1) + '万'
                }
                return '￥' + value
              },
              fontSize: 11
            },
            nameTextStyle: {
              fontSize: 12
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E4E7ED'
              }
            }
          },
          {
            type: 'value',
            name: '数量',
            position: 'right',
            axisLabel: {
              formatter: '{value}',
              fontSize: 11
            },
            nameTextStyle: {
              fontSize: 12
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '开单业绩',
            type: 'bar',
            yAxisIndex: 0,
            data: this.dailyData.map(d => d.BillingPerformance),
            itemStyle: {
              color: '#409EFF'
            },
            barWidth: '30%'
          },
          {
            name: '消耗业绩',
            type: 'bar',
            yAxisIndex: 0,
            data: this.dailyData.map(d => d.ConsumePerformance),
            itemStyle: {
              color: '#67C23A'
            },
            barWidth: '30%'
          },
          {
            name: '人头数',
            type: 'line',
            yAxisIndex: 1,
            data: this.dailyData.map(d => d.HeadCount),
            itemStyle: {
              color: '#F56C6C'
            },
            lineStyle: {
              width: 2
            },
            symbol: 'circle',
            symbolSize: 6
          },
          {
            name: '人次',
            type: 'line',
            yAxisIndex: 1,
            data: this.dailyData.map(d => d.PersonCount),
            itemStyle: {
              color: '#E6A23C'
            },
            lineStyle: {
              width: 2
            },
            symbol: 'circle',
            symbolSize: 6
          },
          {
            name: '项目数',
            type: 'line',
            yAxisIndex: 1,
            data: this.dailyData.map(d => d.ProjectCount),
            itemStyle: {
              color: '#909399'
            },
            lineStyle: {
              width: 2
            },
            symbol: 'circle',
            symbolSize: 6
          }
        ]
      }

      chart.setOption(option)
      this.dailyChart = chart

      // 延迟调整图表大小，确保DOM已渲染
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.dailyChart) {
            this.dailyChart.resize()
          }
        }, 300)
      })

      // 窗口大小改变时重新调整图表大小
      if (this._dailyChartResizeHandler) {
        window.removeEventListener('resize', this._dailyChartResizeHandler)
      }
      const resizeHandler = () => {
        if (this.dailyChart) {
          this.dailyChart.resize()
        }
      }
      window.addEventListener('resize', resizeHandler)
      this._dailyChartResizeHandler = resizeHandler
    },
    formatMoney(value) {
      if (value === null || value === undefined) return '0.00'
      return Number(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    },
    formatDate(value) {
      if (!value) return '—'
      // 处理时间戳或日期字符串
      let date
      if (typeof value === 'number') {
        // 如果是时间戳（毫秒）
        date = new Date(value)
      } else if (typeof value === 'string') {
        // 如果是日期字符串
        date = new Date(value)
      } else {
        date = value
      }
      if (isNaN(date.getTime())) return '—'
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    handleClosed() {
      if (this.trendChart) {
        this.trendChart.dispose()
        this.trendChart = null
      }
      if (this.categoryChart) {
        this.categoryChart.dispose()
        this.categoryChart = null
      }
      if (this.dailyChart) {
        this.dailyChart.dispose()
        this.dailyChart = null
      }

      // 移除resize事件监听
      if (this._categoryChartResizeHandler) {
        window.removeEventListener('resize', this._categoryChartResizeHandler)
        this._categoryChartResizeHandler = null
      }
      if (this._dailyChartResizeHandler) {
        window.removeEventListener('resize', this._dailyChartResizeHandler)
        this._dailyChartResizeHandler = null
      }
      // 重置数据
      this.baseInfo = {}
      this.performance = {}
      this.operation = {}
      this.member = {}
      this.healthCoachRanking = []
      this.item = { TopConsumeItems: [], TopBillingItems: [], CategoryRatios: [] }
      this.dailyData = []
      this.monthlyTrend = []
      this.activeTab = 'overview'
      // 通知父组件更新状态
      this.$emit('update:visible', false)
    }
  },
  beforeDestroy() {
    this.handleClosed()
  }
}
</script>

<style lang="scss" scoped>
     ::v-deep .el-dialog {
    border-radius: 14px;
  }
.store-data-analysis-dialog {
  .analysis-wrapper {
    padding: 0;
  }

  .analysis-header {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;

    .header-avatar {
      margin-right: 20px;

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

    .header-main {
      flex: 1;

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

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

        .status-tag {
          font-size: 12px;
        }
      }

      .store-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        .meta-item {
          display: flex;
          align-items: center;
          color: #606266;
          font-size: 14px;

          i {
            margin-right: 6px;
            color: #909399;
          }
        }
      }
    }

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

        .stat-card {
          display: flex;
          align-items: center;
          padding: 8px 12px;
          border-radius: 6px;
          background: #f5f7fa;

          .stat-label-tag {
            margin-right: 8px;
          }

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

          &.stat-primary {
            background: #ecf5ff;
          }

          &.stat-success {
            background: #f0f9ff;
          }

          &.stat-info {
            background: #f4f4f5;
          }

          &.stat-warning {
            background: #fdf6ec;
          }
        }
      }
    }
  }

  .analysis-tabs {
    .tab-content {
      padding: 0;
      width: 100%;
      box-sizing: border-box;
      height: 50vh;
      overflow-y: scroll;
    }

    .content-card {
      background: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;

      .card-header {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #ebeef5;
        background: #fafafa;
        width: 100%;
        box-sizing: border-box;

        i {
          margin-right: 8px;
          color: #409eff;
          font-size: 18px;
        }

        .card-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }

      .card-body {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
      }
    }

    .performance-grid,
    .operation-grid,
    .member-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;

      .performance-item,
      .operation-item,
      .member-item {
        display: flex;
        align-items: center;
        padding: 16px;
        background: #f5f7fa;
        border-radius: 8px;

        .performance-icon,
        .operation-icon,
        .member-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: #409eff;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          margin-right: 12px;
        }

        .performance-content,
        .operation-content,
        .member-content {
          flex: 1;

          .performance-label,
          .operation-label,
          .member-label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 4px;
          }

          .performance-value,
          .operation-value,
          .member-value {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
          }

          .member-rate {
            font-size: 12px;
            color: #909399;
            margin-top: 4px;
          }
        }
      }
    }

    .trend-chart {
      width: 100% !important;
      height: 500px;
      margin-bottom: 20px;
      min-height: 500px;
      display: block;
      box-sizing: border-box;
    }

    .category-card-body {
      display: flex;
      gap: 30px;
      align-items: flex-start;
      padding: 20px;
    }

    .category-chart-wrapper {
      flex: 1;
      min-width: 0;
    }

    .category-chart {
      width: 100% !important;
      height: 400px;
      min-height: 400px;
      display: block;
      box-sizing: border-box;
      position: relative;
      
      // 确保 ECharts 容器正确渲染
      & > div {
        width: 100% !important;
        height: 100% !important;
      }
    }

    .category-list-wrapper {
      flex: 1;
      min-width: 320px;
      background: #fafafa;
      border-radius: 8px;
      overflow: hidden;
    }

    .category-list-header {
      padding: 16px 20px;
      background: #f5f7fa;
      border-bottom: 1px solid #ebeef5;

      .list-title {
        font-size: 15px;
        font-weight: 600;
        color: #303133;
      }
    }

    // 每日运营数据专用样式
    .daily-tab-content {
      width: 100% !important;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .daily-content-card {
      width: 100% !important;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .daily-card-body {
      width: 100% !important;
      min-width: 0;
      box-sizing: border-box;
      padding: 20px;
      overflow-x: hidden;
    }

    .daily-chart-wrapper {
      width: 100% !important;
      min-width: 0;
      box-sizing: border-box;
      margin-bottom: 20px;
      overflow: hidden;
      
      // 确保内部图表容器不被压缩
      & > div {
        width: 100% !important;
        min-width: 0;
      }
    }

    .daily-chart {
      width: 100% !important;
      min-width: 0 !important;
      height: 400px !important;
      min-height: 400px;
      display: block !important;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      position: relative;
      
      // 确保 ECharts 容器正确渲染
      & > div {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
      }
    }

    .daily-table-wrapper {
      width: 100%;
      box-sizing: border-box;
    }

    .daily-data-table {
      width: 100%;
    }

    .category-list {
      padding: 16px;
      max-height: 400px;
      overflow-y: auto;

      .category-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #ebeef5;
        transition: all 0.3s;

        &:hover {
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
          transform: translateY(-2px);
          border-color: #c0c4cc;
        }

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

        .category-info {
          display: flex;
          align-items: center;
          flex: 1;
          min-width: 0;

          .category-color-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 12px;
            flex-shrink: 0;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
          }

          .category-name {
            font-size: 14px;
            color: #303133;
            font-weight: 500;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .category-data {
          display: flex;
          align-items: center;
          gap: 20px;
          flex-shrink: 0;

          .category-amount {
            text-align: right;
            font-size: 14px;
            color: #606266;
            min-width: 120px;
          }

          .category-ratio {
            text-align: right;
            font-size: 15px;
            color: #409eff;
            font-weight: 600;
            min-width: 70px;
          }
        }
      }

      .category-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        color: #909399;
        font-size: 14px;

        i {
          font-size: 48px;
          margin-bottom: 12px;
          color: #c0c4cc;
        }
      }
    }

    // 响应式布局：小屏幕下图表和列表垂直排列

  }
}
</style>