dianshang-qianduan/src/views/test/index.vue

<template>
  <div class="test app-container">
    <div class="handren">
      <div class="left">
        <el-button style="min-width: 222px; padding-left: 57px !important">指标评估法-熵值法</el-button>
      </div>
      <div class="right">
        <el-button @click="dialogVisible = true" type="primary" id="brtn">任务背景与目标</el-button>
        <popModel :showModel="dialogVisible" title="任务背景:" @closePop="dialogVisible = false">
          <template v-slot:content>
            <p style="font-size: 1rem">
              电商产品发布渠道的评估是一个多维度、综合性的过程，需要综合考虑多个因素来确保选择的渠道能够最大化地提升产品的曝光度、转化率和用户参与度。
              <br />
              <br />
              关键评估指标
              <br />

              ‌用户规模‌：
              <br />

              评估渠道所覆盖的潜在用户数量，用户规模越大，意味着产品的潜在曝光机会越多。
              <br />

              ‌用户质量‌：
              <br />

              分析渠道用户的活跃度、留存率、付费意愿等，高质量的用户更有可能转化为忠实客户和产生持续价值。
              <br />

              ‌转化率‌：
              <br />

              关注渠道带来的用户转化为实际购买或完成目标行为的比例，高转化率意味着渠道的有效性更高。
              <br />

              ‌投资回报率（ROI）‌：
              <br />

              计算在渠道上的投入与产出比，ROI越高，说明渠道的性价比越高。
              <br />

              ‌用户参与度‌：
              <br />

              衡量用户在渠道中的互动行为，如浏览、点击、评论等，高参与度有助于提升品牌知名度和用户粘性。
              <br />

              ‌渠道成本‌：
              <br />

              考虑在渠道上投入的成本，包括广告费用、时间成本等，成本越低，渠道的盈利空间越大。
              <br />
              <br />
              任务目标：
              <br />
              <br />

              使用熵值法，根据曝光量、点击量、广告费用、订单金额等数据，评估各投放渠道的优劣，为下一步重点渠道加大投放提供决策依据。
              <br />
            </p>
          </template>
        </popModel>
      </div>
    </div>
    <p>
      在电商产品投放测试中，熵值法可以用于评估不同投放策略或广告内容的效果。
      <br />
      <br />
      通过收集多个反映投放效果的关键指标数据，如点击率、转化率、订单成交量等，利用熵值法计算各指标的权重，从而确定哪些指标对投放效果的影响更大。这有助于优化投放策略，提高广告效果和投资回报率。
    </p>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>实验实训</span>
    </div>
    <p>任务背景：某仿真花店铺计划推出新品花束，因商品特性，计划在淘宝、抖音、拼多多三个渠道进行产品投放，初步投放测试数据如下，请评估上述渠道优劣，为后续重点投放提供决策依据。</p>
    <el-table
      :data="tableData"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center" />
      <el-table-column prop="exposure" label="曝光量" align="center" />
      <el-table-column prop="clicks" label="点击量" align="center" />
      <el-table-column prop="cost" label="花费" align="center"></el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center"></el-table-column>
    </el-table>
    <p>数据标准化：</p>
    <p>
      对于正向指标（点击量、曝光量、订单金额），我们采用极差标准化方法：
      <br />
      标准化公式为：Yij = (Xij - min(Xi)) / (max(Xi) - min(Xi)) 例如，某渠道的点击量极差标准化值=（某渠道点击量-点击量最小值）/（点击量最大值-点击量最小值）
      <br />
      对于负向指标（数值越低越好），标准化公式为：Yij = (max(Xi) - Xij) / (max(Xi) - min(Xi))。 例如，某渠道的广告费用极差标准化值=（广告费最大值-某渠道广告费用）/（广告费用最大值-广告费用最小值）
    </p>
    <p>数据标准化结果如下所示：</p>
    <el-table
      :data="tableData1"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center" />
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>计算各指标在各方案下的比值：计算第j项指标在第i个样本中占该指标的比重，即pij = Yij / ΣYij。 例如，某渠道点击量比重=某渠道点击量极差标准化值/各渠道点击量极差标准化值之和</p>
    <p>计算每个指标在每个渠道中的比重：</p>
    <el-table
      :data="tableData2"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center" />
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>计算各指标的信息熵：根据信息熵的定义，计算各指标的信息熵Ej。公式为：Ej = -k * Σ(pij * ln(pij))，其中k = 1 / ln(m)，m为样本数量。</p>
    <p>例如，我们评估了三种渠道，那么公式中m为3，例如点击量信息熵=-k*（各渠道点击量比重乘以各渠道点击量比重的自然对数之和）</p>
    <p>计算每个指标的信息熵：</p>
    <el-table
      :data="tableData3"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>确定各指标的权重：根据信息熵计算各指标的权重。权重计算公式为：wj = (1 - Ej) / Σ(1 - Ej)。其中Ej源于上一步计算，为各指标信息熵。</p>
    <p>计算每个指标的权重：</p>
    <el-table
      :data="tableData4"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="exposureData" label="曝光量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.exposureData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="clickData" label="点击量" align="center">
        <template #default="{ row }">
          <el-input v-model="row.clickData" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="adCost" label="花费" align="center">
        <template #default="{ row }">
          <el-input v-model="row.adCost" placeholder=""></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额" align="center">
        <template #default="{ row }">
          <el-input v-model="row.orderAmount" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>综合评分：根据权重和指标数据，计算广告效果的综合评分。公式为：Zi = Σ(wj * Yij)。 例如，某渠道综合评分等于渠道各指标权重乘以渠道各指标极差标准值的和。</p>
    <el-table
      :data="tableData5"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
      :span-method="arraySpanMethod"
    >
      <el-table-column prop="channel" label="渠道" align="center"></el-table-column>
      <el-table-column prop="keywords" label="综合评分" align="center">
        <template #default="{ row }">
          <el-input v-model="row.keywords" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
    <p>请根据评分情况分析各渠道优劣，分析熵值法优缺点。</p>
    <el-input :autosize="{ minRows: 11, maxRows: 11 }" type="textarea" v-model="scenePromotion" placeholder="" />
    <p>上述实训也可以用Python代码实现，可点击查看示例代码，在在线Python环境中运行代码，得出结果。</p>
    <el-button @click="runResultShow = true">查看代码</el-button>
    <!-- <el-button @click="go">跳转到Python在线编程环境</el-button> -->
    <div class="taskfooter">
      <el-button @click="submitTask">提交任务</el-button>
      <el-button @click="resetTask">重新实训</el-button>
    </div>
  </div>
  <pop-model :showModel="runResultShow" title="设置代码" @closePop="closeCode">
    <template v-slot:content>
      <div>
        <codemirror :code="code"></codemirror>
      </div>
    </template>
  </pop-model>
