antissoft / lvqianmeiye_ERP

<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>拓客活动报表</h2>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-container">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="拓客活动">
          <el-select
            v-model="queryParams.eventId"
            placeholder="请选择拓客活动"
            style="width: 300px"
            @change="handleQuery"
            :loading="eventLoading"
          >
            <el-option
              v-for="event in eventList"
              :key="event.id"
              :label="event.eventName"
              :value="event.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
          <el-button type="success" icon="el-icon-camera" @click="saveScreenshot" :loading="screenshotLoading">
            保存截图
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 报表内容容器 -->
    <div class="report-sections-container">
    <!-- 团队数据报表 -->
    <div class="report-section">
      <div class="section-header">
        <h3>团队数据报表</h3>
      </div>
      <div v-loading="teamLoading" class="report-content">
        <div v-if="teamData.length === 0" class="no-data">
          暂无数据
        </div>
        <div v-else>
          <!-- 统计概览卡片 -->
          <div class="statistics-overview">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-s-shop"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ teamData.length }}</div>
                    <div class="stat-label">参与门店</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-s-custom"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ getTotalTeams() }}</div>
                    <div class="stat-label">参与战队</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-s-custom"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ getTotalMembers() }}</div>
                    <div class="stat-label">参与人员</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-card">
                  <div class="stat-icon">
                    <i class="el-icon-trophy-1"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-number">{{ getTotalExpansionCount() }}</div>
                    <div class="stat-label">总拓客数</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          
          <div class="waterfall-container">
            <div v-for="store in teamData" :key="store.StoreId" class="store-card-waterfall">
              <div class="store-header">
                <div class="store-title-row">
                  <h4>{{ store.StoreName }}</h4>
                  <div class="store-summary">
                    <span class="summary-text">
                      目标: <span class="summary-value">{{ getStoreTotalTarget(store) }}</span>
                    </span>
                    <span class="summary-text">
                      完成: <span class="summary-value">{{ getStoreTotalCompleted(store) }}</span>
                    </span>
                    <span class="summary-text">
                      完成率: <span class="summary-value" :class="getStoreCompletionRateClass(store)">
                        {{ getStoreCompletionRate(store) }}%
                      </span>
                    </span>
                  </div>
                </div>
              </div>
              <div class="teams-container">
                <div v-for="team in store.TeamList" :key="team.TeamName" class="team-card">
                  <div class="team-header">
                    <span class="team-name">{{ team.TeamName }}</span>
                  </div>
                  <div class="team-members">
                    <div v-for="member in team.TeamUserInfo" :key="member.ExpansionUserId" class="member-row">
                      <div class="member-info">
                        <span class="member-name">{{ member.ExpansionUserName }}</span>
                      </div>
                      <div class="member-stats">
                        <span class="target">目标: {{ member.EventTarget }}</span>
                        <span class="count">完成: {{ member.ExpansionCount }}</span>
                        <span class="rate" :class="getCompletionRateClass(member.ExpansionCount, member.EventTarget)">
                          完成率: {{ getCompletionRate(member.ExpansionCount, member.EventTarget) }}%
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 门店数据报表 -->
    <div class="report-section">
      <div class="section-header">
        <h3>门店数据报表</h3>
      </div>
      <div v-loading="storeLoading" class="report-content">
        <div v-if="storeData.length === 0" class="no-data">
          暂无数据
        </div>
         <div v-else class="store-table">
           <el-table :data="storeData" stripe style="width: 100%">
             <el-table-column prop="StoreName" label="门店名称"  />
             <el-table-column prop="TotalTarget" label="目标数据"  align="center" />
             <el-table-column prop="CompletedTarget" label="完成数量"  align="center" />
             <el-table-column label="完成率" min-width="180" align="center">
               <template slot-scope="scope">
                 <div class="progress-container">
                   <div class="progress-bar">
                     <div 
                       class="progress-fill" 
                       :style="{ width: scope.row.CompletionRate + '%' }"
                     ></div>
                   </div>
                   <span class="progress-text">{{ scope.row.CompletionRate }}%</span>
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="Ranking" label="排名" width="80" align="center">
               <template slot-scope="scope">
                 <span class="ranking" :class="getRankingClass(scope.row.Ranking)">
                   {{ scope.row.Ranking }}
                 </span>
               </template>
             </el-table-column>
           </el-table>
         </div>
      </div>
    </div>

    <!-- 个人数据报表 -->
    <div class="report-section">
      <div class="section-header">
        <h3>个人数据报表</h3>
      </div>
      <div v-loading="personLoading" class="report-content">
        <div v-if="personData.length === 0" class="no-data">
          暂无数据
        </div>
         <div v-else class="person-table">
           <el-table :data="personData" stripe style="width: 100%">
             <el-table-column prop="UserName" label="姓名"  />
             <el-table-column prop="StoreName" label="门店"  />
             <el-table-column prop="TeamName" label="团队"  />
             <el-table-column prop="PersonalTarget" label="个人目标"  align="center" />
             <el-table-column prop="CompletedTarget" label="完成数量" align="center" />
             <el-table-column label="完成率" min-width="150" align="center">
               <template slot-scope="scope">
                 <div class="progress-container">
                   <div class="progress-bar">
                     <div 
                       class="progress-fill" 
                       :style="{ width: Math.min(scope.row.CompletionRate, 100) + '%' }"
                     ></div>
                   </div>
                   <span class="progress-text">{{ scope.row.CompletionRate }}%</span>
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="Ranking" label="排名" width="80" align="center">
               <template slot-scope="scope">
                 <span class="ranking" :class="getRankingClass(scope.row.Ranking)">
                   {{ scope.row.Ranking }}
                 </span>
               </template>
             </el-table-column>
             <el-table-column label="最后拓客时间" align="center">
               <template slot-scope="scope">
                 {{ formatTime(scope.row.LastExpansionTime) }}
               </template>
             </el-table-column>
           </el-table>
         </div>
      </div>
    </div>
    </div>

    <!-- 截图预览对话框 -->
    <el-dialog
      title="截图预览"
      :visible.sync="previewVisible"
      width="80%"
      :before-close="closePreview"
      center
    >
      <div class="screenshot-preview">
        <img 
          v-if="screenshotDataUrl" 
          :src="screenshotDataUrl" 
          alt="报表截图" 
          style="width: 100%; max-height: 70vh; object-fit: contain;"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePreview">取消</el-button>
        <el-button type="primary" @click="downloadScreenshot">下载图片</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getEventList, getTeamData, getStoreData, getPersonData } from '@/api/lqTkjlb'

