antissoft / lvqianmeiye_ERP

  <template>
    <div class="annual-summary-dashboard">

      <!-- 顶部状态栏 & 筛选器 -->
      <div class="cockpit-header">
        <div class="header-left">

          <h1 class="page-title">年度经营全景报告</h1>

        </div>
        <div class="header-right">
          <el-form :inline="true" :model="query" class="search-form-compact">
            <el-form-item label="年度">

              <el-date-picker v-model="query.year" type="year" value-format="yyyy" placeholder="选择年度" clearable
                size="mini" @change="handleQueryChange" style="width: 150px" />

            </el-form-item>
            <el-form-item label="门店名称">

              <el-select v-model="query.storeName" placeholder="请选择门店" clearable filterable size="mini"
                @change="handleQueryChange" style="width: 200px">
                <el-option v-for="store in storeOptions" :key="store.id" :label="store.fullName"
                  :value="store.fullName" />

              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" icon="el-icon-search" @click="handleQueryChange">查询</el-button>
              <el-button size="mini" icon="el-icon-refresh-right" @click="handleReset">重置</el-button>
            </el-form-item>

          </el-form>

        </div>
      </div>
  

      <!-- 标签页导航 -->
      <el-tabs v-model="activeMenu" @tab-click="handleTabClick" class="dashboard-tabs">
        <el-tab-pane name="monthly-trend">

          <span slot="label"><i class="el-icon-data-line"></i> 月度经营趋势</span>

        </el-tab-pane>
        <el-tab-pane name="performance-stat">

          <span slot="label"><i class="el-icon-trophy"></i> 年度业绩总览</span>

        </el-tab-pane>
        <el-tab-pane name="consume-stat">

          <span slot="label"><i class="el-icon-shopping-cart-2"></i> 年度消耗总览</span>

        </el-tab-pane>
        <el-tab-pane name="headcount-stat">

          <span slot="label"><i class="el-icon-user"></i> 年度客流量总览</span>

        </el-tab-pane>
        <el-tab-pane name="persontime-stat">

          <span slot="label"><i class="el-icon-user-solid"></i> 年度到店频次总览</span>

        </el-tab-pane>
        <el-tab-pane name="project-stat">

          <span slot="label"><i class="el-icon-goods"></i> 年度项目量总览</span>

        </el-tab-pane>
        <el-tab-pane name="store-indicators">

          <span slot="label"><i class="el-icon-pie-chart"></i> 门店综合指标</span>

        </el-tab-pane>
        <el-tab-pane name="bu-indicators">

          <span slot="label"><i class="el-icon-s-data"></i> 事业部综合指标</span>

        </el-tab-pane>
        <el-tab-pane name="bu-summary">

          <span slot="label"><i class="el-icon-tickets"></i> 事业部经营汇总</span>

        </el-tab-pane>
      </el-tabs>

      <!-- 内容区域 -->
      <div class="dashboard-content">

        <!-- 月度趋势分析 -->
        <div v-show="activeMenu === 'monthly-trend'" class="content-panel">
          <div class="panel-body">
            <el-row :gutter="16">
              <el-col :span="12">
                <el-card shadow="hover" class="dashboard-card chart-card">

                  <div slot="header" class="card-title">

                    <i class="el-icon-trophy"></i>

                    <span>业绩趋势对比</span>

                  </div>

                  <div id="perfTrend" class="chart-box"></div>

                </el-card>

              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="dashboard-card chart-card">
                  <div slot="header" class="card-title">
                    <i class="el-icon-shopping-cart-2"></i>

                    <span>消耗趋势对比</span>

                  </div>
                  <div id="consumeTrend" class="chart-box"></div>
                </el-card>
              </el-col>
            </el-row>
            <el-row :gutter="16" style="margin-top: 16px">
              <el-col :span="8">
                <el-card shadow="hover" class="dashboard-card chart-card">
                  <div slot="header" class="card-title">
                    <i class="el-icon-user"></i>

                    <span>客流量趋势</span>

                  </div>
                  <div id="headCountTrend" class="chart-box"></div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover" class="dashboard-card chart-card">
                  <div slot="header" class="card-title">
                    <i class="el-icon-user-solid"></i>

                    <span>到店频次趋势</span>

                  </div>
                  <div id="personTimeTrend" class="chart-box"></div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card shadow="hover" class="dashboard-card chart-card">
                  <div slot="header" class="card-title">
                    <i class="el-icon-goods"></i>

                    <span>项目量趋势</span>

                  </div>
                  <div id="projectCountTrend" class="chart-box"></div>
                </el-card>
              </el-col>
            </el-row>
            <div class="table-section" style="margin-top: 16px">
              <el-card shadow="hover" class="dashboard-card table-card">
                <div slot="header" class="card-title">
                  <i class="el-icon-s-grid"></i>

                  <span>月度趋势明细</span>

                </div>

                <el-table v-loading="trendTableLoading" :data="trendTableData" border stripe style="width: 100%"
                  max-height="600" @sort-change="(sortInfo) => handleTableSortChange('trend', sortInfo)">

                  <el-table-column v-for="col in trendTableColumns" :key="col.prop" :prop="col.prop" :label="col.label"

                    :width="col.width" :align="col.align || 'center'" :sortable="col.sortable"
                    :sort-method="col.sortMethod" :fixed="col.fixed">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>
          </div>

        </div>

        <!-- 全年门店业绩表 -->
        <div v-show="activeMenu === 'performance-stat'" class="content-panel">
          <div class="panel-body">
            <el-card shadow="hover" class="dashboard-card chart-card">
              <div slot="header" class="card-title">
                <i class="el-icon-data-line"></i>

                <span>业绩趋势图</span>

              </div>
              <div id="performanceChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 16px">
              <el-card shadow="hover" class="dashboard-card table-card">

                <div slot="header" class="card-title">

                  <i class="el-icon-s-grid"></i>

                  <span>业绩明细表</span>

                </div>

                <el-table v-loading="performanceTableLoading" :data="performanceTableData" border stripe
                  style="width: 100%" max-height="600" @sort-change="(sortInfo) => handleTableSortChange('performance', sortInfo)">

                  <el-table-column v-for="col in performanceTableColumns" :key="col.prop" :prop="col.prop"

                    :label="col.label" :width="col.width" :align="col.align || 'center'" :sortable="col.sortable"
                    :sort-method="col.sortMethod" :fixed="col.fixed">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>
          </div>

        </div>

        <!-- 全年门店消耗表 -->
        <div v-show="activeMenu === 'consume-stat'" class="content-panel">
          <div class="panel-body">
            <el-card shadow="hover" class="dashboard-card chart-card">
              <div slot="header" class="card-title">
                <i class="el-icon-data-line"></i>

                <span>消耗趋势图</span>

              </div>
              <div id="consumeChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 16px">
              <el-card shadow="hover" class="dashboard-card table-card">

                <div slot="header" class="card-title">

                  <i class="el-icon-s-grid"></i>

                  <span>消耗明细表</span>

                </div>

                <el-table v-loading="consumeTableLoading" :data="consumeTableData" border stripe style="width: 100%"
                  max-height="600" @sort-change="(sortInfo) => handleTableSortChange('consume', sortInfo)">

                  <el-table-column v-for="col in consumeTableColumns" :key="col.prop" :prop="col.prop" :label="col.label"

                    :width="col.width" :align="col.align || 'center'" :sortable="col.sortable"
                    :sort-method="col.sortMethod" :fixed="col.fixed">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>
          </div>

        </div>

        <!-- 年度门店人头表 -->
        <div v-show="activeMenu === 'headcount-stat'" class="content-panel">
          <div class="panel-body">
            <el-card shadow="hover" class="dashboard-card chart-card">
              <div slot="header" class="card-title">
                <i class="el-icon-data-line"></i>

                <span>客流量趋势图</span>

              </div>
              <div id="headCountChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 16px">
              <el-card shadow="hover" class="dashboard-card table-card">

                <div slot="header" class="card-title">

                  <i class="el-icon-s-grid"></i>

                  <span>客流量明细表</span>

                </div>

                <el-table v-loading="headCountTableLoading" :data="headCountTableData" border stripe style="width: 100%"
                  max-height="600" @sort-change="(sortInfo) => handleTableSortChange('headCount', sortInfo)">

                  <el-table-column v-for="col in headCountTableColumns" :key="col.prop" :prop="col.prop"

                    :label="col.label" :width="col.width" :align="col.align || 'center'" :sortable="col.sortable"
                    :sort-method="col.sortMethod" :fixed="col.fixed">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>
          </div>

        </div>

        <!-- 年度门店人次表 -->
        <div v-show="activeMenu === 'persontime-stat'" class="content-panel">
          <div class="panel-body">
            <el-card shadow="hover" class="dashboard-card chart-card">
              <div slot="header" class="card-title">
                <i class="el-icon-data-line"></i>

                <span>到店频次趋势图</span>

              </div>
              <div id="personTimeChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 16px">
              <el-card shadow="hover" class="dashboard-card table-card">

                <div slot="header" class="card-title">

                  <i class="el-icon-s-grid"></i>

                  <span>到店频次明细表</span>

                </div>

                <el-table v-loading="personTimeTableLoading" :data="personTimeTableData" border stripe
                  style="width: 100%" max-height="600" @sort-change="(sortInfo) => handleTableSortChange('personTime', sortInfo)">

                  <el-table-column v-for="col in personTimeTableColumns" :key="col.prop" :prop="col.prop"

                    :label="col.label" :width="col.width" :align="col.align || 'center'" :sortable="col.sortable"
                    :sort-method="col.sortMethod" :fixed="col.fixed">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>
          </div>

        </div>

        <!-- 年度门店项目数表 -->
        <div v-show="activeMenu === 'project-stat'" class="content-panel">
          <div class="panel-body">
            <el-card shadow="hover" class="dashboard-card chart-card">
              <div slot="header" class="card-title">
                <i class="el-icon-data-line"></i>

                <span>项目量趋势图</span>

              </div>
              <div id="projectCountChart" class="chart-box-large"></div>
            </el-card>
            <div class="table-section" style="margin-top: 16px">
              <el-card shadow="hover" class="dashboard-card table-card">

                <div slot="header" class="card-title">

                  <i class="el-icon-s-grid"></i>

                  <span>项目量明细表</span>

                </div>

                <el-table v-loading="projectCountTableLoading" :data="projectCountTableData" border stripe
                  style="width: 100%" max-height="600" @sort-change="(sortInfo) => handleTableSortChange('projectCount', sortInfo)">

                  <el-table-column v-for="col in projectCountTableColumns" :key="col.prop" :prop="col.prop"

                    :label="col.label" :width="col.width" :align="col.align || 'center'" :sortable="col.sortable"
                    :sort-method="col.sortMethod" :fixed="col.fixed">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>
          </div>

        </div>

        <!-- 门店五项指标统计 -->
        <div v-show="activeMenu === 'store-indicators'" class="content-panel">
          <div class="panel-body">
            <div class="indicator-controls">
              <el-radio-group v-model="indicatorField" size="mini" @change="loadStoreIndicators">
                <el-radio-button label="totalperformance">
                  <i class="el-icon-trophy"></i>
                  总业绩
                </el-radio-button>
                <el-radio-button label="totalconsume">
                  <i class="el-icon-shopping-cart-2"></i>
                  总消耗
                </el-radio-button>
                <el-radio-button label="headcount">
                  <i class="el-icon-user"></i>
                  客头数
                </el-radio-button>
                <el-radio-button label="persontime">
                  <i class="el-icon-user-solid"></i>
                  客次数
                </el-radio-button>
                <el-radio-button label="projectcount">
                  <i class="el-icon-goods"></i>
                  项目数
                </el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="16" style="margin-top: 16px">
              <el-col :span="16">
                <el-card shadow="hover" class="dashboard-card chart-card">

                  <div slot="header" class="card-title">

                    <i class="el-icon-s-data"></i>
                    <span>各门店指标对比</span>

                  </div>

                  <div id="storeIndicatorChart" class="chart-box-large"></div>

                </el-card>

              </el-col>
              <el-col :span="8">
                <el-card shadow="hover" class="dashboard-card chart-card">

                  <div slot="header" class="card-title">

                    <i class="el-icon-pie-chart"></i>
                    <span>门店占比分析</span>

                  </div>

                  <div id="storePieChart" class="chart-box-large"></div>

                </el-card>

              </el-col>
            </el-row>
            <div class="table-section" style="margin-top: 16px">
              <el-card shadow="hover" class="dashboard-card table-card">
                <div slot="header" class="card-title">
                  <i class="el-icon-s-grid"></i>
                  <span>门店指标数据列表</span>
                </div>

                <el-table v-loading="storeIndicatorTableLoading" :data="storeIndicatorTableData" border stripe
                  style="width: 100%" @sort-change="(sortInfo) => handleTableSortChange('storeIndicator', sortInfo)">

                  <el-table-column v-for="col in storeIndicatorTableColumns" :key="col.prop" :prop="col.prop"

                    :label="col.label" :sortable="col.sortable" :sort-method="col.sortMethod">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>
          </div>

        </div>

        <!-- 事业部五项指标统计 -->
        <div v-show="activeMenu === 'bu-indicators'" class="content-panel">
          <div class="panel-body">
            <div class="indicator-controls">
              <el-radio-group v-model="buIndicatorField" size="mini" @change="loadBuIndicators">
                <el-radio-button label="totalperformance">
                  <i class="el-icon-trophy"></i>
                  总业绩
                </el-radio-button>
                <el-radio-button label="totalconsume">
                  <i class="el-icon-shopping-cart-2"></i>
                  总消耗
                </el-radio-button>
                <el-radio-button label="headcount">
                  <i class="el-icon-user"></i>
                  客头数
                </el-radio-button>
                <el-radio-button label="persontime">
                  <i class="el-icon-user-solid"></i>
                  客次数
                </el-radio-button>
                <el-radio-button label="projectcount">
                  <i class="el-icon-goods"></i>
                  项目数
                </el-radio-button>
              </el-radio-group>
            </div>
            <el-row :gutter="16" style="margin-top: 16px">
              <el-col :span="12">
                <el-card shadow="hover" class="dashboard-card chart-card">
                  <div slot="header" class="card-title">
                    <i class="el-icon-pie-chart"></i>
                    <span>事业部贡献占比</span>
                  </div>
                  <div id="buPieChart" class="chart-box"></div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card shadow="hover" class="dashboard-card chart-card">
                  <div slot="header" class="card-title">
                    <i class="el-icon-data-line"></i>
                    <span>事业部增长率分析</span>
                  </div>
                  <div id="buGrowthChart" class="chart-box"></div>
                </el-card>
              </el-col>
            </el-row>
            <div class="table-section" style="margin-top: 16px">

              <el-card shadow="hover" class="dashboard-card table-card">
                <div slot="header" class="card-title">

                  <i class="el-icon-s-grid"></i>

                  <span>事业部指标数据列表</span>

                </div>

                <el-table v-loading="buIndicatorTableLoading" :data="buIndicatorTableData" border stripe
                  style="width: 100%" @sort-change="(sortInfo) => handleTableSortChange('buIndicator', sortInfo)">

                  <el-table-column v-for="col in buIndicatorTableColumns" :key="col.prop" :prop="col.prop"

                    :label="col.label" :sortable="col.sortable" :sort-method="col.sortMethod">

                    <template slot-scope="scope">
                      <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                      <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                    </template>
                  </el-table-column>

                </el-table>

              </el-card>

            </div>

          </div>

        </div>
  
        <!-- 事业部内部汇总 -->
        <div v-show="activeMenu === 'bu-summary'" class="content-panel">
          <div class="panel-body">
            <el-card shadow="hover" class="dashboard-card table-card bu-summary-card">
              <div slot="header" class="card-title">
                <i class="el-icon-s-grid"></i>
                <span>事业部汇总数据列表</span>
              </div>

              <el-table v-loading="buSummaryTableLoading" :data="buSummaryTableData" border stripe style="width: 100%"
                :height="null" class="bu-summary-table" @sort-change="(sortInfo) => handleTableSortChange('buSummary', sortInfo)">

                <el-table-column v-for="col in buSummaryTableColumns" :key="col.prop" :prop="col.prop" :label="col.label"

                  :width="col.width" :align="col.align || 'center'" :sortable="col.sortable"
                  :sort-method="col.sortMethod">

                  <template slot-scope="scope">
                    <span v-if="col.formatter" v-html="col.formatter(scope.row)"></span>
                    <span v-else>{{ scope.row[col.prop] || '0' }}</span>
                  </template>
                </el-table-column>

              </el-table>

            </el-card>
          </div>
        </div>

      </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import {
    getMonthlyTrend,
    getTotalPerformanceStat,
    getTotalConsumeStat,
    getHeadCountStat,
    getPersonTimeStat,
    getProjectCountStat,
    getStoreIndicatorDetail,
    getBusinessUnitIndicatorsStat,
    getBusinessUnitSummaryStat
  } from '@/api/extend/annualSummary'
  import { getStoreSelector } from '@/api/extend/store'
  
  export default {
    name: 'annualSummaryDashboard',
    data() {
      return {
        activeMenu: 'monthly-trend',
        query: {
          year: new Date().getFullYear().toString(),
          storeName: ''
        },
        indicatorField: 'totalperformance',
        buIndicatorField: 'totalperformance',
        trendField: 'totalperformance', // 月度趋势列表显示的类型
        // 月度趋势
        trendTableLoading: false,
        trendTableData: [],
        trendTableColumns: [],
        // 业绩
        performanceTableLoading: false,
        performanceTableData: [],
        performanceTableColumns: [],
        // 消耗
        consumeTableLoading: false,
        consumeTableData: [],
        consumeTableColumns: [],
        // 人头
        headCountTableLoading: false,
        headCountTableData: [],
        headCountTableColumns: [],
        // 人次
        personTimeTableLoading: false,
        personTimeTableData: [],
        personTimeTableColumns: [],
        // 项目
        projectCountTableLoading: false,
        projectCountTableData: [],
        projectCountTableColumns: [],
        // 门店指标
        storeIndicatorTableLoading: false,
        storeIndicatorTableData: [],
        storeIndicatorTableColumns: [],
        // 事业部指标
        buIndicatorTableLoading: false,
        buIndicatorTableData: [],
        buIndicatorTableColumns: [],
        // 事业部汇总
        buSummaryTableLoading: false,
        buSummaryTableData: [],
        buSummaryTableColumns: [],
        // 门店下拉选项
        storeOptions: []
      }
    },
    mounted() {
      this.loadStoreOptions()
      this.initData()
      window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
      // 销毁所有图表实例
      this.destroyAllCharts()
    },
    methods: {
      // 加载门店下拉选项
      async loadStoreOptions() {
        try {
          const res = await getStoreSelector()
          if (res.data && res.data.list) {
            this.storeOptions = res.data.list
          }
        } catch (error) {
          console.error('加载门店列表失败:', error)
          this.storeOptions = []
        }
      },
      initData() {
        this.loadCurrentMenuData()
      },
      handleQueryChange() {
        this.loadCurrentMenuData()
      },
      handleReset() {
        this.query = {
          year: new Date().getFullYear().toString(),
          storeName: ''
        }
        this.loadCurrentMenuData()
      },

      handleTabClick(tab) {
        this.activeMenu = tab.name

        this.$nextTick(() => {
          this.loadCurrentMenuData()
        })
      },
      loadCurrentMenuData() {
        switch (this.activeMenu) {
          case 'monthly-trend':
            this.loadMonthlyTrend()
            break
          case 'performance-stat':
            this.loadPerformanceStat()
            break
          case 'consume-stat':
            this.loadConsumeStat()
            break
          case 'headcount-stat':
            this.loadHeadCountStat()
            break
          case 'persontime-stat':
            this.loadPersonTimeStat()
            break
          case 'project-stat':
            this.loadProjectCountStat()
            break
          case 'store-indicators':
            this.loadStoreIndicators()
            break
          case 'bu-indicators':
            this.loadBuIndicators()
            break
          case 'bu-summary':
            this.loadBuSummary()
            break
        }
      },
      // 月度趋势分析
      async loadMonthlyTrend() {
        const fields = [
          { field: 'totalperformance', chartId: 'perfTrend', name: '业绩' },
          { field: 'totalconsume', chartId: 'consumeTrend', name: '消耗' },
          { field: 'headcount', chartId: 'headCountTrend', name: '客头数' },
          { field: 'persontime', chartId: 'personTimeTrend', name: '客次数' },
          { field: 'projectcount', chartId: 'projectCountTrend', name: '项目数' }
        ]
  
        // 加载每个图表的数据 - 确保每个图表都使用正确的 type 参数
        for (const item of fields) {
          try {
            // 明确传递 type 参数，确保后端能正确接收
            const params = {
              year: this.query.year || new Date().getFullYear().toString(),
              storeName: this.query.storeName || '',
              type: item.field // type 作为单独的查询参数传递
            }

            const res = await getMonthlyTrend(params)
            if (res && res.data) {
              // 立即渲染，避免数据被覆盖
              this.renderTrendChart(item.chartId, res.data, item.name)
            }
          } catch (error) {
            console.error(`加载${item.name}趋势失败:`, error)
          }
        }
  
        // 加载列表数据（使用当前选中的趋势类型对应的数据）
        try {

          const res = await getMonthlyTrend({
            year: this.query.year,
            storeName: this.query.storeName,
            type: this.trendField || 'totalperformance'

          })
          if (res && res.data && res.data.rows) {
            this.trendTableData = res.data.rows
            this.buildTrendTableColumns(res.data)
          }
        } catch (error) {
          console.error('加载趋势列表失败:', error)
        }
      },
      // 全年门店业绩表
      async loadPerformanceStat() {
        this.performanceTableLoading = true
        try {
          const res = await getTotalPerformanceStat(this.query)
          if (res.data) {
            this.renderMonthlyStatChart('performanceChart', res.data, '业绩')
            this.performanceTableData = res.data.rows || []
            this.buildMonthlyStatTableColumns(res.data, '业绩')
          }
        } catch (error) {
          console.error('加载业绩统计失败:', error)
        } finally {
          this.performanceTableLoading = false
        }
      },
      // 全年门店消耗表
      async loadConsumeStat() {
        this.consumeTableLoading = true
        try {
          const res = await getTotalConsumeStat(this.query)
          if (res.data) {
            this.renderMonthlyStatChart('consumeChart', res.data, '消耗')
            this.consumeTableData = res.data.rows || []
            this.buildMonthlyStatTableColumns(res.data, '消耗')
          }
        } catch (error) {
          console.error('加载消耗统计失败:', error)
        } finally {
          this.consumeTableLoading = false
        }
      },
      // 年度门店人头表
      async loadHeadCountStat() {
        this.headCountTableLoading = true
        try {
          const res = await getHeadCountStat(this.query)
          if (res.data) {
            this.renderMonthlyStatChart('headCountChart', res.data, '人头数')
            this.headCountTableData = res.data.rows || []
            this.buildMonthlyStatTableColumns(res.data, '人头数')
          }
        } catch (error) {
          console.error('加载人头统计失败:', error)
        } finally {
          this.headCountTableLoading = false
        }
      },
      // 年度门店人次表
      async loadPersonTimeStat() {
        this.personTimeTableLoading = true
        try {
          const res = await getPersonTimeStat(this.query)
          if (res.data) {
            this.renderMonthlyStatChart('personTimeChart', res.data, '人次')
            this.personTimeTableData = res.data.rows || []
            this.buildMonthlyStatTableColumns(res.data, '人次')
          }
        } catch (error) {
          console.error('加载人次统计失败:', error)
        } finally {
          this.personTimeTableLoading = false
        }
      },
      // 年度门店项目数表
      async loadProjectCountStat() {
        this.projectCountTableLoading = true
        try {
          const res = await getProjectCountStat(this.query)
          if (res.data) {
            this.renderMonthlyStatChart('projectCountChart', res.data, '项目数')
            this.projectCountTableData = res.data.rows || []
            this.buildMonthlyStatTableColumns(res.data, '项目数')
          }
        } catch (error) {
          console.error('加载项目统计失败:', error)
        } finally {
          this.projectCountTableLoading = false
        }
      },
      // 门店五项指标统计
      async loadStoreIndicators() {
        this.storeIndicatorTableLoading = true
        try {
          const res = await getStoreIndicatorDetail({
            ...this.query,
            type: this.indicatorField
          })
          if (res.data && res.data.rows) {
            this.renderStoreIndicatorChart(res.data)
            this.storeIndicatorTableData = res.data.rows
            this.buildStoreIndicatorTableColumns()
          }
        } catch (error) {
          console.error('加载门店指标失败:', error)
        } finally {
          this.storeIndicatorTableLoading = false
        }
      },
      // 事业部五项指标统计
      async loadBuIndicators() {
        this.buIndicatorTableLoading = true
        try {
          const res = await getBusinessUnitIndicatorsStat({
            ...this.query,
            type: this.buIndicatorField
          })
          if (res.data && res.data.rows) {
            this.renderBuIndicatorCharts(res.data)
            this.buIndicatorTableData = res.data.rows
            this.buildBuIndicatorTableColumns()
          }
        } catch (error) {
          console.error('加载事业部指标失败:', error)
        } finally {
          this.buIndicatorTableLoading = false
        }
      },
      // 事业部内部汇总
      async loadBuSummary() {
        this.buSummaryTableLoading = true
        try {

          const res = await getBusinessUnitSummaryStat(this.query)

          if (res.data && res.data.list) {
            this.buSummaryTableData = res.data.list
            this.buildBuSummaryTableColumns()
          }
        } catch (error) {
          console.error('加载事业部汇总失败:', error)
        } finally {
          this.buSummaryTableLoading = false
        }
      },

      // 获取图表颜色配置
      getChartColors(name) {
        const colorMap = {
          '业绩': {
            current: '#409EFF', // 蓝色
            currentArea: 'rgba(64, 158, 255, 0.15)',
            last: '#909399' // 灰色
          },
          '消耗': {
            current: '#67C23A', // 绿色
            currentArea: 'rgba(103, 194, 58, 0.15)',
            last: '#909399'
          },
          '客头数': {
            current: '#E6A23C', // 橙色
            currentArea: 'rgba(230, 162, 60, 0.15)',
            last: '#909399'
          },
          '客次数': {
            current: '#F56C6C', // 红色
            currentArea: 'rgba(245, 108, 108, 0.15)',
            last: '#909399'
          },
          '项目数': {
            current: '#9C27B0', // 紫色
            currentArea: 'rgba(156, 39, 176, 0.15)',
            last: '#909399'
          }
        }
        return colorMap[name] || {
          current: '#409EFF',
          currentArea: 'rgba(64, 158, 255, 0.15)',
          last: '#909399'
        }
      },

      // 渲染趋势图
      renderTrendChart(chartId, data, name) {
        this.$nextTick(() => {
          const chartDom = document.getElementById(chartId)
          if (!chartDom) return
  
          // 先销毁旧的图表实例，确保使用新数据
          const oldChart = echarts.getInstanceByDom(chartDom)
          if (oldChart) {
            oldChart.dispose()
          }

          const chart = echarts.init(chartDom)

          const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  

          // 确保使用传入的 data，而不是共享的数据
          const rows = data && data.rows ? data.rows : []

          const currentYearValues = months.map((m) => {
            return rows.reduce((sum, row) => {
              const value = row['month' + m] || 0
              return sum + (typeof value === 'number' ? value : 0)
            }, 0)
          })
  
          const lastYearValues = months.map((m) => {
            return rows.reduce((sum, row) => {
              const value = row['lastMonth' + m] || 0
              return sum + (typeof value === 'number' ? value : 0)
            }, 0)

          })

          // 获取颜色配置
          const colors = this.getChartColors(name)
  
          const option = {
            tooltip: {
              trigger: 'axis',

              formatter: function (params) {

                let res = params[0].name + '<br/>'

                params.forEach((item) => {

                  res += item.marker + item.seriesName + ': ' + item.value.toLocaleString() + '<br/>'
                })
                return res
              }
            },

            legend: {
              data: ['本年走势', '上年走势'],
              top: 10
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top: '15%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: months.map((m) => m + '月')
            },
            yAxis: {
              type: 'value'
            },

            series: [

              {
                name: '本年走势',
                type: 'line',
                smooth: true,
                data: currentYearValues,

                itemStyle: { color: colors.current },
                lineStyle: { color: colors.current, width: 2 },
                areaStyle: { color: colors.currentArea }

              },
              {
                name: '上年走势',
                type: 'line',
                smooth: true,
                data: lastYearValues,

                itemStyle: { color: colors.last },
                lineStyle: { type: 'dashed', color: colors.last, width: 2 }

              }

            ]
          }
          chart.setOption(option)

        })
      },
      // 渲染月度统计图表
      renderMonthlyStatChart(chartId, data, name) {
        this.$nextTick(() => {
          const chartDom = document.getElementById(chartId)
          if (!chartDom) return
  
          const chart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom)
          const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  
          const currentYearValues = months.map((m) => {
            return (data.rows || []).reduce((sum, row) => sum + (row['month' + m] || 0), 0)
          })
  
          const lastYearValues = months.map((m) => {
            return (data.rows || []).reduce((sum, row) => sum + (row['lastMonth' + m] || 0), 0)
          })
  

          // 获取颜色配置
          const colors = this.getChartColors(name)

          const option = {

            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                let res = params[0].name + '<br/>'
                params.forEach((item) => {
                  res += item.marker + item.seriesName + ': ' + item.value.toLocaleString() + '<br/>'
                })
                return res
              }
            },
            legend: {
              data: ['本年走势', '上年走势'],
              top: 10
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top: '15%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: months.map((m) => m + '月')
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '本年走势',
                type: 'line',
                smooth: true,
                data: currentYearValues,

                itemStyle: { color: colors.current },
                lineStyle: { color: colors.current, width: 2 },
                areaStyle: { color: colors.currentArea }

              },
              {
                name: '上年走势',
                type: 'line',
                smooth: true,
                data: lastYearValues,

                itemStyle: { color: colors.last },
                lineStyle: { type: 'dashed', color: colors.last, width: 2 }

              }
            ]
          }
          chart.setOption(option)
        })
      },

      // 根据指标字段获取颜色名称
      getIndicatorColorName(field) {
        const fieldMap = {
          'totalperformance': '业绩',
          'totalconsume': '消耗',
          'headcount': '客头数',
          'persontime': '客次数',
          'projectcount': '项目数'
        }
        return fieldMap[field] || '业绩'
      },

      // 渲染门店指标图表
      renderStoreIndicatorChart(data) {
        this.$nextTick(() => {

          // 根据当前选择的指标类型获取颜色
          const colorName = this.getIndicatorColorName(this.indicatorField)
          const colors = this.getChartColors(colorName)
  

          // 柱状图
          const barChartDom = document.getElementById('storeIndicatorChart')
          if (barChartDom) {
            const barChart = echarts.getInstanceByDom(barChartDom) || echarts.init(barChartDom)
            const sortedResult = [...(data.rows || [])]
              .sort((a, b) => b.currentYearValue - a.currentYearValue)
  
            const barOption = {
              tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                  return params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value.toLocaleString()
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top: '10%',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                data: sortedResult.map((o) => o.storeName),
                axisLabel: {
                  interval: 0,
                  rotate: 30
                }
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {

                  name: '本年数值',
                  type: 'bar',

                  data: sortedResult.map((o) => o.currentYearValue),

                  itemStyle: {
                    color: colors.current,
                    borderRadius: [4, 4, 0, 0]

                  }
                }
              ]
            }
            barChart.setOption(barOption)
          }
  
          // 饼图
          const pieChartDom = document.getElementById('storePieChart')
          if (pieChartDom) {
            const pieChart = echarts.getInstanceByDom(pieChartDom) || echarts.init(pieChartDom)
            const allStores = [...(data.rows || [])]
              .sort((a, b) => b.currentYearValue - a.currentYearValue)
  

            // 柔和但清晰的颜色配置（提高饱和度，保持柔和感）
            const lightColors = [
              '#6BB6FF', // 明亮蓝色
              '#81C784', // 明亮绿色
              '#FFB74D', // 明亮橙色
              '#F48FB1', // 明亮粉色
              '#BA68C8', // 明亮紫色
              '#4DD0E1', // 明亮青色
              '#FF8A65', // 明亮橙红色
              '#7986CB', // 明亮蓝紫色
              '#AED581', // 明亮黄绿色
              '#FFD54F', // 明亮黄色
              '#A1887F', // 明亮棕色
              '#90A4AE'  // 明亮灰蓝色
            ]
  

            const pieOption = {
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              legend: {
                show: false // 隐藏图例
              },
              series: [
                {
                  name: '门店占比',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  center: ['60%', '50%'],
                  avoidLabelOverlap: false,

                  color: lightColors,
                  data: allStores.map((o, index) => ({

                    name: o.storeName,

                    value: o.currentYearValue,
                    itemStyle: {
                      color: lightColors[index % lightColors.length]
                    }

                  })),
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,

                      shadowColor: 'rgba(0, 0, 0, 0.3)'

                    }
                  }
                }
              ]
            }
            pieChart.setOption(pieOption)
          }
        })
      },
      // 渲染事业部指标图表
      renderBuIndicatorCharts(data) {
        this.$nextTick(() => {

          // 根据当前选择的指标类型获取颜色
          const colorName = this.getIndicatorColorName(this.buIndicatorField)
          const colors = this.getChartColors(colorName)
  
          // 柔和但清晰的颜色配置（与门店占比分析一致）
          const lightColors = [
            '#6BB6FF', // 明亮蓝色
            '#81C784', // 明亮绿色
            '#FFB74D', // 明亮橙色
            '#F48FB1', // 明亮粉色
            '#BA68C8', // 明亮紫色
            '#4DD0E1', // 明亮青色
            '#FF8A65', // 明亮橙红色
            '#7986CB', // 明亮蓝紫色
            '#AED581', // 明亮黄绿色
            '#FFD54F', // 明亮黄色
            '#A1887F', // 明亮棕色
            '#90A4AE'  // 明亮灰蓝色
          ]
  

          // 饼图
          const pieChartDom = document.getElementById('buPieChart')
          if (pieChartDom) {
            const pieChart = echarts.getInstanceByDom(pieChartDom) || echarts.init(pieChartDom)
            const pieOption = {
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                top: 'middle',
                data: (data.rows || []).map((o) => o.businessUnitName)
              },
              series: [
                {
                  name: '事业部占比',

                  type: 'pie',
                  radius: '55%',

                  center: ['60%', '50%'],

                  color: lightColors,
                  data: (data.rows || []).map((o, index) => ({

                    name: o.businessUnitName,

                    value: o.currentYearValue,
                    itemStyle: {
                      color: lightColors[index % lightColors.length]
                    }

                  })),

                  emphasis: {

                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,

                      shadowColor: 'rgba(0, 0, 0, 0.3)'

                    }
                  }
                }
              ]
            }
            pieChart.setOption(pieOption)
          }
  
          // 增长率图
          const growthChartDom = document.getElementById('buGrowthChart')
          if (growthChartDom) {
            const growthChart = echarts.getInstanceByDom(growthChartDom) || echarts.init(growthChartDom)
            const growthOption = {
              tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                  return params[0].name + '<br/>增长率: ' + params[0].value + '%'
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',

                top: '15%',

                containLabel: true
              },
              xAxis: {
                type: 'category',
                data: (data.rows || []).map((o) => o.businessUnitName),
                axisLabel: {
                  rotate: 30,
                  interval: 0
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value}%'
                }
              },
              series: [
                {
                  name: '增长率',
                  type: 'bar',
                  data: (data.rows || []).map((o) => parseFloat(o.growthRate) || 0),
                  itemStyle: {

                    color: colors.current, // 统一使用当前指标类型的颜色
                    borderRadius: [4, 4, 0, 0]

                  },
                  markPoint: {
                    data: [
                      { type: 'max', name: '最大值' },
                      { type: 'min', name: '最小值' }
                    ]
                  }
                }
              ]
            }
            growthChart.setOption(growthOption)
          }
        })
      },

      // 数字排序方法（返回一个排序函数）
      getNumberSortMethod(prop) {
        return (a, b) => {
          const valA = parseFloat(a[prop]) || 0
          const valB = parseFloat(b[prop]) || 0
          return valA - valB
        }
      },
      // 增长率排序方法（处理百分比，返回一个排序函数）
      getGrowthRateSortMethod(prop) {
        return (a, b) => {
          const valA = parseFloat(a[prop]) || 0
          const valB = parseFloat(b[prop]) || 0
          return valA - valB
        }
      },
      // 增长率排序方法（处理百分比字符串，返回一个排序函数）
      getGrowthRateStringSortMethod(prop) {
        return (a, b) => {
          const rateA = a[prop] || '0%'
          const rateB = b[prop] || '0%'
          const valA = parseFloat(rateA.toString().replace('%', '')) || 0
          const valB = parseFloat(rateB.toString().replace('%', '')) || 0
          return valA - valB
        }
      },

      // 构建趋势表格列
      buildTrendTableColumns(data) {
        const columns = [

          { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left', sortable: true, fixed: 'left' },
          { label: '门店', prop: 'storeName', width: 150, align: 'left', sortable: true, fixed: 'left' }

        ]
  
        for (let i = 1; i <= 12; i++) {
          columns.push({
            label: `${i}月`,
            prop: `month${i}`,
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod(`month${i}`),

            formatter: (row) => {
              return row[`month${i}`] ? Number(row[`month${i}`]).toLocaleString() : '0'
            }
          })
        }
  
        columns.push(
          {
            label: '本年合计',
            prop: 'totalCurrentYear',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('totalCurrentYear'),

            formatter: (row) => {
              return row.totalCurrentYear ? Number(row.totalCurrentYear).toLocaleString() : '0'
            }
          },
          {
            label: '上年合计',
            prop: 'totalLastYear',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('totalLastYear'),

            formatter: (row) => {
              return row.totalLastYear ? Number(row.totalLastYear).toLocaleString() : '0'
            }
          },
          {
            label: '增长率',
            prop: 'growthRate',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateSortMethod('growthRate'),

            formatter: (row) => {
              const rate = parseFloat(row.growthRate) || 0
              const color = rate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
            }
          }
        )
  
        this.trendTableColumns = columns
      },
      // 构建月度统计表格列
      buildMonthlyStatTableColumns(data, name) {
        const columns = [

          { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left', sortable: true, fixed: 'left' },
          { label: '门店', prop: 'storeName', width: 150, align: 'left', sortable: true, fixed: 'left' }

        ]
  
        for (let i = 1; i <= 12; i++) {
          columns.push({
            label: `${i}月`,
            prop: `month${i}`,
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod(`month${i}`),

            formatter: (row) => {
              const value = row[`month${i}`] || 0
              if (name === '业绩' || name === '消耗') {
                return `¥${Number(value).toLocaleString()}`
              }
              return Number(value).toLocaleString()
            }
          })
        }
  
        columns.push(
          {
            label: '本年合计',
            prop: 'totalCurrentYear',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('totalCurrentYear'),

            formatter: (row) => {
              const value = row.totalCurrentYear || 0
              if (name === '业绩' || name === '消耗') {
                return `¥${Number(value).toLocaleString()}`
              }
              return Number(value).toLocaleString()
            }
          },
          {
            label: '上年合计',
            prop: 'totalLastYear',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('totalLastYear'),

            formatter: (row) => {
              const value = row.totalLastYear || 0
              if (name === '业绩' || name === '消耗') {
                return `¥${Number(value).toLocaleString()}`
              }
              return Number(value).toLocaleString()
            }
          },
          {
            label: '增长率',
            prop: 'growthRate',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateSortMethod('growthRate'),

            formatter: (row) => {
              const rate = parseFloat(row.growthRate) || 0
              const color = rate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
            }
          }
        )
  
        switch (name) {
          case '业绩':
            this.performanceTableColumns = columns
            break
          case '消耗':
            this.consumeTableColumns = columns
            break
          case '人头数':
            this.headCountTableColumns = columns
            break
          case '人次':
            this.personTimeTableColumns = columns
            break
          case '项目数':
            this.projectCountTableColumns = columns
            break
        }
      },
      // 构建门店指标表格列
      buildStoreIndicatorTableColumns() {
        this.storeIndicatorTableColumns = [

          { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left', sortable: true },
          { label: '门店', prop: 'storeName', align: 'left', sortable: true },

          {
            label: '本年数值',
            prop: 'currentYearValue',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('currentYearValue'),

            formatter: (row) => {
              return Number(row.currentYearValue || 0).toLocaleString()
            }
          },
          {
            label: '上年数值',
            prop: 'lastYearValue',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('lastYearValue'),

            formatter: (row) => {
              return Number(row.lastYearValue || 0).toLocaleString()
            }
          },
          {
            label: '增长率',
            prop: 'growthRate',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateSortMethod('growthRate'),

            formatter: (row) => {
              const rate = parseFloat(row.growthRate) || 0
              const color = rate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
            }
          }
        ]
      },
      // 构建事业部指标表格列
      buildBuIndicatorTableColumns() {
        this.buIndicatorTableColumns = [

          { label: '事业部', prop: 'businessUnitName', width: 200, align: 'left', sortable: true },

          {
            label: '本年数值',
            prop: 'currentYearValue',
            width: 150,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('currentYearValue'),

            formatter: (row) => {
              return Number(row.currentYearValue || 0).toLocaleString()
            }
          },
          {
            label: '上年数值',
            prop: 'lastYearValue',
            width: 150,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('lastYearValue'),

            formatter: (row) => {
              return Number(row.lastYearValue || 0).toLocaleString()
            }
          },
          {
            label: '增长率',
            prop: 'growthRate',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateSortMethod('growthRate'),

            formatter: (row) => {
              const rate = parseFloat(row.growthRate) || 0
              const color = rate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate.toFixed(2)}%</span>`
            }
          }
        ]
      },
      // 构建事业部汇总表格列
      buildBuSummaryTableColumns() {
        this.buSummaryTableColumns = [

          { label: '事业部', prop: 'businessUnitName', width: 120, align: 'left', sortable: true },
          { label: '门店', prop: 'storeName', align: 'left', sortable: true },

          {
            label: '本年业绩',
            prop: 'currentPerformance',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('currentPerformance'),

            formatter: (row) => {
              return `¥${Number(row.currentPerformance || 0).toLocaleString()}`
            }
          },
          {
            label: '上年业绩',
            prop: 'lastPerformance',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('lastPerformance'),

            formatter: (row) => {
              return `¥${Number(row.lastPerformance || 0).toLocaleString()}`
            }
          },
          {
            label: '业绩增长率',
            prop: 'performanceGrowthRate',
            width: 110,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateStringSortMethod('performanceGrowthRate'),

            formatter: (row) => {
              const rate = row.performanceGrowthRate || '0%'
              const numRate = parseFloat(rate) || 0
              const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate}</span>`
            }
          },
          {
            label: '本年消耗',
            prop: 'currentConsume',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('currentConsume'),

            formatter: (row) => {
              return `¥${Number(row.currentConsume || 0).toLocaleString()}`
            }
          },
          {
            label: '上年消耗',
            prop: 'lastConsume',
            width: 120,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('lastConsume'),

            formatter: (row) => {
              return `¥${Number(row.lastConsume || 0).toLocaleString()}`
            }
          },
          {
            label: '消耗增长率',
            prop: 'consumeGrowthRate',
            width: 110,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateStringSortMethod('consumeGrowthRate'),

            formatter: (row) => {
              const rate = row.consumeGrowthRate || '0%'
              const numRate = parseFloat(rate) || 0
              const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate}</span>`
            }
          },
          {
            label: '本年客头',
            prop: 'currentHeadCount',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('currentHeadCount'),

            formatter: (row) => {
              return Number(row.currentHeadCount || 0).toLocaleString()
            }
          },
          {
            label: '上年客头',
            prop: 'lastHeadCount',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('lastHeadCount'),

            formatter: (row) => {
              return Number(row.lastHeadCount || 0).toLocaleString()
            }
          },
          {
            label: '客头增长率',
            prop: 'headCountGrowthRate',
            width: 110,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateStringSortMethod('headCountGrowthRate'),

            formatter: (row) => {
              const rate = row.headCountGrowthRate || '0%'
              const numRate = parseFloat(rate) || 0
              const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate}</span>`
            }
          },
          {
            label: '本年客次',
            prop: 'currentPersonTime',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('currentPersonTime'),

            formatter: (row) => {
              return Number(row.currentPersonTime || 0).toLocaleString()
            }
          },
          {
            label: '上年客次',
            prop: 'lastPersonTime',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('lastPersonTime'),

            formatter: (row) => {
              return Number(row.lastPersonTime || 0).toLocaleString()
            }
          },
          {
            label: '客次增长率',
            prop: 'personTimeGrowthRate',
            width: 110,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateStringSortMethod('personTimeGrowthRate'),

            formatter: (row) => {
              const rate = row.personTimeGrowthRate || '0%'
              const numRate = parseFloat(rate) || 0
              const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate}</span>`
            }
          },
          {
            label: '本年项目',
            prop: 'currentProjectCount',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('currentProjectCount'),

            formatter: (row) => {
              return Number(row.currentProjectCount || 0).toLocaleString()
            }
          },
          {
            label: '上年项目',
            prop: 'lastProjectCount',
            width: 100,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getNumberSortMethod('lastProjectCount'),

            formatter: (row) => {
              return Number(row.lastProjectCount || 0).toLocaleString()
            }
          },
          {
            label: '项目增长率',
            prop: 'projectCountGrowthRate',
            width: 110,
            align: 'right',

            sortable: 'custom',
            sortMethod: this.getGrowthRateStringSortMethod('projectCountGrowthRate'),

            formatter: (row) => {
              const rate = row.projectCountGrowthRate || '0%'
              const numRate = parseFloat(rate) || 0
              const color = numRate >= 0 ? '#67C23A' : '#F56C6C'
              return `<span style="color: ${color}">${rate}</span>`
            }
          }
        ]
      },

      // 处理表格排序变化
      handleTableSortChange(tableType, { column, prop, order }) {
        if (!order) {
          // 如果没有排序顺序，恢复原始数据（需要重新加载数据）
          this.loadCurrentMenuData()
          return
        }
  
        // 获取对应的数据和列配置
        let tableData = []
        let tableColumns = []
  
        switch (tableType) {
          case 'trend':
            tableData = this.trendTableData
            tableColumns = this.trendTableColumns
            break
          case 'performance':
            tableData = this.performanceTableData
            tableColumns = this.performanceTableColumns
            break
          case 'consume':
            tableData = this.consumeTableData
            tableColumns = this.consumeTableColumns
            break
          case 'headCount':
            tableData = this.headCountTableData
            tableColumns = this.headCountTableColumns
            break
          case 'personTime':
            tableData = this.personTimeTableData
            tableColumns = this.personTimeTableColumns
            break
          case 'projectCount':
            tableData = this.projectCountTableData
            tableColumns = this.projectCountTableColumns
            break
          case 'storeIndicator':
            tableData = this.storeIndicatorTableData
            tableColumns = this.storeIndicatorTableColumns
            break
          case 'buIndicator':
            tableData = this.buIndicatorTableData
            tableColumns = this.buIndicatorTableColumns
            break
          case 'buSummary':
            tableData = this.buSummaryTableData
            tableColumns = this.buSummaryTableColumns
            break
        }
  
        // 找到对应的列配置
        const colConfig = tableColumns.find(col => col.prop === prop)
        if (!colConfig) return
  
        // 获取排序方法
        const sortMethod = colConfig.sortMethod
        const isAsc = order === 'ascending'
  
        // 创建数据副本进行排序
        const sortedData = [...tableData]
  
        // 执行排序
        if (sortMethod) {
          // 使用自定义排序方法
          sortedData.sort((a, b) => {
            const result = sortMethod(a, b)
            return isAsc ? result : -result
          })
        } else {
          // 使用默认排序（字符串或数字）
          sortedData.sort((a, b) => {
            let aVal = a[prop]
            let bVal = b[prop]
  
            // 处理空值
            if (aVal === null || aVal === undefined) aVal = ''
            if (bVal === null || bVal === undefined) bVal = ''
  
            // 尝试转换为数字
            const aNum = Number(aVal)
            const bNum = Number(bVal)
  
            if (!isNaN(aNum) && !isNaN(bNum)) {
              // 数字排序
              return isAsc ? aNum - bNum : bNum - aNum
            } else {
              // 字符串排序
              const aStr = String(aVal)
              const bStr = String(bVal)
              if (isAsc) {
                return aStr.localeCompare(bStr)
              } else {
                return bStr.localeCompare(aStr)
              }
            }
          })
        }
  
        // 更新对应的数据数组（Vue 响应式更新）
        switch (tableType) {
          case 'trend':
            this.trendTableData = sortedData
            break
          case 'performance':
            this.performanceTableData = sortedData
            break
          case 'consume':
            this.consumeTableData = sortedData
            break
          case 'headCount':
            this.headCountTableData = sortedData
            break
          case 'personTime':
            this.personTimeTableData = sortedData
            break
          case 'projectCount':
            this.projectCountTableData = sortedData
            break
          case 'storeIndicator':
            this.storeIndicatorTableData = sortedData
            break
          case 'buIndicator':
            this.buIndicatorTableData = sortedData
            break
          case 'buSummary':
            this.buSummaryTableData = sortedData
            break
        }
      },

      handleResize() {
        const chartIds = [
          'perfTrend',
          'consumeTrend',
          'headCountTrend',
          'personTimeTrend',
          'projectCountTrend',
          'performanceChart',
          'consumeChart',
          'headCountChart',
          'personTimeChart',
          'projectCountChart',
          'storeIndicatorChart',
          'storePieChart',
          'buPieChart',
          'buGrowthChart'
        ]
        chartIds.forEach((id) => {
          const chart = echarts.getInstanceByDom(document.getElementById(id))
          if (chart) chart.resize()
        })
      },
      destroyAllCharts() {
        const chartIds = [
          'perfTrend',
          'consumeTrend',
          'headCountTrend',
          'personTimeTrend',
          'projectCountTrend',
          'performanceChart',
          'consumeChart',
          'headCountChart',
          'personTimeChart',
          'projectCountChart',
          'storeIndicatorChart',
          'storePieChart',
          'buPieChart',
          'buGrowthChart'
        ]
        chartIds.forEach((id) => {
          const chart = echarts.getInstanceByDom(document.getElementById(id))
          if (chart) chart.dispose()
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .annual-summary-dashboard {

    padding: 16px;
    background-color: #f5f7fa;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

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

      background: #fff;

      padding: 12px 20px;

      border-radius: 8px;

      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

      .page-title {
        margin: 0;
        font-size: 20px;
        color: #303133;
        font-weight: 600;
      }

      .search-form-compact {
        ::v-deep .el-form-item {
          margin-bottom: 0;
          margin-right: 15px;

        }
      }
    }
  

    .dashboard-tabs {
      background: #fff;
      padding: 0 20px;
      border-radius: 8px;
      margin-bottom: 16px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

      ::v-deep .el-tabs__header {
        margin: 0;
      }

      ::v-deep .el-tabs__item {
        height: 48px;
        line-height: 48px;
        padding: 0 20px;
        font-size: 14px;

        i {
          margin-right: 6px;

        }
  

        &.is-active {
          color: #409EFF;
          font-weight: 600;
        }
      }

      ::v-deep .el-tabs__active-bar {
        background-color: #409EFF;
      }
    }

    .dashboard-content {
      .content-panel {
        .panel-body {
          .indicator-controls {
            padding: 16px 0;
            border-bottom: 1px solid #f0f2f5;
            margin-bottom: 16px;

            ::v-deep .el-radio-button__inner {
              padding: 8px 16px;

  
              i {

                margin-right: 4px;

              }
            }

          }

          .chart-card {
            margin-bottom: 16px;

            &::v-deep .el-card__header {
              padding: 12px 20px;
              border-bottom: 1px solid #f0f2f5;

            }

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

              i {
                color: #409EFF;
                margin-right: 8px;

              }
            }
  

            .chart-box {
              height: 320px;
              width: 100%;
            }

            .chart-box-large {
              height: 400px;
              width: 100%;
            }
          }

          .table-card {
            &::v-deep .el-card__header {
              padding: 12px 20px;
              border-bottom: 1px solid #f0f2f5;
            }

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

              i {
                color: #409EFF;
                margin-right: 8px;

              }
            }

  
            // 事业部汇总表格特殊样式
            &.bu-summary-card {
              &::v-deep .el-card__body {
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
              }
            }
          }
  
          // 事业部汇总表格样式
          .bu-summary-table {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
  
            &::v-deep .el-table__body-wrapper {
              height: auto !important;
              max-height: none !important;
              overflow: visible !important;
            }
  
            &::v-deep .el-table {
              height: auto !important;
              max-height: none !important;
            }

          }

          .table-section {
            ::v-deep .el-table {
              .el-table__header th {
                background-color: #f5f7fa;
                color: #606266;

                font-weight: 600;

              }

              .el-table__body tr:hover>td {

                background-color: #f5f7fa;

              }
            }
          }
        }
      }
    }

  
    .dashboard-card {
      border: none;
      border-radius: 8px;
      margin-bottom: 16px;
  
      &::v-deep .el-card__body {
        padding: 20px;
      }
    }

  }
  </style>