提交

src/views/portraitModel/components/repurchaseAnalysis.vue

@@ -12,7 +12,7 @@
         >https://zhuanlan.zhihu.com/p/649393225</a
       >
       <br />
-      
+
       <a
         href="https://baijiahao.baidu.com/s?id=1777456500129450397&wfr=spider&for=pc"
         target="_blank"
@@ -33,9 +33,7 @@
         rel="noopener noreferrer"
         >https://www.woshipm.com/data-analysis/5236102.html</a
       >
-      <div v-html="knowledgeHtml">
+      <div v-html="knowledgeHtml"></div>
-
-      </div>
     </div>
     <div v-if="!knowledgeFlag">
       <div class="caseBack">
@@ -59,13 +57,13 @@
           >
             <el-table-column label="订单ID" align="center" prop="id">
             </el-table-column>
-            <el-table-column label="客户ID" align="center" prop="goods1">
+            <el-table-column label="客户ID" align="center" prop="cid">
             </el-table-column>
-            <el-table-column label="购买金额" align="center" prop="goods2">
+            <el-table-column label="购买金额" align="center" prop="amount">
             </el-table-column>
-            <el-table-column label="购买商品" align="center" prop="goods3">
+            <el-table-column label="购买商品" align="center" prop="goods">
             </el-table-column>
-            <el-table-column label="订单日期" align="center" prop="goods3">
+            <el-table-column label="订单日期" align="center" prop="date">
             </el-table-column>
           </el-table>
           <div class="download">下载数据</div>
@@ -95,20 +93,20 @@
               backgroundColor: '#6A7DE9!important',
             }"
           >
-            <el-table-column label="订单ID" align="center" prop="name">
+            <el-table-column label="订单ID" align="center" prop="id">
             </el-table-column>
             <el-table-column
               label="客户ID"
               align="center"
-              prop="name"
+              prop="cid"
               width="100"
             >
             </el-table-column>
-            <el-table-column label="购买金额" align="center" prop="name">
+            <el-table-column label="购买金额" align="center" prop="amount">
             </el-table-column>
-            <el-table-column label="购买商品" align="center" prop="name">
+            <el-table-column label="购买商品" align="center" prop="goods">
             </el-table-column>
-            <el-table-column label="订单日期" align="center" prop="name">
+            <el-table-column label="订单日期" align="center" prop="date">
             </el-table-column>
             <el-table-column
               label="首购订单&复购订单"
@@ -136,7 +134,7 @@
             </el-table-column>
           </el-table>
 
-          <div class="submit">提交</div>
+          <div class="submit" @click="step1Submit">提交</div>
         </div>
       </div>
       <div class="line"></div>
@@ -346,7 +344,7 @@
               <span>商品复购排行</span>
             </div>
             <el-table
-              :data="step1Data"
+              :data="step5DataTable2"
               style="width: 270px"
               border
               :header-cell-style="{
@@ -371,10 +369,10 @@
                     size="small"
                   >
                     <el-option
-                      :label="item"
+                      :label="item.label"
-                      :value="item"
+                      :value="item.value"
-                      v-for="item in 10"
+                      v-for="item in productList"
-                      :key="item"
+                      :key="item.value"
                     />
                     <!-- <el-option :label="item" :value="item" />
                 <el-option label="C" value="C" />
@@ -390,7 +388,7 @@
               <span>每种商品复购的用户情况（用户习惯）</span>
             </div>
             <el-table
-              :data="step1Data"
+              :data="step5DataTable3"
               style="width: 370px"
               border
               :header-cell-style="{
@@ -410,22 +408,20 @@
                 label="复购率最高的用户"
                 align="center"
                 prop="name"
-                width="100"
+                width="130"
               >
-              </el-table-column>
-              <el-table-column label="复购次数" align="center" prop="amount">
                 <template #default="scope">
                   <el-select
-                    v-model="scope.row.params"
+                    v-model="scope.row.params1"
                     placeholder="请选择"
                     style="width: 95px"
                     size="small"
                   >
                     <el-option
-                      :label="item"
+                      :label="item.label"
-                      :value="item"
+                      :value="item.value"
-                      v-for="item in 10"
+                      v-for="item in idList"
-                      :key="item"
+                      :key="item.value"
                     />
                     <!-- <el-option :label="item" :value="item" />
                 <el-option label="C" value="C" />
