提交

src/api/portraitModel.js

@@ -0,0 +1,33 @@
+import request from "@/utils/request";
+//条件查询用户表信息
+export function getUserTableData(data) {
+  return request({
+    url: "/api/userprofile/getBaseInfoBySelect",
+    method: "get",
+    params: data,
+  });
+}
+//数据下载-RFM分析
+export function downloadDataByRFM(data) {
+  return request({
+    url: "/api/downDataByUserPortrait/analysisByRfmDown",
+    method: "get",
+    params: data,
+  });
+}
+//数据下载-ABC分析
+export function downloadDataByABC(data) {
+  return request({
+    url: "/api/downDataByUserPortrait/analysisByPareto",
+    method: "get",
+    params: data,
+  });
+}
+//数据下载-波士顿矩阵分析
+export function downloadDataByBoston(data) {
+    return request({
+      url: "/api/downDataByUserPortrait/bostonMatrixAnalysisData",
+      method: "get",
+      params: data,
+    });
+  }

src/utils/request.js

@@ -15,7 +15,8 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
-  baseURL: import.meta.env.VITE_APP_BASE_API,
+  // baseURL: import.meta.env.VITE_APP_BASE_API,
+  baseURL:'http://192.168.2.6:9868/',
   // 超时
   timeout: 10000
 })

src/views/portraitModel/components/viscosityAnalysis.vue

@@ -6,10 +6,12 @@
     </div>
     <div v-if="knowledgeFlag">
       <a
-        href="https://zhuanlan.zhihu.com/p/400319684"
+        href="
+https://blog.csdn.net/kevin1993best/article/details/106329573"
         target="_blank"
         rel="noopener noreferrer"
-        >https://zhuanlan.zhihu.com/p/400319684</a
+      >
+        https://blog.csdn.net/kevin1993best/article/details/106329573</a
       >
       <br />
     </div>
@@ -64,9 +66,10 @@
           <span>第一步，日活跃用户分析</span>
         </div>
         <span style="line-height: 25px; font-size: 14px">
-          日活跃用户（DAU）：每天使用产品或服务的独立用户数量。这个指标可以反映产品的日常使用情况。分析近一个月日活跃用户变动情况，包括变动率。这个时候统计活跃用户需要进行去重，一天活跃多次的只保留一条记录。<br>
+          日活跃用户（DAU）：每天使用产品或服务的独立用户数量。这个指标可以反映产品的日常使用情况。分析近一个月日活跃用户变动情况，包括变动率。这个时候统计活跃用户需要进行去重，一天活跃多次的只保留一条记录。<br />
-          日活跃率 = 去重后的日活跃用户数量 / 历史累计去重后的用户数量*100% <br>
+          日活跃率 = 去重后的日活跃用户数量 / 历史累计去重后的用户数量*100%
-          日活跃平均时长=登录时长/活跃用户数，计算结果保留小数点后两位 <br>
+          <br />
+          日活跃平均时长=登录时长/活跃用户数，计算结果保留小数点后两位 <br />
         </span>
         <div style="margin-top: 10px; display: flex">
           <el-table
@@ -81,8 +84,12 @@
           >
             <el-table-column label="登录时间" align="center" prop="date">
             </el-table-column>
-            <el-table-column label="日活跃用户（个）" align="center" prop="addNum">
+            <el-table-column
-                 <template #default="scope">
+              label="日活跃用户（个）"
+              align="center"
+              prop="addNum"
+            >
+              <template #default="scope">
                 <el-input
                   v-model="scope.row.params1"
                   placeholder="请输入"
@@ -98,38 +105,59 @@
                   v-model="scope.row.params2"
                   placeholder="请输入"
                   style="width: 90px"
-                   size="small"
+                  size="small"
                 >
-                </el-input>
+                </el-input
+                >%
               </template>
             </el-table-column>
-            <el-table-column label="日活跃平均时长（分钟）" align="center" prop="day3">
+            <el-table-column
+              label="日活跃平均时长（分钟）"
+              align="center"
+              prop="day3"
+            >
               <template #default="scope">
                 <el-input
                   v-model="scope.row.params3"
                   placeholder="请输入"
                   style="width: 90px"
-                   size="small"
+                  size="small"
                 >
                 </el-input>
               </template>
             </el-table-column>
-
-    
           </el-table>
