提交

src/views/portraitModel/components/repurchaseAnalysis.vue

@@ -272,18 +272,146 @@
       <div class="caseBack">
         <div class="title">
           <img src="@/assets/images/步骤.png" alt="" />
-          <span>第五步，制定营销策略</span>
+          <span>第五步，商品复购分析</span>
         </div>
         <span style="line-height: 25px; font-size: 14px">
-          通过购物篮分析，能给实际销售带来的价值：
+          商品的复购情况分析十分重要，可以通过复购次数较多的商品，分析用户习惯和商品特征，分析维度包括：<br />
+
+          每种商品的复购次数、排行榜;<br />
+
+          每种商品复购的用户情况，每个用户复购的次数等;<br />
+
+          结合品类、销量、价格区间、评价等等多种维度，进行细化分析等。
         </span>
-        <div class="customerType" style="width: 887px">
+        <div class="generateBtn">生成商品复购分析表</div>
+        <div style="margin-top: 10px; display: flex">
+          <el-table
+            :data="step5Data"
+            style="width: 690px"
+            border
+            :header-cell-style="{
+              color: '#fff',
+              fontSize: '14px',
+              backgroundColor: '#6A7DE9!important',
+            }"
+          >
+            <el-table-column label="订单ID" align="center" prop="data1">
+            </el-table-column>
+            <el-table-column label="客户ID" align="center" prop="data2">
+            </el-table-column>
+            <el-table-column label="购买金额" align="center" prop="data3">
+            </el-table-column>
+            <el-table-column label="购买商品" align="center" prop="data4">
+            </el-table-column>
+            <el-table-column label="订单日期" align="center" prop="data5">
+            </el-table-column>
+            <el-table-column label="商品复购次数" align="center" prop="data6">
+            </el-table-column>
+          </el-table>
+          <div style="margin-left: 10px; margin-top: -44px">
+            <div class="title" style="margin-bottom: 10px">
+              <img src="@/assets/images/步骤.png" alt="" />
+              <span>商品复购排行</span>
+            </div>
+            <el-table
+              :data="step1Data"
+              style="width: 270px"
+              border
+              :header-cell-style="{
+                color: '#fff',
+                fontSize: '14px',
+                backgroundColor: '#6A7DE9!important',
+              }"
+            >
+              <el-table-column
+                label="排名"
+                align="center"
+                prop="name"
+                width="100"
+              >
+              </el-table-column>
+              <el-table-column label="商品" align="center" prop="amount">
+                <template #default="scope">
+                  <el-select
+                    v-model="scope.row.params"
+                    placeholder="请选择"
+                    style="width: 95px"
+                    size="small"
+                  >
+                    <el-option
+                      :label="item"
+                      :value="item"
+                      v-for="item in 10"
+                      :key="item"
+                    />
+                    <!-- <el-option :label="item" :value="item" />
+                <el-option label="C" value="C" />
+                <el-option label="D" value="D" /> -->
+                  </el-select>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="margin-left: 10px; margin-top: -44px">
+            <div class="title" style="margin-bottom: 10px">
+              <img src="@/assets/images/步骤.png" alt="" />
+              <span>每种商品复购的用户情况（用户习惯）</span>
+            </div>
+            <el-table
+              :data="step1Data"
+              style="width: 370px"
+              border
+              :header-cell-style="{
+                color: '#fff',
+                fontSize: '14px',
+                backgroundColor: '#6A7DE9!important',
+              }"
+            >
+              <el-table-column
+                label="商品"
+                align="center"
+                prop="name"
+                width="100"
+              >
+              </el-table-column>
+              <el-table-column
+                label="复购率最高的用户"
+                align="center"
+                prop="name"
+                width="100"
+              >
+              </el-table-column>
+              <el-table-column label="复购次数" align="center" prop="amount">
+                <template #default="scope">
+                  <el-select
+                    v-model="scope.row.params"
+                    placeholder="请选择"
+                    style="width: 95px"
+                    size="small"
+                  >
+                    <el-option
+                      :label="item"
+                      :value="item"
+                      v-for="item in 10"
+                      :key="item"
+                    />
+                    <!-- <el-option :label="item" :value="item" />
+                <el-option label="C" value="C" />
+                <el-option label="D" value="D" /> -->
+                  </el-select>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="submit">提交</div>
+        </div>
+        <!-- <div class="customerType" style="width: 887px">
           <img src="@/assets/images/促销.png" alt="" />
           <span
             >优化商品配置：可以厘清哪些商品可以一起购买,关联商品可以优化陈列方式、进行促销等;</span
           >
