dianshang-qianduan/src/views/digitalMarketingAlgorithms/components/bigData.vue

<template>
  <div class="app-main">
    <div class="main-left">
      <div class="left-top">
        <img style="width: 26px; height: 26px" src="../../../assets/images/图标1.png" alt="" />
        <span>内置表</span>
      </div>
      <div class="left-item">
        <div v-for="(item, index) in nzData" :key="index" class="item" :class="{ 'is-active': nzIndex === index }" @click="goNZ(index, item)">
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="left-top" style="margin-top: 35px">
        <img style="width: 26px; height: 26px" src="../../../assets/images/图标.png" alt="" />
        <span>自建表</span>
      </div>
      <div class="left-item">
        <div v-for="(item, index) in zjData" :key="index" class="item" :class="{ 'is-active': zjIndex === index }" @click="goZJ(index)">
          <span>{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="main-right">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle">
        <el-table-column v-for="column in tableLabel" :key="column" :prop="column.prop" :label="column.label" align="center" />
      </el-table>
      <pagination v-show="datatotal > 0" :total="datatotal" v-model:page="n_dataTableQuery.index" v-model:limit="n_dataTableQuery.size" @pagination="getSurface" style="margin-top: 10px" />
    </div>
  </div>
</template>
<script setup>
import * as portraitModel from "@/api/portraitModel";

import useUserStore from "@/store/modules/user";
import useAlgorithmStore from "@/store/modules/algorithm.js";
import { ref } from "vue";
const userStore = useUserStore();
const algorithmStore = useAlgorithmStore();
// 数据表query
const n_dataTableQuery = ref({
  index: 1,
  size: 20,
  tableName: "用户属性表",
  userId: userStore.userInfo.userId,
});
const datatotal = ref(0);
const nzIndex = ref(0);
const nzData = ["用户属性表", "用户登录活跃表", "用户消费能力表", "用户行为表", "用户评论表"];
const zjIndex = ref(-1);
const zjData = ["用户属性表", "用户登录活跃表", "用户消费能力表", "用户行为表", "用户评论表"];
const tableLabel = reactive([
  { prop: "id", label: "用户ID" },
  { prop: "loginName", label: "登录名" },
  { prop: "userName", label: "用户姓名" },
  { prop: "studentId", label: "学号" },
  { prop: "stuClass", label: "班级" },
  { prop: "major", label: "专业" },
  { prop: "school", label: "学校" },
  { prop: "roleName", label: "角色名称" },
  { prop: "roleGender", label: "角色性别" },
  { prop: "roleAge", label: "角色年龄" },
  { prop: "updateTime", label: "注册时间" },
  { prop: "location", label: "所在地" },
]);
const goNZ = (index, item) => {
  nzIndex.value = index;
  zjIndex.value = -1;
  n_dataTableQuery.value.tableName = item;
  getSurface();
};
const goZJ = (index) => {
  zjIndex.value = index;
  nzIndex.value = -1;
};
const tableData = ref([]);

const headerCellStyle = () => {
  return {
    color: "#ffffff !important",
  };
};
// 选择内置或自建
const selectType = (type) => {};
const getSurface = () => {
  portraitModel.getUserTableData(n_dataTableQuery.value).then((res) => {
    tableData.value = res?.data?.list;
    datatotal.value = res.data.total;
  });
};
onMounted(() => {
  getSurface();
});
</script>

<style lang="scss" scoped>
.app-main {
  //   background-color: #f5f5f5;
  margin: 20px 20px 0;
  height: calc(100vh - 150px);
  display: flex;
  overflow: auto;
  .main-left {
    width: 205px;
    height: 100%;
    background: #041c49;
    .left-top {
      gap: 5px;
      display: flex;
      align-items: center;
      padding: 10px 20px;
      span {
        font-weight: bold;
        font-size: 18px;
        color: #3596eb;
      }
    }
    .left-item {
      .item {
        width: 195px;
        height: 31px;
        // background: #1983DD;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        span {
          color: #9bd1ff;
          font-weight: 400;
          font-size: 14px;
        }
      }
      .is-active {
        background: #1983dd;
        span {
          color: #ffffff;
        }
      }
    }
  }
  .main-right {
    width: 1639px;
    height: 100%;
    padding: 20px;
    // background: #001D40;
    border: 1px solid #0452c6;
    // opacity: 0.5;
  }
}
:deep(.el-table__header) {
  .el-table__cell {
    background: linear-gradient(0deg, #002651 0%, #0087f9 100%) !important;
  }
}
:deep(.el-table) {
  --el-table-row-hover-bg-color: #002651 !important;
  --el-table-border-color: #002651;
  .el-table__row {
    background-color: #002652 !important;
    color: #e6e6e6;
  }
}
</style>