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

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-04-28 13:53:15
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-21 18:10:16
 * @FilePath: \e-commerce-internet\src\views\demand\user.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="rgzn_top app-container2 student-training-shell legacy-training-page" v-loading="loading" element-loading-text="Loading..." :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)">
    <div class="top_item">
      <div>
        <template v-for="(item, index) in tabsList" :key="item.id">
          <el-button :class="{ active: isActive == item.id }" @click="activeIndex(index)">{{ item.name }}</el-button>
        </template>
        <!-- <el-button :class="{ active: isActive === 2 }" @click="activeIndex(1)" v-show="isModuleUnique(['描述性统计'])">描述性统计</el-button>
        <el-button :class="{ active: isActive === 3 }" @click="activeIndex(2)" v-show="isModuleUnique(['聚类分析'])">聚类分析</el-button> -->
      </div>
    </div>
    <TrainingIntro title="用户数据分析">
      <template #background>
        <p>
          市场竞争加剧‌：随着电商平台的不断增多，市场竞争日益激烈。为了保持竞争优势，电商平台需要深入了解市场需求，以便制定有效的市场策略。
              <br />
              <br />

              ‌ 消费者需求多样化‌：随着生活水平的提高和消费观念的转变，消费者对线上购物的需求日益多样化。这要求电商平台必须准确把握消费者需求，提供个性化、差异化的产品和服务。
              <br />
              <br />

              ‌ 技术进步推动行业变革‌：大数据、人工智能、云计算等新技术的广泛应用，为电商市场带来了前所未有的变革。这些技术不仅提高了电商平台的运营效率，还为消费者提供了更加便捷、智能的购物体验。因此，电商平台需要紧跟技术发展趋势，不断创新和优化产品和服务。
        </p>
      </template>
      <template #goal>
        <p>
          了解行业需求分析用到的数据源及分析方法。
              <br />
              <br />

              ①用户画像数据：用户年龄、性别分布、用户地域分布、用户消费偏好与习惯，对客户数据进行描述性统计和聚类分析
        </p>
      </template>
    </TrainingIntro>
    <div class="training-step-area">
      <component v-if="component" :is="component"></component>
    </div>
    <TrainingLegacyActions />
    <TrainingAiSidebar />
  </div>
</template>
<script setup>


import TrainingLegacyActions from "@/views/components/TrainingLegacyActions.vue";
import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingIntro from '@/views/components/TrainingIntro.vue';
import * as portraitModel from "@/api/portraitModel";
import { getAssetsFile, isModuleUnique } from "@/utils/index.js";
import useAlgorithmStore from "@/store/modules/algorithm.js";
import { getUserInfo } from "@/utils/auth";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const algorithmStore = useAlgorithmStore();
const userInfo = JSON.parse(getUserInfo());
const route = useRoute();
const tabsList = ref([
  { name: "描述性统计", id: 0, com: defineAsyncComponent(() => import("../digitalMarketingAlgorithms/components/descriptiveStatistics.vue")) },
  { name: "聚类分析", id: 1, com: defineAsyncComponent(() => import("../digitalMarketingAlgorithms/components/clusterAnalysis.vue")) },
]);
const component = ref(tabsList.value[0].com);
const isActive = ref(0);
const loading = ref(false);
const activeIndex = (index) => {
  if (tabsList.value[index]?.status) return proxy.$modal.msgError("该模块暂未开放");
  isActive.value = index;
  component.value = tabsList.value[index]?.com;
};
//选择自建表
const selectZJ = (item) => {
  portraitModel.getUserTableInfo({ userId: userInfo.userId }).then((res) => {
    algorithmStore.userDataLabel = [...res?.data.tableNames, ...res.data.selfBuiltTable].filter((item) => item !== "用户评论表");
  });
};
selectZJ();
onMounted(() => {
  tabsList.value.forEach((item) => {
    if (!isModuleUnique([item.name])) {
      item.status = true;
    } else {
      item.status = false;
    }
  });
  isActive.value = tabsList.value.filter((item) => !item.status)[0]?.id;
  component.value = tabsList.value.filter((item) => !item.status)[0]?.com;
});
</script>
  
  <style lang="scss" scoped>
.content {
  color: #1e3a5f;
}
.rgzn_top {
  margin-top: 20px;
  height: calc(100vh - 100px);
  .top_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      margin-right: 5px;
    }
    #brtn {
      width: 150px;
      height: 50px;
      background: #409eff !important;
      border-color: #1e3a5f00;
      padding: 8px 5px 8px 5px !important;
    }
    .el-button {
      padding-left: 49px !important;
    }
    .el-button:nth-child(1) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/11.png");
      color: #1e3a5f;
      border-color: #1e3a5f00;
      padding: 8px 5px 8px 47px;
    }
    .el-button:nth-child(2) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/22.png");
      color: #1e3a5f;
      border-color: #1e3a5f00;
      padding: 8px 5px 8px 47px;
    }
    .active {
      transform: scale(1.1);
      transition: all 0.3s;
    }
  }
}
</style>