dianshang-qianduan/src/views/assessment/five.vue

<template>
  <div class="five">
    <el-scrollbar :height="`${height - 100}px`">
      <TrainingIntro title="五维四率模型">
        <template #background>
          <p>直播电商需要拆解从曝光到成交的完整链路，定位直播间运营问题并制定优化方案。</p>
        </template>
        <template #goal>
          <p>掌握五维四率模型各指标的计算方法，并根据计算结果进行分析诊断。</p>
        </template>
      </TrainingIntro>
      <div class="training-step-area">

      <div class="caseBacktitle">
        <img src="@/assets/images/步骤.png" alt="" />
        <span>任务目标</span>
      </div>
      <p>五维四率是直播电商中用于分析流量转化效率的核心模型，通过拆解用户从“曝光”到“成交”的完整链路，定位直播间运营问题。用户需要掌握该模型各个指标的计算方法，并根据计算结果进行分析诊断。</p>
      <div class="caseBacktitle">
        <img src="@/assets/images/步骤.png" alt="" />
        <span>任务背景</span>
      </div>
      <div class="df">
        <div class="left">
          <div class="caseBacktitle">
            <span>五维（用户行为维度）</span>
          </div>
          <p style="padding-left: 10px">
            直播间曝光人数：用户刷到直播间的总人数。
            <br />
            直播间进入人数（场观）：实际进入直播间的用户数。
            <br />
            商品曝光人数：看到商品弹窗或购物车的用户数。
            <br />
            商品点击人数：点击商品详情页的用户数。
            <br />
            成交人数：完成支付的用户数
            <br />
          </p>
          <div class="caseBacktitle">
            <span>四率（转化率指标）</span>
          </div>
          <p style="padding-left: 10px">
            曝光进入率（观看点击率）：场观/曝光人数，反映直播间封面、标题吸引力。
            <br />
            商品曝光率：商品曝光人数/场观，衡量主播引导兴趣的能力。
            <br />
            商品点击率：商品点击人数/商品曝光人数，体现商品主图、价格吸引力。
            <br />
            点击支付率（转化率）：成交人数/商品点击人数，反映产品性价比与主播促单能力
            <br />
          </p>
        </div>
        <div class="right">
          <p>请采用五维四率模型对以下为某女装直播间单场数据进行分析：</p>
          <el-table
            :data="liveRoomDataWithConversion"
            border
            style="width: 80%"
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="维度" align="center" prop="dimension"></el-table-column>
            <el-table-column label="数值" align="center" prop="value"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="caseBacktitle">
        <span>任务要求</span>
      </div>
      <div class="caseBacktitle">
        <span>任务1：计算转化率</span>
      </div>
      <el-table
        :data="liveRoomConversionData"
        border
        style="width: 60%"
        :header-cell-style="{
          color: '#fff',
          fontSize: '14px',
          backgroundColor: '#6A7DE9!important',
        }"
      >
        <el-table-column label="维度" align="center" prop="dimension"></el-table-column>
        <el-table-column label="数值" align="center" prop="value"></el-table-column>
        <el-table-column label="计算方式" align="center" prop="value">
          <template #default="scope">
            <div class="df">
              <el-input v-model="scope.row.numerator"></el-input>
              <span class="p10">/</span>
              <el-input v-model="scope.row.denominator"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="转换率" align="center" prop="value">
          <template #default="scope">
            <div class="df">
              <span style="display: block; width: 9vw">{{ scope.row.label }}</span>
              <el-input v-model="scope.row.conversionRate">
                <template #suffix>%</template>
              </el-input>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="caseBacktitle">
        <span>任务2：比较转换率的高低水平</span>
      </div>
      <el-table
        :data="conversionBenchmark"
        border
        style="width: 40%"
        :header-cell-style="{
          color: '#fff',
          fontSize: '14px',
          backgroundColor: '#6A7DE9!important',
        }"
      >
        <el-table-column label="转化率" align="center" prop="metric">
          <template #default="scope">
            <span>{{ scope.row.metric }}: {{ scope.row.currentRate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="行业参考值" align="center" prop="industryRange"></el-table-column>
        <el-table-column label="高低水平" align="center" prop="value">
          <template #default="scope">
            <el-select v-model="scope.row.value" placeholder="">
              <el-option value="高" label="高"></el-option>
              <el-option value="低" label="低"></el-option>
              <el-option value="中性" label="中性"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div class="caseBacktitle">
        <span>任务3：结果分析</span>
      </div>
      <p style="padding-left: 10px">
        1.高点击低成交
        <br />
        原因：价格偏高、详情页信息不足、主播逼单话术弱。
        <br />
        优化：增加限时折扣（如“前10单立减50元”）、优化商品好评展示。
        <br />
        <br />
        2.高曝光低进入率
        <br />
        原因：直播间画面模糊、标题无吸引力、人群标签不精准。
        <br />
        优化：使用高清灯光设备、标题突出核心福利（如“9.9元秒杀”）。
        <br />
        <br />
        3.商品曝光率高但点击率低
        <br />
        原因：商品主图不清晰、价格未展示、主播引导不足。
        <br />
        优化：更换直播间实拍主图、增加“点击查看今日底价”话术
        <br />
      </p>
      </div>
    </el-scrollbar>
    <div class="taskfooter">
      <el-button @click="submitTask">提交任务</el-button>
      <el-button @click="resetTask">重新实训</el-button>
    </div>
  </div>
</template>
<script setup>


import TrainingLegacyActions from "@/views/components/TrainingLegacyActions.vue";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingIntro from '@/views/components/TrainingIntro.vue';
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as analysisAPI from "@/api/market-demand-mining.js";
const { proxy } = getCurrentInstance();
const height = ref(800);
const liveRoomDataWithConversion = [
  { dimension: "直播间曝光人数", value: 5709 },
  { dimension: "直播间观看人数", value: 1359 },
  { dimension: "商品曝光人数", value: 1251 },
  { dimension: "商品点击人数", value: 275 },
  { dimension: "成交人数", value: 10 },
];
const conversionBenchmark = ref([
  {
    metric: "曝光进入率",
    currentRate: "23.8%",
    industryRange: "15%-20%",
    value: "",
    isOptimal: true,
  },
  {
    metric: "商品曝光率",
    currentRate: "92%",
    industryRange: "80%-90%",
    value: "",
    isOptimal: true,
  },
  {
    metric: "商品点击率",
    currentRate: "22%",
    industryRange: "25%-30%",
    value: "",
  },
  {
    metric: "点击支付率",
    currentRate: "3.6%",
    industryRange: "5%-10%",
    value: "",
  },
  {
    metric: "总转化率",
    currentRate: "0.18%",
    industryRange: "依类目而定",
    value: "",
    isSpecialCase: true,
  },
]);
const liveRoomConversionData = ref([
  {
    dimension: "直播间曝光人数",
    value: 5709,
    numerator: null, // 观看人数作为分子
    denominator: null, // 曝光人数作为分母
    conversionRate:null,
    formula: "1359 ÷ 5709 × 100%",
    label: "曝光进入率:",
  },
  {
    dimension: "直播间观看人数",
    value: 1359,
    numerator: null, // 商品曝光人数作为分子
    denominator: null, // 观看人数作为分母
    conversionRate: null,
    formula: "1251 ÷ 1359 × 100%",
    label: "商品曝光率:",
  },
  {
    dimension: "商品曝光人数",
    value: 1251,
    numerator: null, // 商品点击人数作为分子
    denominator: null, // 商品曝光人数作为分母
    conversionRate: null,
    formula: "275 ÷ 1251 × 100%",
    label: "商品点击率:",
  },
  {
    dimension: "商品点击人数",
    value: 275,
    numerator: null, // 成交人数作为分子
    denominator: null, // 商品点击人数作为分母
    conversionRate: null,
    formula: "10 ÷ 275 × 100%",
    label: "点击支付率:",
  },
  {
    dimension: "成交人数",
    value: 10,
    numerator: null, // 成交人数作为分子
    denominator: null, // 总曝光人数作为分母
    conversionRate: null,
    formula: "10 ÷ 5709 × 100%",
    isTotal: true, // 标记为总转化率
    label: "总转化率：",
  },
]);
const liveConversionFields = {
  // 直播间曝光人数
  liveExposureNumCalc: 0, // 分子（如实际曝光人数）
  liveExposureDenom: 0, // 分母（如潜在曝光总量）
  liveExposureRate: 0, // 转化率（liveExposureNumCalc / liveExposureDenom）
  // 直播间观看人数
  liveViewersCalc: 0, // 分子（如实际观看人数）
  liveViewersDenom: 0, // 分母（通常等于liveExposureNumCalc）
  liveViewersRate: 0, // 转化率（liveViewersCalc / liveViewersDenom）
  // 商品曝光人数
  productExposureCalc: 0, // 分子（如实际商品曝光人数）
  productExposureDenom: 0, // 分母（通常等于liveViewersCalc）
  productExposureRate: 0, // 转化率（productExposureCalc / productExposureDenom）
  // 商品点击人数
  productClickCalc: 0, // 分子（如实际点击人数）
  productClickDenom: 0, // 分母（通常等于productExposureCalc）
  productClickRate: 0, // 转化率（productClickCalc / productClickDenom）
  // 成交人数
  orderCalc: 0, // 分子（如实际成交人数）
  orderDenom: 0, // 分母（通常等于productClickCalc）
  orderRate: 0, // 转化率（orderCalc / orderDenom）
};
// 高低水平判断
const liveConversionFields1 = {
  曝光进入率: "exposureEntryLevel",
  商品曝光率: "productExposureRatioLevel",
  商品点击率: "productClickRatioLevel",
  点击支付率: "clickPaymentRatioLevel",
  总转化率: "totalConversionLevel",
};
const levelMappings = {
  高: "优秀",
  中: "中等",
  低: "较差",
  优秀: "优秀",
};
const mappings = [
  ["liveExposureNumCalc", "liveExposureDenom", "liveExposureRate"],
  ["liveViewersCalc", "liveViewersDenom", "liveViewersRate"],
  ["productExposureCalc", "productExposureDenom", "productExposureRate"],
  ["productClickCalc", "productClickDenom", "productClickRate"],
  ["orderCalc", "orderDenom", "orderRate"],
];
const submitConversionRate = () => {
  if (liveRoomConversionData.value.some((item) => !item.conversionRate || !item.numerator || !item.denominator)) {
    proxy.$modal.msgWarning("请填写完整的数据");
  }
};
function getElementHeight(selector) {
  const el = document.querySelector(selector);
  if (el) {
    // 获取元素的实际高度，包括 padding 但不包括 margin
    return el.scrollHeight;
  } else {
    console.warn(`找不到元素：${selector}`);
    return 0;
  }
}
const submitTask = () => {
  let params = {};
  liveRoomConversionData.value.forEach((item, index) => {
    if (index < mappings.length) {
      const [numKey, denomKey, rateKey] = mappings[index];
      liveConversionFields[numKey] = item.numerator;
      liveConversionFields[denomKey] = item.denominator;
      liveConversionFields[rateKey] = parseFloat(item.conversionRate); // 转换成数字百分比
    }
  });
  const result = {};
  conversionBenchmark.value.forEach((item) => {
    const fieldKey = liveConversionFields1[item.metric]; // 中文转英文
    if (fieldKey) {
      result[fieldKey] = item.value;
    }
  });
  params = {
    ...liveConversionFields,
    ...result,
    userId: userStore.userInfo.userId,
  };
  analysisAPI.productProblemDiagnosisSubmit(params).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
  });
};
const resetTask = () => {
  analysisAPI.productProblemDiagnosisReTrain({ userId: userStore.userInfo.userId }).then((res) => {
    proxy.$modal.msgSuccess("重新实训成功");
    liveRoomConversionData.value.forEach((item) => {
      item.numerator = '';
      item.denominator ='';
      item.conversionRate ='';
    });
    conversionBenchmark.value.forEach((item) => {
      item.value = '';
    })
  });
};
// 回显方法
const echoConversionRate = () => {
  analysisAPI.productProblemDiagnosisEcho({ userId: userStore.userInfo.userId }).then((res) => {
    if(!res.data) return;
    mappings.forEach(([numKey, denomKey, rateKey, label], index) => {
      const numerator = res.data[numKey];
      const denominator = res.data[denomKey];
      const rate = res.data[rateKey];
      const item = liveRoomConversionData.value[index];
      if (item) {
        item.value = numerator;
        item.numerator = numerator;
        item.denominator = denominator;
        item.conversionRate = rate.toFixed(2) + "%";
      }
    });
    conversionBenchmark.value.forEach((item) => {
      const fieldKey = liveConversionFields1[item.metric];
      console.log(res.data[fieldKey]);
      if (fieldKey) {
        item.value = res.data[fieldKey];
      }
    });
  });
};
onMounted(() => {
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    height.value = getElementHeight(".five");
    console.log(height.value);
  });
  echoConversionRate();
});
defineExpose({ submitTask, resetTask });
</script>
<style lang='scss'  scoped>
.five {
  height: calc(100vh - 230px);
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  padding-bottom: 0;
  .df {
    display: flex;
    gap: 30px;
    .right {
      width: 50%;
    }
  }
}
</style>