dtm_vue/src/views/sale/effect/index.vue

<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2><i class="el-icon-data-analysis"></i> 促销效果分析</h2>
      <p class="page-desc">深入分析促销活动对销售的影响，评估促销效果</p>
    </div>

    <div class="upload-toolbar">
      <div class="toolbar-left">
        <el-upload
          ref="upload"
          class="toolbar-upload"
          :limit="1"
          accept=".xlsx,.xls,.csv"
          :http-request="customUpload"
          :disabled="upload.isUploading"
          :on-change="handleFileChange"
          :before-upload="beforeUpload"
          :auto-upload="false"
          :show-file-list="false"
        >
          <el-button plain>上传文件</el-button>
        </el-upload>
        <el-button :loading="upload.isUploading" type="primary" @click="submitUpload">开始分析</el-button>
        <el-button type="success" :disabled="!hasResults" @click="exportResults">导出分析</el-button>
      </div>
      <div class="toolbar-status" v-if="upload.fileName">已上传：{{ upload.fileName }}</div>
      <div class="toolbar-status" v-else-if="upload.pendingFileName">已选择：{{ upload.pendingFileName }}</div>
      <div class="toolbar-status muted" v-else>未上传</div>
    </div>

    <!-- 关键指标卡片 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="12" :md="8" :lg="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">订单总数</p>
              <p class="stat-value">{{ summary.total_orders || 0 }}</p>
              <p class="stat-desc">分析期间</p>
            </div>
            <div class="stat-icon stat-icon-purple">
              <i class="el-icon-s-order"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">促销订单占比</p>
              <p class="stat-value">{{ summary.promotional_ratio ? summary.promotional_ratio.toFixed(1) : 0 }}%</p>
              <p class="stat-desc">促销订单数: {{ summary.promotional_orders || 0 }}</p>
            </div>
            <div class="stat-icon stat-icon-blue">
              <i class="el-icon-s-marketing"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">促销销售额</p>
              <p class="stat-value">{{ summary.promo_revenue || 0 }}</p>
              <p class="stat-desc">非促销: {{ summary.non_promo_revenue || 0 }}</p>
            </div>
            <div class="stat-icon stat-icon-teal">
              <i class="el-icon-s-finance"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">促销销量</p>
              <p class="stat-value">{{ summary.promo_quantity || 0 }}</p>
              <p class="stat-desc">非促销: {{ summary.non_promo_quantity || 0 }}</p>
            </div>
            <div class="stat-icon stat-icon-green">
              <i class="el-icon-s-goods"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">平均促销力度</p>
              <p class="stat-value">{{ summary.avg_promotion ? summary.avg_promotion.toFixed(1) : 0 }}%</p>
              <p class="stat-desc">折扣幅度</p>
            </div>
            <div class="stat-icon stat-icon-yellow">
              <i class="el-icon-s-printer"></i>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="4">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p class="stat-label">促销效果评分</p>
              <p class="stat-value">{{ effectEvaluation.score ? effectEvaluation.score.toFixed(1) : 0 }}</p>
              <p class="stat-desc stat-desc-success">{{ effectEvaluation.level || '需改进' }}</p>
            </div>
            <div class="stat-icon stat-icon-red">
              <i class="el-icon-star-on"></i>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 促销类型分析与时间趋势 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-pie-chart"></i> 促销类型分布</span>
            <span class="header-desc">按促销力度划分</span>
          </div>
          <div ref="promotionTypeChart" style="height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-data-line"></i> 促销效果时间趋势</span>
            <span class="header-desc">销量与销售额对比</span>
          </div>
          <div ref="timeTrendChart" style="height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 品类分析与SKU分析 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-s-grid"></i> 品类促销效果</span>
            <span class="header-desc">销量提升率</span>
          </div>
          <div ref="categoryEffectChart" style="height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-s-operation"></i> 促销效果评估</span>
            <span class="header-desc">综合评分与各项指标</span>
          </div>
          <div ref="effectEvaluationChart" style="height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { analyzeSaleEffectWithFile, getSaleEffectResults } from '@/api/client'
