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

<template>
  <div class="content app-container">
    <div class="tabList">
      <div>
        <div class="tabs" :class="{ 'tabs-active': tabIndex == item.id }" v-for="item in tabList" :key="item.id" @click="changeTab(item)">
          <div style="display: flex; align-items: center">
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
      <div>
        <el-button id="brtn" type="primary" @click="dialogVisible = true">任务背景与目标</el-button>
      </div>
    </div>

    <div class="container" v-if="menuIndex != 0">
      <div class="leftContent">
        <div class="title">
          <img src="@/assets/images/图标1.png" alt="" />
          <span>内置表</span>
        </div>
        <el-menu default-active="1" @open="handleOpen" @close="handleClose" @select="handleChange" background-color="#041C49" style="border-right: none" active-text-color="#ffffff" text-color="#9BD1FF">
          <el-menu-item index="1">
            <span>用户属性表</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span>用户登录活跃表</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span>用户消费能力表</span>
          </el-menu-item>
          <el-menu-item index="4">
            <span>用户行为表</span>
          </el-menu-item>
          <!-- <el-menu-item index="5">
              <span>用户评论表</span>
            </el-menu-item> -->
        </el-menu>
      </div>
      <div class="table">
        <el-table
          v-if="menuIndex == 1"
          :data="fileTable"
          style="width: 1350px"
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
          }"
        >
          <el-table-column label="用户ID" align="center" prop="userId"></el-table-column>
          <el-table-column label="登录名" align="center" prop="loginName"></el-table-column>
          <el-table-column label="用户姓名" align="center" prop="userName"></el-table-column>
          <el-table-column label="学号" align="center" prop="studentId"></el-table-column>
          <el-table-column label="班级" align="center" prop="stuClass"></el-table-column>
          <el-table-column label="专业" align="center" prop="major"></el-table-column>
          <el-table-column label="学校" align="center" prop="school"></el-table-column>
          <el-table-column label="角色名称" align="center" prop="roleName"></el-table-column>
          <el-table-column label="角色性别" align="center" prop="roleGender"></el-table-column>
          <el-table-column label="角色年龄" align="center" prop="roleAge"></el-table-column>
          <el-table-column label="注册时间" align="center" prop="updateTime"></el-table-column>
          <el-table-column label="所在地" align="center" prop="location"></el-table-column>
        </el-table>
        <el-table
          v-if="menuIndex == 2"
          :data="fileTable"
          style="width: 1350px"
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
          }"
        >
          <el-table-column label="用户ID" align="center" prop="userId"></el-table-column>
          <el-table-column label="登录名" align="center" prop="loginName"></el-table-column>
          <el-table-column label="用户姓名" align="center" prop="userName"></el-table-column>
          <el-table-column label="学号" align="center" prop="studentId"></el-table-column>
          <el-table-column label="班级" align="center" prop="stuClass"></el-table-column>
          <el-table-column label="专业" align="center" prop="major"></el-table-column>
          <el-table-column label="学校" align="center" prop="school"></el-table-column>
          <el-table-column label="角色名称" align="center" prop="roleName"></el-table-column>
          <el-table-column label="常登录地" align="center" prop="frequentLoginLocation"></el-table-column>
          <el-table-column label="最近登录日期" align="center" prop="lastLoginDate"></el-table-column>
          <el-table-column label="登录频次" align="center" prop="loginFrequency"></el-table-column>
          <el-table-column label="登录时长" align="center" prop="loginDuration"></el-table-column>
        </el-table>
        <el-table
          v-if="menuIndex == 3"
          :data="fileTable"
          style="width: 1350px"
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
          }"
        >
          <el-table-column label="用户ID" align="center" prop="a1"></el-table-column>
          <el-table-column label="登录名" align="center" prop="a1"></el-table-column>
          <el-table-column label="用户姓名" align="center" prop="a1"></el-table-column>
          <el-table-column label="学号" align="center" prop="a1"></el-table-column>
          <el-table-column label="班级" align="center" prop="a1"></el-table-column>
          <el-table-column label="专业" align="center" prop="a1"></el-table-column>
          <el-table-column label="学校" align="center" prop="a1"></el-table-column>
          <el-table-column label="角色名称" align="center" prop="a1"></el-table-column>
          <el-table-column label="消费商品小类" align="center" prop="consumerGoods" width="110"></el-table-column>
          <el-table-column label="消费商品类型" align="center" prop="a1" width="110"></el-table-column>
          <el-table-column label="累计消费金额" align="center" prop="a1" width="110"></el-table-column>
          <el-table-column label="累计消费次数" align="center" prop="a1" width="110"></el-table-column>
          <el-table-column label="近七天消费金额" align="center" prop="a1" width="130"></el-table-column>
          <el-table-column label="近七天消费次数" align="center" prop="a1" width="130"></el-table-column>
          <el-table-column label="最近消费时间" align="center" prop="a1" width="110"></el-table-column>
        </el-table>
        <el-table
          v-if="menuIndex == 4"
          :data="fileTable"
          style="width: 1350px"
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
          }"
        >
          <el-table-column label="用户ID" align="center" prop="userId"></el-table-column>
          <el-table-column label="登录名" align="center" prop="loginName"></el-table-column>
          <el-table-column label="用户姓名" align="center" prop="userName"></el-table-column>
          <el-table-column label="学号" align="center" prop="studentId"></el-table-column>
          <el-table-column label="班级" align="center" prop="stuClass"></el-table-column>
          <el-table-column label="专业" align="center" prop="major"></el-table-column>
          <el-table-column label="学校" align="center" prop="school"></el-table-column>
          <el-table-column label="角色名称" align="center" prop="roleName"></el-table-column>
          <el-table-column label="商品名称" align="center" prop="goodsName" width="110"></el-table-column>
          <el-table-column label="商品小类" align="center" prop="goodsSubcategories" width="110"></el-table-column>
          <el-table-column label="商品类型" align="center" prop="goodsType" width="110"></el-table-column>
          <el-table-column label="用户行为类型" align="center" prop="userBehaviorType" width="110"></el-table-column>
          <el-table-column label="行为日期" align="center" prop="behaviorDate" width="130"></el-table-column>
        </el-table>
      </div>
    </div>
    <main-content v-if="menuIndex == 0" :currentComponent="currentComponent" ref="contentRef"></main-content>
    <div class="btn" v-if="currentComponent">
      <div class="submit" @click="submit">提交任务</div>
      <div class="retrain" @click="retrain">重新实训</div>
    </div>

    <popModel :showModel="dialogVisible" title="任务背景:" @closePop="dialogVisible = false">
      <template v-slot:content>
        <p style="font-size: 1rem">
          电商消费人群呈现‌代际分化、需求分层、场景多元‌特征，需通过精准标签（如“价格敏感型”“品质导向型”）与差异化策略（直播转化、会员体系）实现高效运营‌。
          <br />
          <br />
          任务目标：
          <br />
          <br />
          在进行消费人群分析师，有很多方法可以对客户群体进行分析，请使用客户分类相关的波士顿矩阵分析和RFM分析法对客户进行分类，根据分类结果，针对不同类型客户制定不同的营销策略。
          <br />
          <br />
          ①数据源：客户消费时间及消费金额数据。
          <br />
          <br />
          ②根据客户分类结果，为营销及运营提供决策依据。
        </p>
      </template>
    </popModel>
  </div>