-          <div class="submit">提交</div>
+          <div>
+            <div
+              class="draw"
+              style="padding-left: 15px; margin-left: 20px"
+              @click="drawEcharts"
+            >
+              绘制图表
+            </div>
+            <div id="echartsDom" style="width: 750px; height: 500px"></div>
+            <div class="analysisConclusion">分析结论</div>
+            <el-input
+              v-model="analysisConclusion"
+              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
+              :rows="12"
+              type="textarea"
+              placeholder="请输入"
+            />
+            <div class="submit">提交</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
       <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">
-          从时间维度划分，常见的的有：次日留存、3日留存、7日留存、14日留存、30日留存、60日留存。<br />
+          周活跃用户（WAU）：每周使用产品或服务的独立用户数量。这个指标可以反映产品的周活跃情况。<br />
-          从用户维度划分，常见的的有：新用户留存、活跃留存。<br />
+
-          请按照第一步计算的表格数据，计算次日留存、3日留存、7日留存、14日留存的平均数，计算结果保留小数点后0位。
+          周活跃率 = 去重后的周活跃用户数量 / 历史累计去重后的用户数量*100%
         </span>
         <div style="margin-top: 10px; display: flex">
           <el-table
@@ -142,113 +170,154 @@
               backgroundColor: '#6A7DE9!important',
             }"
           >
-            <el-table-column label="" align="center" prop="name">
+            <el-table-column label="周数" align="center" prop="week">
+            </el-table-column>
+            <el-table-column label="日期间隔" align="center" prop="interval">
             </el-table-column>
-            <el-table-column label="次日" align="center" prop="description">
+            <el-table-column
+              label="周活跃用户（个）"
+              align="center"
+              prop="description"
+            >
               <template #default="scope">
                 <el-input
                   v-model="scope.row.params1"
                   placeholder="请输入"
-                  style="width: 70px"
+                  style="width: 90px"
                 >
                 </el-input>
               </template>
             </el-table-column>
-            <el-table-column label="3日" align="center" prop="description">
+            <el-table-column
+              label="周活跃率（%）"
+              align="center"
+              prop="description"
+            >
               <template #default="scope">
                 <el-input
                   v-model="scope.row.params2"
                   placeholder="请输入"
-                  style="width: 70px"
+                  style="width: 90px"
                 >
-                </el-input>
+                </el-input
+                >%
               </template>
             </el-table-column>
-            <el-table-column label="7日" align="center" prop="description">
+          </el-table>
+          <div style="width: 650px">
+            <div class="analysisConclusion">分析结论</div>
+            <el-input
+              v-model="analysisConclusion"
+              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
+              :rows="8"
+              type="textarea"
+              placeholder="请输入"
+            />
+            <div class="submit">提交</div>
+          </div>
+        </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">
+          月活跃用户（MAU）：每月使用产品或服务的独立用户数量。这个指标可以反映产品的长期使用情况。
+        </span>
+        <div style="margin-top: 10px; display: flex">
+          <el-table
+            :data="step3Data"
+            style="width: 650px"
+            border
+            :header-cell-style="{
+              color: '#fff',
+              fontSize: '14px',
+              backgroundColor: '#6A7DE9!important',
+            }"
+          >
+            <el-table-column label="月份" align="center" prop="month">
+            </el-table-column>
+            <el-table-column
+              label="月活跃用户（个）"
+              align="center"
+              prop="description"
+            >
               <template #default="scope">
                 <el-input
-                  v-model="scope.row.params3"
+                  v-model="scope.row.params1"
                   placeholder="请输入"
-                  style="width: 70px"
+                  style="width: 90px"
                 >
                 </el-input>
               </template>
             </el-table-column>
-            <el-table-column label="14日" align="center" prop="amount">
+            <el-table-column
+              label="月活跃率（%）"
+              align="center"
+              prop="description"
+            >
               <template #default="scope">
                 <el-input
-                  v-model="scope.row.params4"
+                  v-model="scope.row.params2"
                   placeholder="请输入"
-                  style="width: 70px"
+                  style="width: 90px"
                 >
-                </el-input>
+                </el-input
+                >%
               </template>
             </el-table-column>
           </el-table>
-          <div class="submit">提交</div>
+          <div style="width: 650px">
+            <div class="analysisConclusion">分析结论</div>
+            <el-input
+              v-model="analysisConclusion"
+              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
+              :rows="8"
+              type="textarea"
+              placeholder="请输入"
+            />
+            <div class="submit">提交</div>
+          </div>
         </div>
       </div>
       <div class="line"></div>
       <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">