export default {
  name: 'TkjlbReport',
  data() {
    return {
      queryParams: {
        eventId: ''
      },
      eventList: [],
      teamData: [],
      storeData: [],
      personData: [],
      eventLoading: false,
      teamLoading: false,
      storeLoading: false,
      personLoading: false,
      screenshotLoading: false,
      screenshotDataUrl: '',
      previewVisible: false
    }
  },
  created() {
    this.getEventList()
    // 添加测试数据，确保页面正常显示
    // this.addTestData()
  },
  methods: {
    // 获取活动列表
    async getEventList() {
      this.eventLoading = true
      try {
        console.log('正在获取活动列表...')
        const response = await getEventList()
        console.log('活动列表响应:', response)
        this.eventList = response.data.list || []
        
        // 默认选中第一个活动
        if (this.eventList.length > 0) {
          this.queryParams.eventId = this.eventList[0].id
          console.log('默认选中活动:', this.eventList[0])
          // 自动查询第一个活动的数据
          this.handleQuery()
        }
      } catch (error) {
        console.error('获取活动列表失败:', error)
        this.$message.error('获取活动列表失败: ' + error.message)
        this.eventList = []
      } finally {
        this.eventLoading = false
      }
    },

    // 查询数据
    handleQuery() {
      if (!this.queryParams.eventId) {
        this.$message.warning('请选择拓客活动')
        return
      }
      this.getTeamData()
      this.getStoreData()
      this.getPersonData()
    },
    
    // 重置查询
    resetQuery() {
      if (this.eventList.length > 0) {
        this.queryParams.eventId = this.eventList[0].id
        this.handleQuery()
      } else {
        this.queryParams.eventId = ''
        this.teamData = []
        this.storeData = []
        this.personData = []
      }
    },

    // 获取团队数据
    async getTeamData() {
      this.teamLoading = true
      try {
        console.log('正在获取团队数据...')
        const response = await getTeamData(this.queryParams.eventId)
        console.log('团队数据响应:', response)
        this.teamData = response.data || []
        console.log('团队数据:', this.teamData)
      } catch (error) {
        console.error('获取团队数据失败:', error)
        this.$message.error('获取团队数据失败: ' + error.message)
        this.teamData = []
      } finally {
        this.teamLoading = false
      }
    },

    // 获取门店数据
    async getStoreData() {
      this.storeLoading = true
      try {
        console.log('正在获取门店数据...')
        const response = await getStoreData(this.queryParams.eventId)
        console.log('门店数据响应:', response)
        this.storeData = response.data || []
        console.log('门店数据:', this.storeData)
      } catch (error) {
        console.error('获取门店数据失败:', error)
        this.$message.error('获取门店数据失败: ' + error.message)
        this.storeData = []
      } finally {
        this.storeLoading = false
      }
    },

    // 获取个人数据
    async getPersonData() {
      this.personLoading = true
      try {
        console.log('正在获取个人数据...')
        const response = await getPersonData(this.queryParams.eventId)
        console.log('个人数据响应:', response)
        this.personData = response.data || []
        console.log('个人数据:', this.personData)
      } catch (error) {
        console.error('获取个人数据失败:', error)
        this.$message.error('获取个人数据失败: ' + error.message)
        this.personData = []
      } finally {
        this.personLoading = false
      }
    },

    // 计算完成率
    getCompletionRate(completed, target) {
      if (target === 0) return 0
      return Math.round((completed / target) * 100)
    },

    // 获取完成率样式类
    getCompletionRateClass(completed, target) {
      const rate = this.getCompletionRate(completed, target)
      if (rate >= 100) return 'rate-excellent'
      if (rate >= 80) return 'rate-good'
      if (rate >= 60) return 'rate-normal'
      return 'rate-poor'
    },

    // 获取排名样式类
    getRankingClass(ranking) {
      if (ranking <= 3) return 'ranking-top'
      if (ranking <= 6) return 'ranking-good'
      return 'ranking-normal'
    },

    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '无'
      const date = new Date(timestamp)
      return date.toLocaleString('zh-CN')
    },

    // 计算门店总目标
    getStoreTotalTarget(store) {
      if (!store.TeamList) return 0
      let total = 0
      store.TeamList.forEach(team => {
        if (team.TeamUserInfo) {
          team.TeamUserInfo.forEach(member => {
            total += member.EventTarget || 0
          })
        }
      })
      return total
    },

    // 计算门店总完成数
    getStoreTotalCompleted(store) {
      if (!store.TeamList) return 0
      let total = 0
      store.TeamList.forEach(team => {
        if (team.TeamUserInfo) {
          team.TeamUserInfo.forEach(member => {
            total += member.ExpansionCount || 0
          })
        }
      })
      return total
    },

    // 计算门店完成率
    getStoreCompletionRate(store) {
      const target = this.getStoreTotalTarget(store)
      const completed = this.getStoreTotalCompleted(store)
      if (target === 0) return 0
      return Math.round((completed / target) * 100)
    },

    // 获取门店完成率样式类
    getStoreCompletionRateClass(store) {
      const rate = this.getStoreCompletionRate(store)
      if (rate >= 100) return 'rate-excellent'
      if (rate >= 80) return 'rate-good'
      if (rate >= 60) return 'rate-normal'
      return 'rate-poor'
    },

    // 计算总战队数
    getTotalTeams() {
      if (!this.teamData || this.teamData.length === 0) return 0
      let total = 0
      this.teamData.forEach(store => {
        if (store.TeamList) {
          total += store.TeamList.length
        }
      })
      return total
    },

    // 计算总参与人员数
    getTotalMembers() {
      if (!this.teamData || this.teamData.length === 0) return 0
      let total = 0
      this.teamData.forEach(store => {
        if (store.TeamList) {
          store.TeamList.forEach(team => {
            if (team.TeamUserInfo) {
              total += team.TeamUserInfo.length
            }
          })
        }
      })
      return total
    },

    // 计算总拓客数
    getTotalExpansionCount() {
      if (!this.teamData || this.teamData.length === 0) return 0
      let total = 0
      this.teamData.forEach(store => {
        if (store.TeamList) {
          store.TeamList.forEach(team => {
            if (team.TeamUserInfo) {
              team.TeamUserInfo.forEach(member => {
                total += member.ExpansionCount || 0
              })
            }
          })
        }
      })
      return total
    },

    // 添加测试数据
    addTestData() {
      // 如果API调用失败，添加一些测试数据确保页面正常显示
      setTimeout(() => {
        // 如果没有活动列表，添加测试活动
        if (this.eventList.length === 0) {
          this.eventList = [
            {
              id: '740360861859710213',
              name: '测试拓客活动'
            }
          ]
          this.queryParams.eventId = this.eventList[0].id
        }
        
        if (this.teamData.length === 0) {
          this.teamData = [
            {
              "StoreId": "1649328471923847186",
              "StoreName": "绿纤骑士郡店",
              "TeamList": [
                {
                  "TeamName": "咕噜队",
                  "TeamUserInfo": [
                    {
                      "ExpansionUserId": "17882512738",
                      "ExpansionUserName": "梁诗雨",
                      "ExpansionCount": 6,
                      "EventTarget": 100
                    },
                    {
                      "ExpansionUserId": "admin",
                      "ExpansionUserName": "管理员",
                      "ExpansionCount": 0,
                      "EventTarget": 6
                    }
                  ]
                }
              ]
            }
          ]
        }
        
        if (this.storeData.length === 0) {
          this.storeData = [
            {
              "StoreId": "1649328471923847190",
              "StoreName": "绿纤亚洲湾店",
              "TotalTarget": 6,
              "CompletedTarget": 6,
              "CompletionRate": 100,
              "Ranking": 1
            },
            {
              "StoreId": "1649328471923847169",
              "StoreName": "绿纤紫荆店",
              "TotalTarget": 3,
              "CompletedTarget": 3,
              "CompletionRate": 100,
              "Ranking": 2
            }
          ]
        }
        
        if (this.personData.length === 0) {
          this.personData = [
            {
              "UserId": "19982024821",
              "UserName": "谢珂欣",
              "StoreId": "1649328471923847190",
              "StoreName": "绿纤亚洲湾店",
              "TeamName": "9444",
              "PersonalTarget": 1,
              "CompletedTarget": 6,
              "CompletionRate": 600,
              "Ranking": 1,
              "LastExpansionTime": 1758699730000
            },
            {
              "UserId": "17780181798",
              "UserName": "王任燕",
              "StoreId": "1649328471923847175",
              "StoreName": "绿纤468店",
              "TeamName": "222",
              "PersonalTarget": 1,
              "CompletedTarget": 3,
              "CompletionRate": 300,
              "Ranking": 2,
              "LastExpansionTime": 1758699412000
            }
          ]
        }
      }, 2000) // 2秒后添加测试数据
    },

    // 保存截图
    async saveScreenshot() {
      this.screenshotLoading = true
      try {
        // 动态导入html2canvas
        const html2canvas = await import('html2canvas')
        
        // 获取要截图的容器（只包含报表内容，不包含筛选条件）
        const element = document.querySelector('.report-sections-container')
        
        if (!element) {
          this.$message.error('未找到要截图的内容')
          return
        }

        // 等待页面完全渲染
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 滚动到页面顶部确保所有内容可见
        window.scrollTo(0, 0)
        await new Promise(resolve => setTimeout(resolve, 500))

        // 临时保存原始样式
        const originalStyles = {
          height: element.style.height,
          overflow: element.style.overflow,
          maxHeight: element.style.maxHeight,
          position: element.style.position
        }

        // 临时修改样式以确保完整截图
        element.style.height = 'auto'
        element.style.overflow = 'visible'
        element.style.maxHeight = 'none'
        element.style.position = 'static'

        // 确保所有报表区域都可见
        const reportSections = element.querySelectorAll('.report-section')
        reportSections.forEach(section => {
          section.style.height = 'auto'
          section.style.overflow = 'visible'
          section.style.maxHeight = 'none'
          section.style.display = 'block'
        })

        // 确保统计概览完整显示
        const statisticsOverview = element.querySelector('.statistics-overview')
        if (statisticsOverview) {
          statisticsOverview.style.height = 'auto'
          statisticsOverview.style.overflow = 'visible'
          statisticsOverview.style.maxHeight = 'none'
          statisticsOverview.style.display = 'block'
          statisticsOverview.style.visibility = 'visible'
          statisticsOverview.style.opacity = '1'
        }

        // 确保瀑布流容器完整显示
        const waterfallContainer = element.querySelector('.waterfall-container')
        if (waterfallContainer) {
          waterfallContainer.style.height = 'auto'
          waterfallContainer.style.overflow = 'visible'
          waterfallContainer.style.maxHeight = 'none'
        }

        // 确保所有卡片完整显示
        const storeCards = element.querySelectorAll('.store-card-waterfall')
        storeCards.forEach(card => {
          card.style.height = 'auto'
          card.style.overflow = 'visible'
          card.style.maxHeight = 'none'
        })

        // 等待样式应用
        await new Promise(resolve => setTimeout(resolve, 500))

        // 计算实际内容高度
        const actualHeight = Math.max(
          element.scrollHeight,
          element.offsetHeight,
          element.clientHeight
        )

        console.log('容器尺寸信息:', {
          scrollWidth: element.scrollWidth,
          scrollHeight: element.scrollHeight,
          offsetWidth: element.offsetWidth,
          offsetHeight: element.offsetHeight,
          clientWidth: element.clientWidth,
          clientHeight: element.clientHeight,
          actualHeight: actualHeight
        })

        // 配置截图选项
        const options = {
          allowTaint: true,
          useCORS: true,
          scale: 1.0, // 降低缩放比例提高兼容性
          backgroundColor: '#ffffff',
          logging: true, // 开启日志便于调试
          imageTimeout: 30000,
          removeContainer: true,
          foreignObjectRendering: false, // 关闭foreignObject渲染提高兼容性
          scrollX: 0,
          scrollY: 0,
          width: element.scrollWidth,
          height: actualHeight,
          windowWidth: element.scrollWidth,
          windowHeight: actualHeight,
          ignoreElements: (element) => {
            // 忽略可能影响截图的元素
            return element.classList.contains('el-loading-mask') || 
                   element.classList.contains('el-loading-spinner') ||
                   element.classList.contains('el-message') ||
                   element.classList.contains('el-dialog__wrapper') ||
                   element.classList.contains('el-tooltip__popper')
          },
          onclone: (clonedDoc) => {
            // 在克隆的文档中确保所有容器都能完整显示
            const clonedElement = clonedDoc.querySelector('.report-sections-container')
            if (clonedElement) {
              clonedElement.style.height = 'auto'
              clonedElement.style.overflow = 'visible'
              clonedElement.style.maxHeight = 'none'
              clonedElement.style.position = 'static'
              clonedElement.style.width = '100%'
            }
            
            // 确保所有报表区域完整显示
            const reportSections = clonedDoc.querySelectorAll('.report-section')
            reportSections.forEach(section => {
              section.style.height = 'auto'
              section.style.overflow = 'visible'
              section.style.maxHeight = 'none'
              section.style.display = 'block'
              section.style.visibility = 'visible'
              section.style.opacity = '1'
            })
            
            // 确保统计概览完整显示
            const statisticsOverview = clonedDoc.querySelector('.statistics-overview')
            if (statisticsOverview) {
              statisticsOverview.style.height = 'auto'
              statisticsOverview.style.overflow = 'visible'
              statisticsOverview.style.maxHeight = 'none'
              statisticsOverview.style.display = 'block'
              statisticsOverview.style.visibility = 'visible'
              statisticsOverview.style.opacity = '1'
              statisticsOverview.style.position = 'static'
            }
            
            // 确保统计卡片完整显示
            const statCards = clonedDoc.querySelectorAll('.stat-card')
            statCards.forEach(card => {
              card.style.height = 'auto'
              card.style.overflow = 'visible'
              card.style.maxHeight = 'none'
              card.style.display = 'flex'
              card.style.visibility = 'visible'
              card.style.opacity = '1'
              card.style.position = 'static'
            })
            
            // 确保栅格系统完整显示
            const elRows = clonedDoc.querySelectorAll('.el-row')
            elRows.forEach(row => {
              row.style.height = 'auto'
              row.style.overflow = 'visible'
              row.style.maxHeight = 'none'
            })
            
            const elCols = clonedDoc.querySelectorAll('.el-col')
            elCols.forEach(col => {
              col.style.height = 'auto'
              col.style.overflow = 'visible'
              col.style.maxHeight = 'none'
            })
            
            // 确保瀑布流容器完整显示
            const waterfallContainer = clonedDoc.querySelector('.waterfall-container')
            if (waterfallContainer) {
              waterfallContainer.style.height = 'auto'
              waterfallContainer.style.overflow = 'visible'
              waterfallContainer.style.maxHeight = 'none'
              waterfallContainer.style.display = 'flex'
              waterfallContainer.style.flexWrap = 'wrap'
            }
            
            // 确保所有卡片完整显示
            const storeCards = clonedDoc.querySelectorAll('.store-card-waterfall')
            storeCards.forEach(card => {
              card.style.height = 'auto'
              card.style.overflow = 'visible'
              card.style.maxHeight = 'none'
              card.style.display = 'block'
            })

            // 确保所有团队和成员数据完整显示
            const teamCards = clonedDoc.querySelectorAll('.team-card')
            teamCards.forEach(card => {
              card.style.height = 'auto'
              card.style.overflow = 'visible'
              card.style.display = 'block'
            })

            // 确保表格完整显示
            const tables = clonedDoc.querySelectorAll('.el-table')
            tables.forEach(table => {
              table.style.height = 'auto'
              table.style.overflow = 'visible'
              table.style.maxHeight = 'none'
            })

            // 确保表格行完整显示
            const tableRows = clonedDoc.querySelectorAll('.el-table__row')
            tableRows.forEach(row => {
              row.style.height = 'auto'
              row.style.overflow = 'visible'
            })
          }
        }

        console.log('开始生成截图，配置选项:', options)

        // 生成截图
        const canvas = await html2canvas.default(element, options)
        
        console.log('截图生成完成，画布尺寸:', {
          width: canvas.width,
          height: canvas.height
        })
        
        // 恢复原始样式
        element.style.height = originalStyles.height
        element.style.overflow = originalStyles.overflow
        element.style.maxHeight = originalStyles.maxHeight
        element.style.position = originalStyles.position
        
        // 恢复报表区域样式
        reportSections.forEach(section => {
          section.style.height = ''
          section.style.overflow = ''
          section.style.maxHeight = ''
        })
        
        // 转换为DataURL
        this.screenshotDataUrl = canvas.toDataURL('image/png', 1.0)
        
        // 显示预览对话框
        this.previewVisible = true
        
        this.$message.success('截图生成成功')
      } catch (error) {
        console.error('截图生成失败:', error)
        this.$message.error('截图生成失败: ' + error.message)
      } finally {
        this.screenshotLoading = false
      }
    },

    // 下载截图
    downloadScreenshot() {
      if (!this.screenshotDataUrl) {
        this.$message.error('没有可下载的图片')
        return
      }

      try {
        // 创建下载链接
        const link = document.createElement('a')
        link.download = `拓客活动报表_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.png`
        link.href = this.screenshotDataUrl
        
        // 触发下载
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        
        this.$message.success('图片下载成功')
      } catch (error) {
        console.error('下载失败:', error)
        this.$message.error('下载失败，请重试')
      }
    },

    // 关闭预览
    closePreview() {
      this.previewVisible = false
      this.screenshotDataUrl = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 12px;
  // background-color: #f5f5f5;
  min-height: 100vh;
  overflow-y: scroll;
  box-sizing: border-box;
}

.page-header {
  margin-bottom: 12px;
  
  h2 {
    margin: 0;
    color: #303133;
    font-size: 20px;
    font-weight: 500;
  }
}

.filter-container {
  background: white;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-section {
  background: white;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  background: #409EFF;
  color: white;
  padding: 10px 16px;
  
  h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
  }
}

.report-content {
  padding: 12px;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 20px 0;
  font-size: 14px;
}

// 统计概览样式
.statistics-overview {
  margin-bottom: 20px;
  
  .stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    height: 100px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      
      i {
        font-size: 24px;
        color: white;
      }
      
      &:nth-child(1) {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
    }
    
    .stat-content {
      flex: 1;
      
      .stat-number {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        line-height: 1;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: #909399;
        line-height: 1;
      }
    }
    
    // 不同卡片的图标背景色
    &:nth-child(1) .stat-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    
    &:nth-child(2) .stat-icon {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    &:nth-child(3) .stat-icon {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    &:nth-child(4) .stat-icon {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
  }
}

// 瀑布流容器
.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

// 团队数据样式 - 瀑布流版本
.store-card-waterfall {
  width: calc(25% - 9px); // 25%宽度减去gap的一半
  margin-bottom: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  
  // 响应式设计
  @media (max-width: 1200px) {
    width: calc(33.333% - 8px); // 3列
  }
  
  @media (max-width: 900px) {
    width: calc(50% - 6px); // 2列
  }
  
  @media (max-width: 600px) {
    width: 100%; // 1列
  }
}

// 原有的store-card样式保留，用于其他报表
.store-card {
  margin-bottom: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.store-header {
  background: #f8f9fa;
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7ed;
}

.store-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  
  h4 {
    margin: 0;
    color: #303133;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.store-summary {
  display: flex;
  gap: 8px;
  font-size: 10px;
  flex-shrink: 0;
}

.summary-text {
  color: #606266;
  
  .summary-value {
    font-weight: 500;
    color: #303133;
    
    &.rate-excellent {
      color: #67C23A;
    }
    
    &.rate-good {
      color: #409EFF;
    }
    
    &.rate-normal {
      color: #E6A23C;
    }
    
    &.rate-poor {
      color: #F56C6C;
    }
  }
}

.teams-container {
  padding: 8px;
}

.team-card {
  margin-bottom: 8px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.team-header {
  background: #f0f2f5;
  padding: 6px 8px;
  border-bottom: 1px solid #e4e7ed;
  
  .team-name {
    font-weight: 500;
    color: #606266;
    font-size: 13px;
  }
}

.team-members {
  padding: 6px;
}

.member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #f0f2f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.member-info {
  flex: 1;
  min-width: 0; // 防止内容溢出
  
  .member-name {
    font-weight: 500;
    color: #303133;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.member-stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0; // 防止统计信息被压缩
  
  span {
    font-size: 10px;
    white-space: nowrap;
    
    &.target {
      color: #606266;
    }
    
    &.count {
      color: #409EFF;
      font-weight: 500;
    }
    
    &.rate {
      font-weight: 500;
      
      &.rate-excellent {
        color: #67C23A;
      }
      
      &.rate-good {
        color: #409EFF;
      }
      
      &.rate-normal {
        color: #E6A23C;
      }
      
      &.rate-poor {
        color: #F56C6C;
      }
    }
  }
}

// 表格样式
.store-table, .person-table {
  .el-table {
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
  }
  
  .el-table th {
    padding: 8px 0;
    font-size: 12px;
  }
  
  .el-table td {
    padding: 6px 0;
    font-size: 12px;
  }
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #f0f2f5;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #409EFF;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 11px;
  color: #606266;
  min-width: 35px;
  text-align: right;
}

.ranking {
  font-weight: 500;
  font-size: 12px;
  
  &.ranking-top {
    color: #F56C6C;
  }
  
  &.ranking-good {
    color: #E6A23C;
  }
  
  &.ranking-normal {
    color: #606266;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-container {
    padding: 8px;
  }
  
  .waterfall-container {
    gap: 8px;
  }
  
  .store-card-waterfall {
    width: 100% !important; // 移动端强制单列
  }
  
  .statistics-overview {
    .stat-card {
      height: 80px;
      padding: 16px;
      
      .stat-icon {
        width: 50px;
        height: 50px;
        margin-right: 12px;
        
        i {
          font-size: 20px;
        }
      }
      
      .stat-content {
        .stat-number {
          font-size: 24px;
        }
        
        .stat-label {
          font-size: 12px;
        }
      }
    }
  }
  
  .store-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .store-summary {
    gap: 6px;
    font-size: 9px;
  }
  
  .member-stats {
    gap: 4px;
    
    span {
      font-size: 9px;
    }
  }
  
  .progress-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

// 报表内容容器样式
.report-sections-container {
  // 确保容器能完整显示所有内容
  min-height: 100vh;
  width: 100%;
}

// 截图预览样式
.screenshot-preview {
  text-align: center;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
  
  img {
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>