</template>
<script setup>
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as analysisAPI from "@/api/market-demand-mining.js";
import codemirror from "@/components/codemirror/index.vue";
import popModel from "@/views/components/popModal.vue";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const code = `import numpy as np
import pandas as pd
# 数据
data = {
    '渠道': ['淘宝', '抖音', '拼多多'],
    '点击量': [952, 161, 239],
    '曝光量': [25379, 4719, 24202],
    '花费': [3617, 1213, 425],
    '订单金额': [12293, 5206, 880]
}

df = pd.DataFrame(data)

df.set_index('渠道', inplace=True)

# 数据标准化

def normalize_data(df):

    normalized_df = df.copy()

    for column in df.columns:

        max_val = df[column].max()

        min_val = df[column].min()

        if max_val == min_val:

            normalized_df[column] = 0

        else:

            normalized_df[column] = (df[column] - min_val) / (max_val - min_val)

    return normalized_df

normalized_df = normalize_data(df)

# 计算各指标在各方案下的比值

def calculate_pij(normalized_df):

    pij = normalized_df.copy()

    for column in pij.columns:

        column_sum = pij[column].sum()

        pij[column] = pij[column] / column_sum

    return pij

pij = calculate_pij(normalized_df)

# 计算各指标的信息熵

def calculate_entropy(pij, m):

    k = 1 / np.log(m)

    entropy = {}

    for column in pij.columns:

        entropy_sum = 0

        for value in pij[column]:

            if value > 0:

                entropy_sum += value * np.log(value)

        entropy[column] = -k * entropy_sum

    return entropy

m = len(pij)

entropy = calculate_entropy(pij, m)

# 计算各指标的权重

def calculate_weights(entropy):
    weights = {}
    total_entropy = sum(1 - value for value in entropy.values())
    for column, value in entropy.items():
        weights[column] = (1 - value) / total_entropy
    return weights
weights = calculate_weights(entropy)
# 计算综合评分
def calculate_comprehensive_score(normalized_df, weights):
    comprehensive_score = pd.Series(index=normalized_df.index, dtype=float)
    for index, row in normalized_df.iterrows():
        score = 0

        for column, weight in weights.items():

            score += weight * row[column]

        comprehensive_score[index] = score

    return comprehensive_score

comprehensive_score = calculate_comprehensive_score(normalized_df, weights)

# 输出结果

print("标准化后的数据：")

print(normalized_df)

print("各指标的信息熵：")
print(entropy)
print("各指标的权重：")
print(weights)

print("综合评分：")

print(comprehensive_score)`;
const runResultShow = ref(false);
const tableData = [
  {
    channel: "淘宝",
    exposure: 25379,
    clicks: 952,
    cost: 3617,
    orderAmount: 12293,
  },
  {
    channel: "抖音",
    exposure: 4719,
    clicks: 161,
    cost: 1213,
    orderAmount: 5206,
  },
  {
    channel: "拼多多",
    exposure: 24202,
    clicks: 459,
    cost: 625,
    orderAmount: 1280,
  },
];
const tableData1 = ref([
  {
    channel: "淘宝",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "抖音",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "拼多多",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData2 = ref([
  {
    channel: "淘宝",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "抖音",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
  {
    channel: "拼多多",
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData3 = ref([
  {
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData4 = ref([
  {
    exposureData: "",
    clickData: "",
    adCost: "",
    orderAmount: "",
  },
]);
const tableData5 = ref([
  {
    channel: "淘宝",
    keywords: "",
  },
  {
    channel: "抖音",
    keywords: "",
  },
  {
    channel: "拼多多",
    keywords: "",
  },
]);
const scenePromotion = ref("");
function checkEmptyValues(tables) {
  const result = {
    hasEmpty: false,
    emptyItems: [],
  };
  tables.forEach((table, tableIndex) => {
    if (!Array.isArray(table)) return;
    table.forEach((row, rowIndex) => {
      const emptyFields = Object.entries(row)
        .filter(([key, value]) => value === "" || value === null || value === undefined)
        .map(([key]) => key);
      if (emptyFields.length > 0) {
        result.hasEmpty = true;
        result.emptyItems.push({
          tableIndex: tableIndex + 1,
          rowIndex: rowIndex + 1,
          channel: row.channel || "无渠道字段",
          emptyFields,
        });
      }
    });
  });
  return result;
}
const closeCode = () => {
  runResultShow.value = false;
};
function mapData(
  sourceArray,
  fieldMapping = {
    exposureData: "exposureData",
    clickData: "clickData",
    adCost: "adCost",
    orderAmount: "orderAmount",
  }
) {
  return sourceArray.map((item) => {
    const mappedItem = {};
    for (const [targetKey, sourceKey] of Object.entries(fieldMapping)) {
      mappedItem[targetKey] = item[sourceKey];
    }
    return mappedItem;
  });
}
const submitTask = () => {
  const tablesToCheck = [tableData1.value, tableData2.value, tableData3.value, tableData4.value, tableData5.value];
  const checkResult = checkEmptyValues(tablesToCheck);
  if (checkResult.hasEmpty) {
    proxy.$modal.msgWarning("请完善数据后提交");
  }
  let params = {
    userId: userStore.userInfo.userId,
    dataInfoList: mapData(tableData1.value),
    radioInfoList: mapData(tableData2.value),
    messageInfoList: mapData(tableData3.value),
    eventInfoList: mapData(tableData4.value),
    keywords: tableData5.value.map((item) => item.keywords).join(","),
    scenePromotion: scenePromotion.value,
  };
  analysisAPI.releaseChannelSubmit(params).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
  });
};
// 回显数据
const loadTaskInfo = () => {
  analysisAPI.releaseChannelEcho({ userId: userStore.userInfo.userId }).then((res) => {
    if (!res.data) return;
    res.data?.dataInfoList.forEach((item, index) => {
      tableData1.value[index].exposureData = item.exposureData;
      tableData1.value[index].clickData = item.clickData;
      tableData1.value[index].adCost = item.adCost;
      tableData1.value[index].orderAmount = item.orderAmount;
    });
    res.data?.radioInfoList.forEach((item, index) => {
      tableData2.value[index].exposureData = item.exposureData;
      tableData2.value[index].clickData = item.clickData;
      tableData2.value[index].adCost = item.adCost;
      tableData2.value[index].orderAmount = item.orderAmount;
    });
    tableData3.value = res.data.messageInfoList;
    tableData4.value = res.data.eventInfoList;
    res.data?.keywords.split(",").forEach((item, index) => {
      tableData5.value[index].keywords = item;
    });
    scenePromotion.value = res.data.scenePromotion;
  });
};
// 重新实训
const resetTask = () => {
  analysisAPI.productReleaseReTrain({ userId: userStore.userInfo.userId, module: "发布渠道评估" }).then((res) => {
    proxy.$modal.msgSuccess("重新实训成功");
    scenePromotion.value = "";
    clearData([tableData1.value, tableData2.value, tableData3.value, tableData4.value, tableData5.value]);
  });
};
// 清空数据函数
const clearData = (tables) => {
  tables.forEach((table) => {
    table.forEach((row) => {
      Object.keys(row).forEach((key) => {
        if (key !== "channel") {
          row[key] = "";
        }
      });
    });
  });
};
const go = () => {
  window.open("https://jrdsj.sztzjy.com:8000/user/zy84cf311/lab");
};
onMounted(() => {
  loadTaskInfo();
});
</script>
<style lang="scss" scoped>
.test {
  background: #ffffff;
}
</style>