-        </div>
+        </div> -->
-        <div class="customerType" style="width: 887px">
+        <!-- <div class="customerType" style="width: 887px">
           <img src="@/assets/images/需求.png" alt="" />
           <span
             >了解客户需求：分析出顾客的购买习惯，顾客购买商品的时间、地点等;
@@ -294,6 +422,38 @@
           <span
             >分析销售趋势：利用数据仓库对品种和库存的趋势进行分析,选定需要补充的商品,研究顾客购买趋势,分析季节性购买模式,确定降价商品。</span
           >
+        </div> -->
+      </div>
+      <div class="line"></div>
+      <div class="caseBack">
+        <div class="title">
+          <img src="@/assets/images/步骤.png" alt="" />
+          <span>第六步，商品价值分析</span>
+        </div>
+        <span style="line-height: 25px; font-size: 14px">
+          从商品的角度出发，看一个商品的综合价值，可以使用四象限图（波士顿矩阵）来查看商品价值分析。销量和复购率分别作为横纵轴，以平均值为分割线，将所有商品类型划分到四个象限内。<br />
+          对于新兴产品：需要着重拓展市场<br />
+          对于低回购产品：需要检查是否产品有质量问题，导致用户单次购买多但不会回购<br />
+          对于问题产品：着重关注
+        </span>
+        <div style="margin-top: 10px; display: flex">
+          <img src="@/assets/images/u4330.png" alt="" />
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="caseBack">
+        <div class="title">
+          <img src="@/assets/images/步骤.png" alt="" />
+          <span>第七步，复购深层分析 </span>
+        </div>
+        <span style="line-height: 25px; font-size: 14px">
+          从商品的角度出发，看一个商品的综合价值，可以使用四象限图（波士顿矩阵）来查看商品价值分析。销量和复购率分别作为横纵轴，以平均值为分割线，将所有商品类型划分到四个象限内。<br />
+          对于新兴产品：需要着重拓展市场<br />
+          对于低回购产品：需要检查是否产品有质量问题，导致用户单次购买多但不会回购<br />
+          对于问题产品：着重关注
+        </span>
+        <div style="margin-top: 10px; display: flex">
+          <img src="@/assets/images/u4330.png" alt="" />
         </div>
       </div>
     </div>
