dianshang-qianduan/src/views/demand/environment.vue

<template>
  <div class="environment app-container">
    <div class="handren">
      <div class="left">
        <el-button>赫芬达尔指数</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">
              2025年，中国电商市场呈现‌存量竞争与增量创新并存‌的特征。‌市场规模‌持续扩张，全年预计突破40万亿元，但增速趋缓，传统实物电商增速降至6.8%，增量主要依赖直播电商（GMV占比28%）、社交电商及跨境电商（出口额占比7.8%）等新模式。
              <br />
              <br />
              竞争格局‌两极分化：
              <br />
              ‌传统巨头‌（阿里、京东、拼多多）通过下沉市场与供应链优化巩固优势（合计市占率88%），如拼多多低价策略、京东县域物流72小时达；
              <br />
              ‌新兴势力‌快速崛起，抖音、快手以“内容+电商”提升用户渗透率至35%，跨境电商平台TEMU、SHEIN通过低价与本土化运营抢占海外市场（TEMU月访问量4.47亿次）。
              <br />
              <br />
              任务目标：
              <br />
              <br />
              在电商市场竞争激烈的情况下，想要切入某个细分领域，请使用赫芬达尔指数进行竞争环境分析，挖掘市场需求，为电商运营决策提供依据。。
              <br />
              <br />
              ①某细分领域店铺销售数据：店铺名称，店铺某商品销售额，计算赫芬达尔指数。
              <br />
              <br />
              ②根据计算结果分析竞争环境。
            </p>
          </template>
        </popModel>
      </div>
    </div>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>一、知识学习</span>
    </div>
    <p>赫芬达尔指数（Herfindahl-Hirschman Index，简称HHI）是一种用于衡量市场集中度的综合指标，广泛应用于经济学和金融学领域，尤其在分析和评估市场竞争程度。 在电商领域，赫芬达尔指数可以用于分析各商家的市场竞争状况。通过计算HHI值，可以了解市场上商家的规模分布和市场份额情况，进而判断市场的竞争程度和垄断程度。</p>
    <p>计算公式如下所示：</p>

    <div class="box">
      <img class="ss" src="../../assets/images/u427.png" alt="" />
      <div class="box1"></div>
    </div>
    <p>
      根据HHI的值，市场集中度可以分为以下几类：
      <br />
      赫芬达尔指数 (HHI)：值越接近 1，表示市场集中度越高，竞争程度越低；值越接近 0，表示市场集中度越低，竞争程度越高。
    </p>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>二、实验实训</span>
    </div>
    <p>
      任务要求：请根据淘宝母婴行业下纸尿裤品类相关2024年数据，计算纸尿裤市场赫芬达尔指数，评估淘宝电商平台纸尿裤市场竞争情况。
      <br />
      <span style="font-size: 12px">(数据选取自排名前30的纸尿裤品牌，这30个品牌合计市场份额占总市场份额近90%，因此我们假设这30个品牌代表整个淘宝电商平台纸尿裤市场，其余品牌市场份额较小暂不计入)</span>
    </p>
    <p>
      <el-button @click="onClick" type="primary" style="margin-right: 10px">数据下载</el-button>
      <el-button @click="go">跳转到Python编程界面</el-button>
    </p>
    <el-table
      :data="brandSalesRanking2024"
      height="500px"
      style="width: 80%"
      border
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column label="‌排名‌" align="center" prop="rank"></el-table-column>
      <el-table-column label="‌品牌名称‌" align="center" prop="brand">
        <template #default="scope">
          <span>{{ scope.row.brand }}({{ scope.row.englishName }})</span>
        </template>
      </el-table-column>
      <el-table-column label="2024年销售额（亿元）" align="center" prop="sales"></el-table-column>
    </el-table>
    <codemirror :code="code2"></codemirror>
    <div class="online">
      <span>母婴行业纸尿裤品类的赫芬达尔指数为：</span>
      <el-input style="width: 100px" type="text" v-model="formInline.input1" />
    </div>
    <p>请根据计算结果分析母婴行业纸尿裤市场竞争环境。</p>
    <el-input v-model="formInline.textarea2" :autosize="{ minRows: 6, maxRows: 8 }" type="textarea" placeholder="" />
    <div class="taskfooter">
      <el-button @click="submitTask">提交任务</el-button>
      <el-button @click="reTraining">重新实训</el-button>
    </div>
  </div>
