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

<template>
  <div class="content app-container">
    <div class="tabList">
      <div class="tabs" v-for="item in tabList" :key="item.id" @click="changeTab(item)">
        <div style="display: flex; align-items: center">
          <img :src="item.backImg" alt="" />
          <span>{{ item.title }}</span>
        </div>
      </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>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { defineExpose } from "vue";
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";
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 viscosityAnalysis from "./components/viscosityAnalysis.vue";
import AARRRAnalysis from "./components/AARRRAnalysis.vue";
import portraitAnalysis from "./components/portraitAnalysis.vue";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const currentComponent = ref(null);
const contentRef = ref(null);
const menuIndex = ref(0);
const tabIndex = ref(0);
const fileTable = ref([]);
const tabList = ref([
  {
    id: "1",
    key: rfmAnalysis,
    title: "RFM分析",
    backImg: "src/assets/images/icon1.png",
  },
  {
    id: "2",
    key: abcAnalysis,
    title: "帕累托/ABC分析",
    backImg: "src/assets/images/icon2.png",
  },
  {
    id: "3",
    key: bostonAnalysis,
    title: "波士顿矩阵分析",
    backImg: "src/assets/images/icon3.png",
  },
  {
    id: "4",
    key: funnelAnalysis,
    title: "转化分析-漏斗模型",
    backImg: "src/assets/images/icon4.png",
  },
  {
    id: "5",
    key: basketAnalysis,
    title: "购物篮分析",
    backImg: "src/assets/images/icon5.png",
  },
  {
    id: "6",
    key: repurchaseAnalysis,
    title: "复购分析",
    backImg: "src/assets/images/icon6.png",
  },
  {
    id: "7",
    key: retainAnalysis,
    title: "留存分析",
    backImg: "src/assets/images/icon7.png",
  },
  {
    id: "8",
    key: viscosityAnalysis,
    title: "用户粘性分析",
    backImg: "src/assets/images/icon8.png",
  },
  {
    id: "9",
    key: AARRRAnalysis,
    title: "AARRR用户运营分析",
    backImg: "src/assets/images/icon9.png",
  },
  {
    id: "10",
    key: portraitAnalysis,
    title: "用户画像分析",
    backImg: "src/assets/images/icon10.png",
  },
]);
// defineExpose({ submitMethod });
onMounted(() => {
  // getTableData("用户属性表");
  currentComponent.value = tabList.value[0].key
});
const getTableData = (name) => {
  fileTable.value = [];
  portraitModel
    .getUserTableData({
      userId: 492,
      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) => {
  currentComponent.value = item.key;
  menuIndex.value = 0;
  //   tabIndex = item.id;
};
const submit = () => {
  contentRef.value.submitMethod();
};
const retrain = () => {
  contentRef.value.retrainMethod();
};
// defineExpose({
//   submit,
// });
</script>

<style lang="scss" scoped>
.content {
  color: #fff;
  .tabList {
    // display: flex;
    // width: 1060px;
    .tabs {
      cursor: pointer;
      font-size: 13px;
      margin-right: 13px;
      margin-bottom: 20px;
      width: 159px;
      height: 56px;
      background-image: url("@/assets/images/itembg1.png");
      background-size: 159px 56px;
      // display: flex;
      // justify-content: center;
      //   align-items: center;
      padding-left: 15px;
      line-height: 56px;
      display: inline-block;
      img {
        margin-right: 5px;
      }
    }
    .tabs:nth-of-type(2),
    .tabs:nth-of-type(9) {
      background-image: url("@/assets/images/itembg2.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: 153px;
      background-size: 153px  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>