@@ -476,7 +636,164 @@ const step4Data = ref([
 ]);
 const step5Data = ref([
   {
-    title: "平均值",
+    data1: "dd003",
+    data2: "B",
+    data3: "99",
+    data4: "裤子",
+    data5: "2024-02-04",
+    data6: "1",
+  },
+  {
+    data1: "dd007",
+    data2: "D",
+    data3: "138",
+    data4: "裤子",
+    data5: "2024-02-14",
+    data6: "2",
+  },
+  {
+    data1: "dd010",
+    data2: "D",
+    data3: "150",
+    data4: "裤子",
+    data5: "2024-02-16",
+    data6: "3",
+  },
+  {
+    data1: "dd012",
+    data2: "D",
+    data3: "137",
+    data4: "裤子",
+    data5: "2024-02-20",
+    data6: "4",
+  },
+  {
+    data1: "dd017",
+    data2: "A",
+    data3: "39",
+    data4: "睡衣",
+    data5: "2024-02-24",
+    data6: "1",
+  },
+  {
+    data1: "dd015",
+    data2: "C",
+    data3: "94",
+    data4: "睡衣",
+    data5: "2024-02-23",
+    data6: "2",
+  },
+  {
+    data1: "dd019",
+    data2: "C",
+    data3: "186",
+    data4: "睡衣",
+    data5: "2024-02-28",
+    data6: "3",
+  },
+  {
+    data1: "dd008",
+    data2: "B",
+    data3: "143",
+    data4: "外套",
+    data5: "2024-02-14",
+    data6: "1",
+  },
+  {
+    data1: "dd011",
+    data2: "C",
+    data3: "191",
+    data4: "外套",
+    data5: "2024-02-16",
+    data6: "2",
+  },
+  {
+    data1: "dd018",
+    data2: "D",
+    data3: "99",
+    data4: "外套",
+    data5: "2024-02-26",
+    data6: "3",
+  },
+  {
+    data1: "dd005",
+    data2: "F",
+    data3: "111",
+    data4: "外套",
+    data5: "2024-02-10",
+    data6: "4",
+  },
+  {
+    data1: "dd001",
+    data2: "A",
+    data3: "189",
+    data4: "衬衫",
+    data5: "2024-02-02",
+    data6: "1",
+  },
+  {
+    data1: "dd013",
+    data2: "B",
+    data3: "59",
+    data4: "衬衫",
+    data5: "2024-02-22",
+    data6: "2",
+  },
+  {
+    data1: "dd014",
+    data2: "D",
+    data3: "173",
+    data4: "衬衫",
+    data5: "2024-02-22",
+    data6: "3",
+  },
+  {
+    data1: "dd002",
+    data2: "E",
+    data3: "101",
+    data4: "短袖",
+    data5: "2024-02-02",
+    data6: "1",
+  },
+  {
+    data1: "dd020",
+    data2: "J",
+    data3: "52",
+    data4: "短袖",
+    data5: "2024-02-28",
+    data6: "2",
+  },
+  {
+    data1: "dd016",
+    data2: "K",
+    data3: "82",
+    data4: "短袖",
+    data5: "2024-02-24",
+    data6: "3",
+  },
+  {
+    data1: "dd009",
+    data2: "G",
+    data3: "171",
+    data4: "帽子",
+    data5: "2024-02-15",
+    data6: "1",
+  },
+  {
+    data1: "dd006",
+    data2: "C",
+    data3: "141",
+    data4: "皮鞋",
+    data5: "2024-02-12",
+    data6: "1",
+  },
+  {
+    data1: "dd004",
+    data2: "H",
+    data3: "176",
+    data4: "内衣",
+    data5: "2024-02-07",
+    data6: "1",
   },
 ]);
 const step6Data = ref([
@@ -680,8 +997,11 @@ const draw = () => {
 
   option = {
     title: {
-      text: "Referer of a Website",
+      text: "时间间隔",
       left: "center",
+      textStyle: {
+        color: "#fff",
+      },
     },
     tooltip: {
       trigger: "item",
@@ -689,18 +1009,21 @@ const draw = () => {
     legend: {
       orient: "vertical",
       left: "left",
+      textStyle: {
+        color: "#fff",
+      },
     },
     series: [
       {
-        name: "Access From",
+        name: "时间间隔",
         type: "pie",
         radius: "50%",
         data: [
-          { value: 1048, name: "Search Engine" },
+          { value: sevenNum.value, name: "7天内" },
-          { value: 735, name: "Direct" },
+          { value: fiftyNum.value, name: "15天内" },
-          { value: 580, name: "Email" },
+          { value: thirtyNumIn.value, name: "30天内" },
-          { value: 484, name: "Union Ads" },
+          { value: thirtyNumOut.value, name: "30天以上" },
-          { value: 300, name: "Video Ads" },
+          //   { value: 300, name: "Video Ads" },
         ],
         emphasis: {
           itemStyle: {
@@ -846,6 +1169,16 @@ const draw = () => {
     font-size: 14px;
     cursor: pointer;
   }
+  .generateBtn {
+    width: 185px;
+    height: 31px;
+    background: url("@/assets/images/生成统计.png");
+    text-align: center;
+    line-height: 31px;
+    color: #000;
+    font-size: 14px;
+    cursor: pointer;
+  }
 }
 ::v-deep .el-table tr {
   background-color: #002652 !important;