</template>
<script setup>
import { getToken, setToken, removeToken, setUserInfo, removeUserInfo, getUserInfo } from "@/utils/auth";
import popModel from "@/views/components/popModal.vue";
import codemirror from "@/components/codemirror/index.vue";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
import * as analysisAPI from "@/api/market-demand-mining.js";
import { onMounted } from "vue";
const brandSalesRanking2024 = [
  { rank: 1, brand: "帮宝适", englishName: "Pampers", sales: 60.5 },
  { rank: 2, brand: "Babycare", sales: 42.5 },
  { rank: 3, brand: "好奇", englishName: "HUGGIES", sales: 37.5 },
  { rank: 4, brand: "Moony", englishName: "尤妮佳", sales: 23.5 },
  { rank: 5, brand: "大王", englishName: "GOO-N", sales: 19 },
  { rank: 6, brand: "碧芭宝贝", englishName: "Beaba", sales: 16.5 },
  { rank: 7, brand: "雀氏", englishName: "Chiaus", sales: 13 },
  { rank: 8, brand: "花王", englishName: "Merries", sales: 11 },
  { rank: 9, brand: "安儿乐", englishName: "Anerle", sales: 9 },
  { rank: 10, brand: "菲比", englishName: "Fitti", sales: 7 },
  { rank: 11, brand: "露安适", englishName: "LELCH", sales: 3.85 },
  { rank: 12, brand: "茵茵", englishName: "Cojin", sales: 3.4 },
  { rank: 13, brand: "爹地宝贝", englishName: "DaddyBaby", sales: 3.15 },
  { rank: 14, brand: "舒比奇", englishName: "Suitsky", sales: 2.75 },
  { rank: 15, brand: "爱得利", englishName: "Nory", sales: 2.5 },
  { rank: 16, brand: "十月结晶", sales: 2.25 },
  { rank: 17, brand: "巴布豆", englishName: "Bobdog", sales: 2.05 },
  { rank: 18, brand: "小鹿叮叮", englishName: "DeerBaby", sales: 1.75 },
  { rank: 19, brand: "Q路MO", sales: 1.5 },
  { rank: 20, brand: "妈咪宝贝", sales: 1.25 },
  { rank: 21, brand: "宗宝宝", englishName: "Qinbaobao", sales: 1.15 },
  { rank: 22, brand: "德祐", sales: 1.05 },
  { rank: 23, brand: "康贝", englishName: "Combi", sales: 0.95 },
  { rank: 24, brand: "南极人", sales: 0.85 },
  { rank: 25, brand: "子初", sales: 0.75 },
  { rank: 26, brand: "可优比", sales: 0.65 },
  { rank: 27, brand: "优尼佳", englishName: "UNICHARM", sales: 0.6 },
  { rank: 28, brand: "努比", englishName: "Nuby", sales: 0.5 },
  { rank: 29, brand: "好安适", sales: 0.4 },
  { rank: 30, brand: "米菲", sales: 0.4 },
];
const formInline = ref({
  input1: "",
  textarea2: "",
});
const code2 = `
import pandas as pd
# 读取数据
df = pd.read_excel(r'/dataResource/赫芬达尔指数数据.xlsx')
# 查看数据
print("原始数据：")
print(df.head())
# 计算总销售额
total_sales = df['2024年销售额（亿元）'].sum()
# 计算每个店铺的市场份额
df['市场份额'] = df['2024年销售额（亿元）'] / total_sales
# 计算赫芬达尔指数
hhi = (df['市场份额'] ** 2).sum()
print("计算结果：")
print(f'赫芬达尔指数 (HHI): {hhi}')`;
// 提交任务
const submitTask = () => {
  console.log(userStore.userInfo, getUserInfo(), "userStore.userInfo");
  if (!formInline.value.input1) return proxy.$modal.msgWarning("请先完成实验实训!");
  analysisAPI
    .competitionEnvironmentSubmit({
      userId: userStore.userInfo.userId,
      answer: Number(formInline.value.input1),
      context: formInline.value.textarea2.trim(),
    })
    .then((res) => {
      proxy.$modal.msgSuccess("提交成功");
    });
};
const reTraining = () => {
  analysisAPI
    .industryDemandAnalysisReTrain({
      userId: userStore.userInfo.userId,
      module: "竞争环境分析",
    })
    .then((res) => {
      // 清空数据
      formInline.value.input1 = "";
      formInline.value.textarea2 = "";
      proxy.$modal.msgSuccess("重新实训成功");
    });
};
// 回显竞争环境分析
const loadTaskInfo = () => {
  analysisAPI
    .competitionEnvironmentEcho({
      userId: userStore.userInfo.userId,
    })
    .then((res) => {
      if (!res.data) return;
      formInline.value.input1 = res.data?.answer;
      formInline.value.textarea2 = res.data?.context;
    });
};
// 下载数据
const onClick = () => {
  analysisAPI
    .competitionEnvironmentDownload({
      userId: userStore.userInfo.userId,
      module: "竞争环境分析",
    })
    .then((res) => {
      //  数据下载
      const blob = new Blob([res], {
        type: "application/vnd.ms-excel",
      });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "赫芬达尔指数数据.xlsx");
      document.body.appendChild(link);
      link.click();
      proxy.$modal.msgSuccess("数据下载成功");
    });
};
const go=()=>{
  window.open('https://jrdsj.sztzjy.com:8000/user/zy84cf311/lab')
}
onMounted(() => {
  loadTaskInfo();
});
</script>
<style lang='scss'  scoped>
.app-container {
  background: #ffffff;

  .box {
    position: relative;
    width: 40%;
    .box1 {
      position: absolute;
      bottom: 0;
      right: 35%;
      width: 200px;
      height: 40px;
      background: #ffffff;
    }
  }
}
</style>