</template>
  
  <script setup>
const route = useRoute();
import * as portraitModel from "@/api/portraitModel";
import mainContent from "@/views/components/mainContent.vue";
import { getAssetsFile, isModuleUnique } from "@/utils/index.js";
import popModel from "@/views/components/popModal.vue";
const { proxy } = getCurrentInstance();
const currentComponent = ref(null);
const dialogVisible = ref(false);
const contentRef = ref(null);
const menuIndex = ref(0);
const tabIndex = ref(0);
const fileTable = ref([]);
const tabList = ref([
  {
    id: "1",
    key: () => import("../portraitModel/components/rfmAnalysis.vue"),
    title: "RFM分析",
    backImg: "icon1.png",
  },
  {
    id: "2",
    key: () => import("../portraitModel/components/bostonAnalysis.vue"),
    title: "波士顿矩阵分析",
    backImg: "icon3.png",
  },
]);
const map = {
  RFM分析: 1,
  波士顿矩阵分析: 2,
};
onMounted(() => {
  tabList.value.forEach((item) => {
    if (!isModuleUnique([item.title])) {
      console.log(item.title, "item.title");
      item.status = true;
    } else {
      item.status = false;
    }
  });
  tabIndex.value = tabList.value.filter((item) => !item.status)[0].id;
  currentComponent.value = defineAsyncComponent(tabList.value.filter((item) => !item.status)[0].key);
});
const getTableData = (name) => {
  fileTable.value = [];
  portraitModel
    .getUserTableData({
      userId: userStore.userInfo.userId,
      tableName: name,
      size: 10,
      index: 1,
    })
    .then((res) => {
      // fileTable.value.push(res.data.list);
      fileTable.value = res.data.list;
      // 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) => {
  if (item.status) {
    proxy.$modal.msgError("该模块未开放");
    return;
  }
  currentComponent.value = defineAsyncComponent(item.key);
  menuIndex.value = 0;
  tabIndex.value = item.id;
};
const submit = () => {
  contentRef.value.submitMethod();
};
const retrain = () => {
  contentRef.value.retrainMethod();
};
// defineExpose({
//   submit,
// });
</script>
  
  <style lang="scss" scoped>
.content {
  color: #fff;
  #brtn {
    width: 150px;
    height: 50px;
    background: #409eff !important;
    border-color: #ffffff00;
    padding: 8px 5px 8px 5px !important;
  }
  .tabList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // width: 1060px;
    .tabs-active {
      // 放大一点
      transform: scale(1.1);
      // 过渡
      transition: all 0.3s;
    }
    .tabs {
      cursor: pointer;
      font-size: 13px;
      margin-right: 9px;
      margin-bottom: 20px;
      width: 170px;
      height: 56px;
      background-image: url("@/assets/images/11.png");
      background-size: 170px 56px;
      padding-left: 50px;
      line-height: 56px;
      display: inline-block;
      img {
        margin-right: 5px;
      }
    }
    .tabs:nth-of-type(2),
    .tabs:nth-of-type(9) {
      padding-left: 60px;
      background-image: url("@/assets/images/22.png");
    }
    .tabs:nth-of-type(3),
    .tabs:nth-of-type(10) {
      background-image: url("@/assets/images/itembg3.png");
    }
    .tabs:nth-of-type(4),
    .tabs:nth-of-type(6) {
      background-image: url("@/assets/images/itembg4.png");
    }
    .tabs:nth-of-type(5),
    .tabs:nth-of-type(7) {
      background-image: url("@/assets/images/itembg5.png");
    }
    .tabs:nth-of-type(8) {
      background-image: url("@/assets/images/itembg1.png");
    }
    .tabs:nth-of-type(4),
    .tabs:nth-of-type(9) {
      padding-left: 20px;
      img {
        margin-right: 5px;
      }
    }
    .tabs:nth-of-type(1) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 130px;
      background-size: 130px 56px;
    }
    .tabs:nth-of-type(2) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 165px;
      background-size: 165px 56px;
    }
    .tabs:nth-of-type(3) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 150px;
      background-size: 150px 56px;
    }
    .tabs:nth-of-type(4) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 172px;
      background-size: 172px 56px;
    }
    .tabs:nth-of-type(6),
    .tabs:nth-of-type(7) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 133px;
      background-size: 133px 56px;
    }
    .tabs:nth-of-type(5) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 133px;
      background-size: 133px 56px;
    }
    .tabs:nth-of-type(8) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 135px;
      background-size: 135px 56px;
    }
    .tabs:nth-of-type(9) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 185px;
      background-size: 185px 56px;
    }
    .tabs:nth-of-type(10) {
      // background-image: url("@/assets/images/itembg1.png");
      width: 138px;
      background-size: 138px 56px;
    }
  }
  .btn {
    width: 220px;
    margin: 0 auto;
    display: flex;
    // position: absolute;
    // right: 140px;
    // bottom: 0px;
    margin-top: 10px;
    .submit {
      width: 99px;
      height: 31px;
      background-image: url("@/assets/images/submit.png");
      color: #080138;
      font-size: 14px;
      line-height: 31px;
      padding-left: 30px;
      cursor: pointer;
    }
    .retrain {
      width: 99px;
      height: 31px;
      background-image: url("@/assets/images/retrain.png");
      color: #080138;
      font-size: 14px;
      line-height: 31px;
      padding-left: 30px;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .container {
    display: flex;
    .leftContent {
      width: 205px;
      height: 691px;
      background: #041c49;
      border: 1px solid #063373;
      .title {
        padding-left: 10px;
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #3596eb;
        font-weight: bold;
        height: 50px;
        border-bottom: 1px solid #063373;
        span {
          margin-left: 10px;
        }
      }
      .el-menu-item {
        padding-left: 40px;
        height: 40px;
      }
    }
    .table {
      margin-left: 20px;
    }
  }
}
.el-menu-item.is-active {
  // color: var(--el-menu-active-color);
  background-color: #1983dd !important;
}
::v-deep .el-table tr {
  background-color: #002652 !important;
  color: #fff;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #0077dd !important;
  /* color: #fff; */
}
</style>