@@ -433,6 +429,17 @@
                   </el-select>
                 </template>
               </el-table-column>
+              <el-table-column label="复购次数" align="center" prop="amount">
+                <template #default="scope">
+                  <el-input
+                    v-model="scope.row.params2"
+                    placeholder="请输入"
+                    style="width: 55px"
+                    size="small"
+                  ></el-input
+                  ><span>次</span>
+                </template>
+              </el-table-column>
             </el-table>
           </div>
           <div class="submit">提交</div>
@@ -542,6 +549,8 @@ const knowledgeHtml = ref(
   `<p style="text-align: left;">复购率分析是评估消费者对某一品牌或产品忠诚度的重要指标，它反映了消费者满意度和重复购买的行为。通过复购率分析，企业可以更好地了解消费者的购买行为和需求，从而制定更精准的营销策略和产品优化方向。</p><p style="text-align: left;">复购率的计算有两种主要方法：</p><p style="text-align: left;">按客户计算：一定时间内再次购买的客户的人数除以购买的总人数。这种方法不考虑客户购买的次数，只关注是否有重复购买行为。</p><p style="text-align: left;">按订单计算：一定时间内再次购买的客户的订单数除以购买的总订单数。这种方法会统计多次购买的客户订单，区分每次购买的订单。</p><p style="text-align: left;">推荐企业采取按客户计算的复购率算法，因为它更能反映消费者的忠诚度。然而，按订单计算的复购率可能会因为多次购买的客户产生的订单数较多而显得更高。</p><p style="text-align: left;">复购率分析的重要性体现在以下几个方面：</p><p style="text-align: left;">反映客户忠诚度：高复购率意味着消费者对产品的认可度高，愿意再次购买，从而反映出较高的客户忠诚度。</p><p style="text-align: left;">预测销售趋势：通过分析复购率的变化趋势，企业可以预测产品的未来表现，做出更明智的选品决策。</p><p style="text-align: left;">指导选品策略：结合其他指标如销售额、转化率等，对复购率进行综合分析，可以帮助企业筛选出具有潜力的爆款产品。</p><p style="text-align: left;">为了进行复购率分析，企业可以采用以下步骤：</p><p style="text-align: left;">1.收集数据：收集包括订单ID、订单日期、客户名称等指标的数据。</p><p style="text-align: left;">2.计算复购率：根据收集的数据计算一个月内每个用户的购买次数、统计一个月内的购买人数、统计每个月内多次购买的人数并计算月复购率。</p><p style="text-align: left;">3.可视化展示：通过可视化图表的形式展示复购率数据，发现数据规律和问题，如复购时间间隔分析、商品复购分析等。</p><p style="text-align: left;">4.结论分析：根据复购率和用户总数的变化趋势，分析用户黏性的健康度，制定相应的运营策略。</p><p style="text-align: left;">通过复购率分析，企业不仅可以评估现有客户的忠诚度和满意度，还可以预测未来的销售趋势，为产品优化和营销策略提供有力支持。</p>`
 );
 const list = ref(["-"]);
+const step1Error = ref(0);
+const step2Error = ref(0);
 const combinationValue1 = ref("");
 const combinationValue2 = ref("");
 const knowledgeFlag = ref(false);