+        <div style="font-size: 14px">
-          以2021/8/1注册的新增的用户数据为例，绘制之后14日的留存率折线图：
+          <div style="margin-bottom: 10px">用户粘性的比率指标</div>
-        </span>
+          <div>比率指标1- DAU/MAU</div>
-        <div class="draw" @click="draw">绘制</div>
+          <div style="display: flex; align-items: center">
-        <div style="margin-top: 10px; display: flex">
+            <span>通过用户粘性指标定义为过去一天的比过去30天的</span>
-          <div id="echarts" style="width: 400px; height: 300px"></div>
+            <img
-          <div style="margin-left: 50px">
+              src="@/assets/images/u5627.png"
-            <p>通过图表分析，新增用户在哪天之后趋向于平稳</p>
+              alt=""
-            <el-select
+              style="margin-left: 10px"
-              v-model="dayValue"
+            />
-              placeholder="请选择"
-              style="width: 120px"
-              size="default"
-              @change="handleChangeDay"
-            >
-              <el-option
-                v-for="item in dayOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <div class="analysis">
-              <div class="conclusion">分析结论：</div>
-              <span>
-                1、7日留存率，只有27%，流失率达到了73%，相对比较低，需要提供用户粘性；<br />
-                2、平缓之后，能够留存下来的客户，是公司的忠诚用户；<br />
-                3、14日的留存率，每天一直下降，需要找出原因。
-              </span>
-            </div>
           </div>
         </div>
-      </div>
+        <div style="font-size: 14px">
-      <div class="line"></div>
+          <div>比率指标2 - 月平均活跃天数</div>
-      <div class="caseBack">
+          <div style="display: flex; align-items: center">
-        <div class="title">
+            <span
-          <img src="@/assets/images/步骤.png" alt="" />
+              >分子可理解为过去30天用户的总活跃天数，分母为过去30天活跃用户数
-          <span>第四步，平均留存分析</span>
+              ，分子/分母 即为 过去30天的人均活跃天数</span
+            >
+            <img
+              src="@/assets/images/u5626.png"
+              alt=""
+              style="margin-left: 10px"
+            />
+          </div>
         </div>
-        <span style="line-height: 25px; font-size: 14px">
-          留存分析的适用场景：<br />
-          日留存率: <br />
-          快速判断产品是否迎合市场需求，比如新手对产品的UI设计、功能设置、新手引导等的体验是否满意，是否需做调整。<br />
-          快速判断用户粘性，比如用户是否更易受促销活动的影响等等。<br />
-          周留存率: <br />
-          判断用户忠诚度，用户此时对产品基本已有完整的体验。一整套流程体验下来，继续访问的用户可判断为潜在忠诚用户。<br />
-          分析用户再次访问的原因，找出产品最能巩固用户的点，且参考此点以一贯之，拓展应用到更多的用户身上，促使更多的用户留下来。<br />
-          月留存率：<br />
-          评估迭代与优化的效果。砍掉留存率低的产品功能，进行迭代优化。<br />
-          平均留存率的分析，需要结合公司不同时期，与行业平均水平进行对比，找出差距，分析相关原因，从而制定营销策略。
-        </span>
         <div style="margin-top: 10px; display: flex">
           <el-table
             :data="step4Data"
-            style="width: 650px"
+            style="width: 300px"
             border
             :header-cell-style="{
               color: '#fff',
@@ -256,42 +325,53 @@
               backgroundColor: '#6A7DE9!important',
             }"
           >
-            <el-table-column label="" align="center" prop="name">
+            <el-table-column label="用户ID" align="center" prop="id">
-            </el-table-column>
-            <el-table-column label="次日" align="center" prop="data1">
             </el-table-column>
-            <el-table-column label="3日" align="center" prop="data2">
+            <el-table-column label="活跃天数" align="center" prop="data1">
+              <template #default="scope">
+                <el-input
+                  v-model="scope.row.params1"
+                  placeholder="请输入"
+                  style="width: 90px"
+                >
+                </el-input>
+              </template>
             </el-table-column>
-            <el-table-column label="7日" align="center" prop="data3">
+          </el-table>
+          <el-table
+            :data="step4DataTable2"
+            style="width: 400px; margin-left: 20px"
+            border
+            :header-cell-style="{
+              color: '#fff',
+              fontSize: '14px',
+              backgroundColor: '#6A7DE9!important',
+            }"
+          >
+            <el-table-column label="比率指标" align="center" prop="id">
             </el-table-column>