import { getToken } from '@/utils/auth'
import * as echarts from 'echarts'
require('echarts/theme/macarons')

export default {
  name: 'SaleEffectAnalysis',
  data() {
    return {
      // 图表实例
      promotionTypeChart: null,
      timeTrendChart: null,
      categoryEffectChart: null,
      effectEvaluationChart: null,
      // 数据
      results: {},
      // 计算属性数据
      summary: {},
      effectEvaluation: {},
      // 文件上传相关
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的文件
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_PYTHON_API + '/api/sale-effect/upload',
        // 文件名称
        fileName: '',
        // 已选择文件名称
        pendingFileName: '',
        // 是否忽略文件选择改变
        ignoreFileChange: false,
      }
    }
  },
  computed: {
    hasResults() {
      return Object.keys(this.results || {}).length > 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts()
    })
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.promotionTypeChart) {
      this.promotionTypeChart.dispose()
    }
    if (this.timeTrendChart) {
      this.timeTrendChart.dispose()
    }
    if (this.categoryEffectChart) {
      this.categoryEffectChart.dispose()
    }
    if (this.effectEvaluationChart) {
      this.effectEvaluationChart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    /** 文件选择改变处理 */
    handleFileChange(file, fileList) {
      if (this.upload.ignoreChange) return
      if (!fileList || fileList.length === 0) return
      if (!file || !file.raw) return

      this.upload.pendingFileName = file.name
      this.upload.fileName = ''
    },
    /** 文件上传前的校验 */
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
                      file.type === 'application/vnd.ms-excel' ||
                      file.type === 'text/csv' ||
                      file.name.endsWith('.xlsx') ||
                      file.name.endsWith('.xls') ||
                      file.name.endsWith('.csv')
      const isLt500M = file.size / 1024 / 1024 < 500

      if (!isExcel) {
        this.$modal.msgError('上传文件只能是 xlsx/xls/csv 格式!')
        return false
      }
      if (!isLt500M) {
        this.$modal.msgError('上传文件大小不能超过 500MB!')
        return false
      }
      return true
    },
    /** 自定义上传方法 */
    customUpload(options) {
      const file = options.file
      this.upload.isUploading = true
      analyzeSaleEffectWithFile(file).then(response => {
        this.upload.isUploading = false
        if (response && response.success) {
          this.$modal.msgSuccess('文件上传并分析成功')
          this.upload.fileName = this.upload.pendingFileName || file.name
          this.upload.pendingFileName = ''
          this.results = response.data || {}
          this.updateMetrics()
          this.$nextTick(() => {
            this.renderCharts()
          })
          options.onSuccess(response)
        } else {
          const message = (response && response.message) || '分析失败'
          this.$modal.msgError(message)
          options.onError(new Error(message))
        }
        if (this.$refs.upload) {
          this.upload.ignoreFileChange = true
          this.$refs.upload.clearFiles()
          this.$nextTick(() => {
            this.upload.ignoreFileChange = false
          })
        }
      }).catch(error => {
        this.upload.isUploading = false
        const errorMsg = (error && error.response && error.response.data && error.response.data.message) || error.message || '文件上传失败，请重试'
        this.$modal.msgError(errorMsg)
        options.onError(error)
      })
    },
    /** 提交上传文件 */
    submitUpload() {
      const fileList = this.$refs.upload.uploadFiles
      if (!fileList || fileList.length === 0) {
        this.$modal.msgError('请选择要上传的文件')
        return
      }
      this.$refs.upload.submit()
    },
    /** 获取促销效果分析结果 */
    getList() {
      getSaleEffectResults().then(response => {
        if (response && response.success && response.data) {
          this.results = response.data || {}
          this.updateMetrics()
          this.$nextTick(() => {
            this.renderCharts()
          })
        }
      }).catch(() => {
        this.results = {}
      })
    },
    /** 更新指标 */
    updateMetrics() {
      this.summary = this.results.summary || {}
      this.effectEvaluation = this.results.effect_evaluation || {}
    },
    /** 初始化图表 */
    initCharts() {
      if (this.$refs.promotionTypeChart) {
        this.promotionTypeChart = echarts.init(this.$refs.promotionTypeChart, 'macarons')
      }
      if (this.$refs.timeTrendChart) {
        this.timeTrendChart = echarts.init(this.$refs.timeTrendChart, 'macarons')
      }
      if (this.$refs.categoryEffectChart) {
        this.categoryEffectChart = echarts.init(this.$refs.categoryEffectChart, 'macarons')
      }
      if (this.$refs.effectEvaluationChart) {
        this.effectEvaluationChart = echarts.init(this.$refs.effectEvaluationChart, 'macarons')
      }
    },
    /** 渲染所有图表 */
    renderCharts() {
      // 1. 促销类型分布
      this.renderPromotionTypeChart()

      // 2. 时间趋势
      this.renderTimeTrendChart()

      // 3. 品类效果
      this.renderCategoryEffectChart()

      // 4. 效果评估
      this.renderEffectEvaluationChart()
    },
    /** 渲染促销类型分布 */
    renderPromotionTypeChart() {
      const promotionTypes = this.results.promotion_types || {}
      const types = promotionTypes.types || {}
      const typeList = promotionTypes.type_list || []

      const data = typeList.map(type => {
        const info = types[type] || {}
        return {
          name: type,
          value: info.order_count || 0
        }
      })

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: typeList
        },
        series: [
          {
            name: '促销类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}: {c}\n({d}%)'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            data: data,
            color: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444']
          }
        ]
      }

      if (this.promotionTypeChart) {
        this.promotionTypeChart.setOption(option)
      }
    },
    /** 渲染时间趋势 */
    renderTimeTrendChart() {
      const timeAnalysis = this.results.time_analysis || {}
      const dateSeries = timeAnalysis.date_series || []
      const promoQuantity = timeAnalysis.promo_quantity_series || []
      const nonPromoQuantity = timeAnalysis.non_promo_quantity_series || []
      const promoRevenue = timeAnalysis.promo_revenue_series || []
      const nonPromoRevenue = timeAnalysis.non_promo_revenue_series || []

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['促销销量', '非促销销量', '促销销售额', '非促销销售额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateSeries
        },
        yAxis: [
          {
            type: 'value',
            name: '销量',
            position: 'left'
          },
          {
            type: 'value',
            name: '销售额',
            position: 'right'
          }
        ],
        series: [
          {
            name: '促销销量',
            type: 'line',
            data: promoQuantity,
            itemStyle: {
              color: '#3b82f6'
            }
          },
          {
            name: '非促销销量',
            type: 'line',
            data: nonPromoQuantity,
            itemStyle: {
              color: '#94a3b8'
            }
          },
          {
            name: '促销销售额',
            type: 'line',
            yAxisIndex: 1,
            data: promoRevenue,
            itemStyle: {
              color: '#10b981'
            }
          },
          {
            name: '非促销销售额',
            type: 'line',
            yAxisIndex: 1,
            data: nonPromoRevenue,
            itemStyle: {
              color: '#f59e0b'
            }
          }
        ]
      }

      if (this.timeTrendChart) {
        this.timeTrendChart.setOption(option)
      }
    },
    /** 渲染品类效果 */
    renderCategoryEffectChart() {
      const categoryAnalysis = this.results.category_analysis || {}
      const categoryEffects = categoryAnalysis.category_effects || {}
      const categoryList = categoryAnalysis.category_list || []

      const categories = categoryList
      const quantityEffects = categories.map(category => {
        const effect = categoryEffects[category] || {}
        return effect.quantity_effect || 0
      })
      const revenueEffects = categories.map(category => {
        const effect = categoryEffects[category] || {}
        return effect.revenue_effect || 0
      })

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['销量提升率', '销售额提升率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: categories
        },
        yAxis: {
          type: 'value',
          name: '提升率(%)'
        },
        series: [
          {
            name: '销量提升率',
            type: 'bar',
            data: quantityEffects,
            itemStyle: {
              color: 'rgba(59,130,246,0.7)'
            }
          },
          {
            name: '销售额提升率',
            type: 'bar',
            data: revenueEffects,
            itemStyle: {
              color: 'rgba(16,185,129,0.7)'
            }
          }
        ]
      }

      if (this.categoryEffectChart) {
        this.categoryEffectChart.setOption(option)
      }
    },
    /** 渲染效果评估 */
    renderEffectEvaluationChart() {
      const evaluation = this.results.effect_evaluation || {}

      const data = [
        {
          name: '销量提升率',
          value: evaluation.quantity_lift || 0
        },
        {
          name: '销售额提升率',
          value: evaluation.revenue_lift || 0
        },
        {
          name: '促销占比',
          value: evaluation.promo_ratio || 0
        },
        {
          name: '平均促销力度',
          value: evaluation.avg_promotion || 0
        },
        {
          name: '综合评分',
          value: evaluation.score || 0
        }
      ]

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name: '数值'
        },
        yAxis: {
          type: 'category',
          data: data.map(item => item.name)
        },
        series: [
          {
            name: '指标值',
            type: 'bar',
            data: data.map(item => item.value),
            itemStyle: {
              color: function(params) {
                const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
                return colors[params.dataIndex % colors.length]
              }
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}'
            }
          }
        ]
      }

      if (this.effectEvaluationChart) {
        this.effectEvaluationChart.setOption(option)
      }
    },
    /** 窗口大小变化处理 */
    handleResize() {
      if (this.promotionTypeChart) {
        this.promotionTypeChart.resize()
      }
      if (this.timeTrendChart) {
        this.timeTrendChart.resize()
      }
      if (this.categoryEffectChart) {
        this.categoryEffectChart.resize()
      }
      if (this.effectEvaluationChart) {
        this.effectEvaluationChart.resize()
      }
    },
    formatUploadDate(date) {
      const d = date instanceof Date ? date : new Date(date)
      if (Number.isNaN(d.getTime())) return ''
      const y = d.getFullYear()
      const m = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      return `${y}-${m}-${day}`
    },
    exportResults() {
      if (!this.hasResults) {
        this.$modal.msgError('暂无可导出的分析结果')
        return
      }
      const payload = JSON.stringify(this.results || {}, null, 2)
      const blob = new Blob([payload], { type: 'application/json;charset=utf-8' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `sale_effect_results_${this.formatUploadDate(new Date())}.json`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;

  h2 {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;

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

  .page-desc {
    color: #909399;
    font-size: 14px;
    margin: 0;
  }
}

.mb-20 {
  margin-bottom: 20px;
}

.upload-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-upload ::v-deep .el-upload {
  display: inline-flex;
}

.toolbar-status {
  font-size: 13px;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 6px;
  padding: 6px 10px;
}

.toolbar-status.muted {
  color: #6b7280;
  background: #f8fafc;
  border-color: #e2e8f0;
}

::v-deep .el-card {
  border-radius: 8px;
  border: 1px solid #e6eaf2;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

::v-deep .el-card__header {
  border-bottom: 1px solid #eef2f7;
}

.stat-card {
  .stat-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .stat-info {
      flex: 1;

      .stat-label {
        font-size: 12px;
        color: #909399;
        margin: 0 0 8px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        margin: 0 0 8px 0;
      }

      .stat-desc {
        font-size: 12px;
        color: #909399;
        margin: 0;

        &.stat-desc-success {
          color: #67C23A;
        }
      }
    }

    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;

      &.stat-icon-purple {
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
        color: #6366f1;
      }

      &.stat-icon-blue {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #3b82f6;
      }

      &.stat-icon-teal {
        background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
        color: #14b8a6;
      }

      &.stat-icon-green {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #10b981;
      }

      &.stat-icon-yellow {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #f59e0b;
      }

      &.stat-icon-red {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #ef4444;
      }
    }
  }
}

::v-deep .el-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-desc {
    font-size: 12px;
    color: #909399;
    font-weight: normal;
  }
}
</style>