@@ -555,52 +564,286 @@ const thirtyNumIn = ref(0);
 const thirtyNumOut = ref(0);
 const step1Data = ref([
   {
-    name: "A",
+    id: "dd001",
-    amount: "2300",
+    cid: "A",
+    amount: "189",
+    goods: "衬衫",
+    date: "2024-02-02",
+  },
+  {
+    id: "dd017",
+    cid: "A",
+    amount: "39",
+    goods: "睡衣",
+    date: "2024-02-24",
+  },
+  {
+    id: "dd003",
+    cid: "B",
+    amount: "99",
+    goods: "裤子",
+    date: "2024-02-04",
+  },
+  {
+    id: "dd008",
+    cid: "B",
+    amount: "143",
+    goods: "外套",
+    date: "2024-02-14",
+  },
+  {
+    id: "dd013",
+    cid: "B",
+    amount: "59",
+    goods: "衬衫",
+    date: "2024-02-22",
+  },
+  {
+    id: "dd006",
+    cid: "C",
+    amount: "141",
+    goods: "皮鞋",
+    date: "2024-02-12",
+  },
+  {
+    id: "dd011",
+    cid: "C",
+    amount: "191",
+    goods: "外套",
+    date: "2024-02-16",
+  },
+  {
+    id: "dd015",
+    cid: "C",
+    amount: "94",
+    goods: "睡衣",
+    date: "2024-02-23",
+  },
+  {
+    id: "dd019",
+    cid: "C",
+    amount: "186",
+    goods: "睡衣",
+    date: "2024-02-28",
+  },
+  {
+    id: "dd007",
+    cid: "D",
+    amount: "138",
+    goods: "裤子",
+    date: "2024-02-14",
+  },
+  {
+    id: "dd010",
+    cid: "D",
+    amount: "150",
+    goods: "裤子",
+    date: "2024-02-16",
+  },
+  {
+    id: "dd012",
+    cid: "D",
+    amount: "137",
+    goods: "裤子",
+    date: "2024-02-20",
   },
   {
-    name: "B",
+    id: "dd014",
-    amount: "2300",
+    cid: "D",
+    amount: "173",
+    goods: "衬衫",
+    date: "2024-02-22",
   },
   {
-    name: "C",
+    id: "dd018",
-    amount: "2300",
+    cid: "D",
+    amount: "99",
+    goods: "外套",
+    date: "2024-02-26",
   },
   {
-    name: "D",
+    id: "dd002",
-    amount: "2300",
+    cid: "E",
+    amount: "101",
+    goods: "短袖",
+    date: "2024-02-02",
+  },
+  {
+    id: "dd005",
+    cid: "F",
+    amount: "111",
+    goods: "外套",
+    date: "2024-02-10",
+  },
+  {
+    id: "dd009",
+    cid: "G",
+    amount: "171",
+    goods: "帽子",
+    date: "2024-02-15",
+  },
+  {
+    id: "dd004",
+    cid: "H",
+    amount: "176",
+    goods: "内衣",
+    date: "2024-02-07",
+  },
+  {
+    id: "dd020",
+    cid: "J",
+    amount: "52",
+    goods: "短袖",
+    date: "2024-02-28",
+  },
+  {
+    id: "dd016",
+    cid: "K",
+    amount: "82",
+    goods: "短袖",
+    date: "2024-02-24",
   },
 ]);
 const fileTable1 = ref([
   {
-    id: "A",
+    id: "dd001",
-    goods1: "200",
+    cid: "A",
-    goods2: "2023.02.01",
+    amount: "189",
-    goods3: "3",
+    goods: "衬衫",
+    date: "2024-02-02",
+  },
+  {
+    id: "dd002",
+    cid: "E",
+    amount: "101",
+    goods: "短袖",
+    date: "2024-02-02",
+  },
+  {
+    id: "dd003",
+    cid: "B",
+    amount: "99",
+    goods: "裤子",
+    date: "2024-02-04",
+  },
+  {
+    id: "dd004",
+    cid: "H",
+    amount: "176",
+    goods: "内衣",
+    date: "2024-02-07",
+  },
+  {
+    id: "dd005",
+    cid: "F",
+    amount: "111",
+    goods: "外套",
+    date: "2024-02-10",
+  },
+  {
+    id: "dd006",
+    cid: "C",
+    amount: "141",
+    goods: "皮鞋",
+    date: "2024-02-12",
+  },
+  {
+    id: "dd007",
+    cid: "D",
+    amount: "138",
+    goods: "裤子",
+    date: "2024-02-14",
+  },
+  {
+    id: "dd008",
+    cid: "B",
+    amount: "143",
+    goods: "外套",
+    date: "2024-02-14",
+  },
+  {
+    id: "dd009",
+    cid: "G",
+    amount: "171",
+    goods: "帽子",
+    date: "2024-02-15",
+  },
+  {
+    id: "dd010",
+    cid: "D",
+    amount: "150",
+    goods: "裤子",
+    date: "2024-02-16",
+  },
+  {
+    id: "dd011",
+    cid: "C",
+    amount: "191",
+    goods: "外套",
+    date: "2024-02-16",
+  },
+  {
+    id: "dd012",
+    cid: "D",
+    amount: "137",
+    goods: "裤子",
+    date: "2024-02-20",
+  },
+  {
+    id: "dd013",
+    cid: "B",
+    amount: "59",
+    goods: "衬衫",
+    date: "2024-02-22",
+  },
+  {
+    id: "dd014",
+    cid: "D",
+    amount: "173",
+    goods: "衬衫",
+    date: "2024-02-22",
   },
   {
-    id: "B",
+    id: "dd015",
-    goods1: "300",
+    cid: "C",
-    goods2: "2023.02.02",
+    amount: "94",
-    goods3: "3",
+    goods: "睡衣",
+    date: "2024-02-23",
   },
   {
-    id: "A",
+    id: "dd016",
-    goods1: "2023.02.03",
+    cid: "K",
-    goods2: "200",
+    amount: "82",
-    goods3: "3",
+    goods: "短袖",
+    date: "2024-02-24",
   },
   {
-    id: "D",
+    id: "dd017",
-    goods1: "2023.02.04",
+    cid: "A",
-    goods2: "150",
+    amount: "39",
-    goods3: "3",
+    goods: "睡衣",
+    date: "2024-02-24",
   },
   {
-    id: "C",
+    id: "dd018",
-    goods1: "2023.02.05",
+    cid: "D",
-    goods2: "100",
+    amount: "99",
-    goods3: "3",
+    goods: "外套",
+    date: "2024-02-26",
+  },
+  {
+    id: "dd019",
+    cid: "C",
+    amount: "186",
+    goods: "睡衣",
+    date: "2024-02-28",
+  },
+  {
+    id: "dd020",
+    cid: "J",
+    amount: "52",
+    goods: "短袖",
+    date: "2024-02-28",
   },
 ]);
 const step2Data = ref([
@@ -944,6 +1187,120 @@ const rulesTable = ref([
     data4: "低",
   },
 ]);
+const step5DataTable2 = ref([
+  {
+    name: "1",
+  },
+  {
+    name: "2",
+  },
+  {
+    name: "3",
+  },
+  {
+    name: "4",
+  },
+  {
+    name: "5",
+  },
+]);
+const productList = ref([
+  {
+    value: "短袖",
+    label: "短袖",
+  },
+  {
+    value: "衬衫",
+    label: "衬衫",
+  },
+  {
+    value: "外套",
+    label: "外套",
+  },
+  {
+    value: "睡衣",
+    label: "睡衣",
+  },
+  {
+    value: "裤子",
+    label: "裤子",
+  },
+  {
+    value: "帽子",
+    label: "帽子",
+  },
+  {
+    value: "皮鞋",
+    label: "皮鞋",
+  },
+  {
+    value: "内衣",
+    label: "内衣",
+  },
+]);
+const step5DataTable3 = ref([
+  {
+    name: "短袖",
+  },
+  {
+    name: "衬衫",
+  },
+  {
+    name: "外套",
+  },
+  {
+    name: "睡衣",
+  },
+  {
+    name: "裤子",
+  },
+]);
+const idList = ref([
+  {
+    value: "无",
+    label: "无",
+  },
+  {
+    value: "A",
+    label: "A",
+  },
+  {
+    value: "B",
+    label: "B",
+  },
+  {
+    value: "C",
+    label: "C",
+  },
+  {
+    value: "D",
+    label: "D",
+  },
+  {
+    value: "E",
+    label: "E",
+  },
+  {
+    value: "F",
+    label: "F",
+  },
+  {
+    value: "G",
+    label: "G",
+  },
+  {
+    value: "J",
+    label: "J",
+  },
+  {
+    value: "K",
+    label: "K",
+  },
+  {
+    value: "H",
+    label: "H",
+  },
+]);
 const typeData = ref([
   {
     data1: "A类商品",
@@ -1113,6 +1470,17 @@ const draw = () => {
 
   option && myChart.setOption(option);
 };
+const step1Submit = () => {
+  step1Error.value = 0;
+  for (let i in step1Data.value) {
+    // console.log(fileTable1.value[i]);
+    if (!step1Data.value[i].params) {
+      proxy.$modal.msgError("请先完成所有填空");
+      return;
+    }
+  }
+  console.log(1);
+};
 </script>
 
 <style scoped lang="scss">
@@ -1122,9 +1490,9 @@ const draw = () => {
   border: 1px solid #0452c6;
   padding: 10px;
   //   opacity: 0.5;
-a:hover{
+  a:hover {
     text-decoration: underline;
-}
+  }
   .import {
     display: flex;
     font-size: 15px;