dianshang-qianduan/src/views/digitalMarketingAlgorithms/index.vue

<template>
  <div class="rgzn_top app-container2" 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">
      <el-button :class="{ active: isActive === 1 }" @click="activeIndex(1)">用户数据库</el-button>
      <el-button :class="{ active: isActive === 2 }" @click="activeIndex(2)">描述性统计</el-button>
      <el-button :class="{ active: isActive === 3 }" @click="activeIndex(3)">聚类分析</el-button>
      <el-button :class="{ active: isActive === 4 }" @click="activeIndex(4)">关联规则挖掘</el-button>
      <el-button :class="{ active: isActive === 5 }" @click="activeIndex(5)">回归分析</el-button>
      <el-button :class="{ active: isActive === 6 }" @click="activeIndex(6)">情感分析/文本挖掘</el-button>
    </div>
    <div>
      <component v-if="component" :is="component"></component>
    </div>
  </div>
</template>
<script setup>
import * as portraitModel from "@/api/portraitModel";
import useAlgorithmStore from "@/store/modules/algorithm.js";
import { getUserInfo } from "@/utils/auth";
const userInfo = JSON.parse(getUserInfo());
const algorithmStore = useAlgorithmStore();
const selectZJ = (item) => {
  loading.value = true
  portraitModel.getUserTableInfo({ userId: userInfo.userId }).then((res) => {
    algorithmStore.userDataLabel = [...res?.data.tableNames, ...res.data.selfBuiltTable].filter((item) => item !== "用户评论表");
    if (algorithmStore.userDataLabel.length > 1) {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    } else {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    }
  });
};
const loading = ref(false);
const route = useRoute();
const pageData = [defineAsyncComponent(() => import("./components/bigData.vue")), defineAsyncComponent(() => import("./components/descriptiveStatistics.vue")), defineAsyncComponent(() => import("./components/clusterAnalysis.vue")), defineAsyncComponent(() => import("./components/associationRuleMining.vue")), defineAsyncComponent(() => import("./components/regressionAnalysis.vue")), defineAsyncComponent(() => import("./components/emotion-analysis.vue"))];
const component = ref(pageData[0]);
const isActive = ref(1);
const activeIndex = (index) => {
  isActive.value = index;
  component.value = pageData[index - 1];
};
const map = {
  用户数据库: 1,
  描述性统计: 2,
  聚类分析: 3,
  关联规则挖掘: 4,
  回归分析: 5,
  情感分析: 6,
};
onMounted(() => {
  isActive.value = map[route.meta.title];
  component.value = pageData[map[route.meta.title] - 1];
  selectZJ();
});
</script>

<style lang="scss" scoped>
.content {
  color: #fff;
}
.rgzn_top {
  margin-top: 20px;
  height: calc(100vh - 100px);
  .top_item {
    img {
      margin-right: 5px;
    }
    .el-button {
      padding-left: 49px !important;
    }
    .el-button:nth-child(1) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/11.png");
      color: #ffffff;
      border-color: #ffffff00;
      padding: 8px 5px 8px 47px;
    }
    .el-button:nth-child(2) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/22.png");
      color: #ffffff;
      border-color: #ffffff00;
      padding: 8px 5px 8px 47px;
    }
    .el-button:nth-child(3) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/33.png");
      color: #ffffff;
      border-color: #ffffff00;
      padding: 8px 5px 8px 47px;
    }
    .el-button:nth-child(4) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/44.png");
      color: #ffffff;
      border-color: #ffffff00;
      padding: 8px 5px 8px 30px;
    }
    .el-button:nth-child(5) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/55.png");
      color: #ffffff;
      border-color: #ffffff00;
      padding: 8px 5px 8px 25px;
    }
    .el-button:nth-child(6) {
      width: 190px;
      height: 50px;
      background: url("../../assets/images/66.png");
      color: #ffffff;
      border-color: #ffffff00;
      padding: 8px 20px 8px 30px;
      background-size: 100% 100%;
    }
    .el-button:nth-child(7) {
      width: 170px;
      height: 50px;
      background: url("../../assets/images/77.png");
      color: #ffffff;
      border-color: #ffffff00;
      padding: 8px 5px 8px 20px;
    }
    .active {
      transform: scale(1.1);
      transition: all 0.3s;
    }
  }
}
</style>