-            <el-table-column label="14日" align="center" prop="data4">
+            <el-table-column label="数值" align="center" prop="data1">
+              <template #default="scope">
+                <el-input
+                  v-model="scope.row.params1"
+                  placeholder="请输入"
+                  style="width: 90px"
+                >
+                </el-input>
+              </template>
             </el-table-column>
           </el-table>
-        </div>
+          <div style="width: 650px">
-      </div>
+            <div class="analysisConclusion">分析结论</div>
-      <div class="line"></div>
+            <el-input
-      <div class="caseBack">
+              v-model="analysisConclusion"
-        <div class="title">
+              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
-          <img src="@/assets/images/步骤.png" alt="" />
+              :rows="8"
-          <span>第五步，留存分析应用场景</span>
+              type="textarea"
-        </div>
+              placeholder="请输入"
-        <span style="line-height: 25px; font-size: 14px">
+            />
-          日常工作中，留存分析常用于下述场景：
+            <div class="submit">提交</div>
-        </span>
+          </div>
-        <div style="font-size: 14px; margin-top: 10px">
-          1. 了解一个渠道的质量<br />
-          可以使用「日留存」来衡量各渠道用户的表现，并以此作为衡量渠道质量的标准之一。如对不同渠道来源的用户进行次日留存、7日留存的对比（不同行业可能选择不同周期），
-          以此衡量不同渠道的用户留存情况。一般来说，留存情况较好可以反应这个渠道质量较好。
-        </div>
-        <div style="font-size: 14px; margin-top: 10px">
-          2. 判断运营手段/某项功能改动是否奏效<br />
-          当我们期待某个运营手段/某项功能可以期提升留存时，可以对通过分析该运营手段/功能，「覆盖到的新用户」和「未覆盖到的新用户」的留存率，对两部分用户的留存进行对比，来验证手段/功能的有效性。
-          以贴吧为例，该贴吧想检验“看贴”功能是否对新用户的留存是有提升效果，于是对同样来自A渠道的新用户（一部分使用了看贴功能，一部分没有使用看贴功能）进行留存对比。通过比较发现，使用过看贴功能的新用户，
-          三日留存率比未使用过该功能的新用户，多了10%以上。这说明“看贴”功能对新用户留存有着正向促进作用。
-        </div>
-        <div style="font-size: 14px; margin-top: 10px">
-          3. 衡量一个产品是否健康<br />
-          可以使用「周留存」、「月留存」等指标观察用户在平台上的粘性，衡量产品的健康情况。
         </div>
       </div>
       <div class="line"></div>
@@ -309,6 +389,7 @@ const list = ref(["-"]);
 const dayValue = ref("");
 const combinationValue1 = ref("");
 const combinationValue2 = ref("");
+const analysisConclusion = ref("");
 const knowledgeFlag = ref(false);
 //时间间隔分组数-7天内
 const sevenNum = ref(0);
@@ -409,7 +490,6 @@ const step1Data = ref([
   {
     date: "2024-03-30",
   },
-
 ]);
 const fileTable1 = ref([
   {
@@ -636,43 +716,66 @@ const fileTable1 = ref([
 ]);
 const step2Data = ref([
   {
-    name: "平均数",
+    week: "第一周",
+    interval: "2024/3/1-2024/3/7",
+  },
+  {
+    week: "第二周",
+    interval: "2024/3/8-2024/3/14",
+  },
+  {
+    week: "第三周",
+    interval: "2024/3/15-2024/3/21",
+  },
+  {
+    week: "第四周",
+    interval: "2024/3/22-2024/3/28",
   },
 ]);
 const step3Data = ref([
   {
-    data1: "A-B",
+    month: "2024年3月",
-    data2: "5900",
+  },
+]);
+const step4Data = ref([
+  {
+    id: "A",
   },
   {
-    data1: "A-C",
+    id: "B",
-    data2: "2400",
   },
   {
-    data1: "A-D",
+    id: "C",
-    data2: "1100",
+  },
+  {
+    id: "D",
   },
 
   {
-    data1: "B-C",
+    id: "E",
-    data2: "600",
+  },
+  {
+    id: "F",
   },
   {
-    data1: "B-D",
+    id: "G",
-    data2: "600",
   },
   {
-    data1: "C-D",
+    id: "H",
-    data2: "600",
+  },
+  {
+    id: "J",
+  },
+  {
+    id: "K",
   },
 ]);
-const step4Data = ref([
+const step4DataTable2 = ref([
   {
-    name: "平均数",
+    id: "过去30天平均DAU/MAU",
-    data1: "666",
+  },
-    data2: "A",
+  {
-    data3: "189",
+    id: "月平均活跃天数（天）",
-    data4: "衬衫",
   },
 ]);
 const step5Data = ref([
@@ -1109,6 +1212,120 @@ const draw = () => {
 
   option && myChart.setOption(option);
 };
+const drawEcharts = () => {
+  for (let i in step1Data.value) {
+    console.log(step1Data.value[i]);
+    if (
+      !step1Data.value[i].params1 ||
+      !step1Data.value[i].params2 ||
+      !step1Data.value[i].params3
+    ) {
+      proxy.$modal.msgError("请完成所有填空数据");
+      return;
+    }
+  }
+  const xAxisData = [];
+  const data1 = [];
+  const data2 = [];
+  for (let item in step1Data.value) {
+    // console.log(step1Data.value[item].date);
+    xAxisData.push(step1Data.value[item].date);
+    data1.push(step1Data.value[item].params2);
+    data2.push(step1Data.value[item].params3);
+  }
+  var chartDom = document.getElementById("echartsDom");
+  var myChart = echarts.init(chartDom, "dark");
+  var option;
+
+  option = {
+    title: {
+      text: "日活跃分析图",
+      left: "center",
+      top: "25",
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+        crossStyle: {
+          color: "#999",
+        },
+      },
+    },
+    legend: {
+      data: ["日活跃平均时长(分钟)", "日活跃率"],
+      top: 5,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: xAxisData,
+        // offset:'10',
+        axisLabel: {
+          interval: 0,
+          rotate: 90, //代表逆时针旋转45度
+          fontSize: "0.6rem",
+        },
+        axisPointer: {
+          type: "shadow",
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "日活跃平均时长",
+        min: 0,
+        // max: 250,
+        interval: 10,
+        axisLabel: {
+          formatter: "{value}",
+        },
+      },
+      {
+        type: "value",
+        name: "日活跃率",
+        min: 0,
+        max: 100,
+        interval: 10,
+        axisLabel: {
+          formatter: "{value}%",
+        },
+      },
+    ],
+    series: [
+      {
+        name: "日活跃平均时长(分钟)",
+        type: "bar",
+        itemStyle: {
+          color: "#F4DAA6",
+        },
+        tooltip: {
+          valueFormatter: function (value) {
+            return value + "分钟";
+          },
+        },
+        data: data2,
+      },
+      {
+        name: "日活跃率",
+        type: "line",
+        itemStyle: {
+          color: "#D052E5",
+        },
+        yAxisIndex: 1,
+        tooltip: {
+          valueFormatter: function (value) {
+            return value + "%";
+          },
+        },
+        data: data1,
+      },
+    ],
+  };
+
+  option && myChart.setOption(option);
+};
 </script>
 
 <style scoped lang="scss">
@@ -1276,9 +1493,26 @@ const draw = () => {
     font-size: 14px;
     cursor: pointer;
   }
+  .analysisConclusion {
+    background: url("@/assets/images/分析.png");
+    width: 89px;
+    height: 31px;
+    text-align: center;
+    line-height: 31px;
+    color: #000;
+    font-size: 14px;
+    // cursor: pointer;
+    margin-left: 20px;
+    padding-left: 10px;
+  }
 }
 ::v-deep .el-table tr {
   background-color: #002652 !important;
   color: #fff;
 }
+::v-deep .el-textarea__inner {
+  background: #002652;
+  color: #fff;
+  // color: #5397C3;
+}
 </style>

src/views/portraitModel/index.vue

@@ -57,29 +57,29 @@
             background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
           }"
         >
-          <el-table-column label="用户ID" align="center" prop="a1">
+          <el-table-column label="用户ID" align="center" prop="id">
           </el-table-column>
-          <el-table-column label="登录名" align="center" prop="a1">
+          <el-table-column label="登录名" align="center" prop="loginName">
           </el-table-column>
-          <el-table-column label="用户姓名" align="center" prop="a1">
+          <el-table-column label="用户姓名" align="center" prop="userName">
           </el-table-column>
-          <el-table-column label="学号" align="center" prop="a1">
+          <el-table-column label="学号" align="center" prop="studentId">
           </el-table-column>
-          <el-table-column label="班级" align="center" prop="a1">
+          <el-table-column label="班级" align="center" prop="stuClass">
           </el-table-column>
-          <el-table-column label="专业" align="center" prop="a1">
+          <el-table-column label="专业" align="center" prop="major">
           </el-table-column>
-          <el-table-column label="学校" align="center" prop="a1">
+          <el-table-column label="学校" align="center" prop="school">
           </el-table-column>
-          <el-table-column label="角色名称" align="center" prop="a1">
+          <el-table-column label="角色名称" align="center" prop="roleName">
           </el-table-column>
-          <el-table-column label="角色性别" align="center" prop="a1">
+          <el-table-column label="角色性别" align="center" prop="roleGender">
           </el-table-column>
-          <el-table-column label="角色年龄" align="center" prop="a1">
+          <el-table-column label="角色年龄" align="center" prop="roleAge">
           </el-table-column>
-          <el-table-column label="注册时间" align="center" prop="a1">
+          <el-table-column label="注册时间" align="center" prop="updateTime">
           </el-table-column>
-          <el-table-column label="所在地" align="center" prop="a1">
+          <el-table-column label="所在地" align="center" prop="location">
           </el-table-column>
         </el-table>
         <el-table
@@ -265,6 +265,7 @@
 </template>
 
 <script setup>
+import * as portraitModel from "@/api/portraitModel";
 import mainContent from "@/views/components/mainContent.vue";
 import rfmAnalysis from "./components/rfmAnalysis.vue";
 import abcAnalysis from "./components/abcAnalysis.vue";
@@ -272,19 +273,13 @@ import bostonAnalysis from "./components/bostonAnalysis.vue";
 import funnelAnalysis from "./components/funnelAnalysis.vue";
 import basketAnalysis from "./components/basketAnalysis.vue";
 import repurchaseAnalysis from "./components/repurchaseAnalysis.vue";
-import retainAnalysis from "./components/retainAnalysis.vue"
+import retainAnalysis from "./components/retainAnalysis.vue";
-import viscosityAnalysis from "./components/viscosityAnalysis.vue"
+import viscosityAnalysis from "./components/viscosityAnalysis.vue";
+import { onMounted } from "vue";
 const currentComponent = ref(null);
 const menuIndex = ref(1);
 const tabIndex = ref(0);
-const fileTable = ref([
+const fileTable = ref([]);
-  {
-    a1: "666",
-  },
-  {
-    a1: "111",
-  },
-]);
 const tabList = ref([
   {
     id: "1",
@@ -300,37 +295,37 @@ const tabList = ref([
   },
   {
     id: "3",
-    key:bostonAnalysis,
+    key: bostonAnalysis,
     title: "波士顿矩阵分析",
     backImg: "src/assets/images/icon3.png",
   },
   {
     id: "4",
-    key:funnelAnalysis,
+    key: funnelAnalysis,
     title: "转化分析-漏斗模型",
     backImg: "src/assets/images/icon4.png",
   },
   {
     id: "5",
-    key:basketAnalysis,
+    key: basketAnalysis,
     title: "购物篮分析",
     backImg: "src/assets/images/icon5.png",
   },
   {
     id: "6",
-    key:repurchaseAnalysis,
+    key: repurchaseAnalysis,
     title: "复购分析",
     backImg: "src/assets/images/icon6.png",
   },
   {
     id: "7",
-    key:retainAnalysis,
+    key: retainAnalysis,
     title: "留存分析",
     backImg: "src/assets/images/icon7.png",
   },
   {
     id: "8",
-    key:viscosityAnalysis,
+    key: viscosityAnalysis,
     title: "用户粘性分析",
     backImg: "src/assets/images/icon8.png",
   },
@@ -345,9 +340,36 @@ const tabList = ref([
     backImg: "src/assets/images/icon10.png",
   },
 ]);
+onMounted(() => {
+  getTableData("用户属性表");
+});
+const getTableData = (name) => {
+  fileTable.value = []
+  portraitModel
+    .getUserTableData({
+      userId: 492,
+      tableName: name,
+    })
+    .then((res) => {
+      fileTable.value.push(res.data);
+      // console.log(res,'--');
+    })
+    .catch((error) => {});
+};
 const handleChange = (index) => {
   console.log(index);
   menuIndex.value = index;
+  if (index == 1) {
+    getTableData("用户属性表");
+  } else if (index == 2) {
+    getTableData("用户登录活跃表");
+  } else if (index == 3) {
+    getTableData("用户消费能力表");
+  } else if (index == 4) {
+    getTableData("用户行为表");
+  } else {
+    getTableData("用户评论表");
+  }
 };
 const changeTab = (item) => {
   currentComponent.value = item.key;