You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
426 lines
10 KiB
Vue
426 lines
10 KiB
Vue
<template>
|
|
<div class="bi-data-page" v-loading="loading">
|
|
<div class="main-left">
|
|
<div class="left-top">
|
|
<img 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 left-top--second">
|
|
<img src="../../../assets/images/图标.png" alt="" />
|
|
<span>自建表</span>
|
|
</div>
|
|
<div class="left-item">
|
|
<div class="metrics">
|
|
<div v-for="(item, index) in zjData" :key="index" class="item" :class="{ 'is-active': zjIndex === index }" @click.stop.prevent="selectType(item, index)">
|
|
<span>{{ item }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-button">
|
|
<input type="file" ref="fileData" class="hidden-file-input" @change="importData" />
|
|
<el-button type="primary" @click="$refs.fileData.click()">导入</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="main-right">
|
|
<el-scrollbar height="100%" class="data-scrollbar">
|
|
<el-table :data="tableData" class="data-table" :header-cell-style="headerCellStyle">
|
|
<el-table-column v-for="column in tableLabel" :key="column" :prop="column" :label="column" align="center" min-width="130">
|
|
<template #default="{ row }">
|
|
{{ formatDate(row[column]) ?? "..." }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<pagination v-show="datatotal > 0" :total="datatotal" v-model:page="n_dataTableQuery.index" v-model:limit="n_dataTableQuery.size" @pagination="getSurface" class="data-pagination" />
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
import * as marketingAlgorithmApi from "@/api/marketing-algorithm";
|
|
import { formatDate } from "@/utils/index.js";
|
|
import useUserStore from "@/store/modules/user";
|
|
import useAlgorithmStore from "@/store/modules/algorithm.js";
|
|
const { proxy } = getCurrentInstance();
|
|
import { getUserInfo } from "@/utils/auth";
|
|
const userInfo = JSON.parse(getUserInfo());
|
|
const loading = ref(false);
|
|
const fileData = ref(null);
|
|
const scrollbarHeight = ref(0);
|
|
const algorithmStore = useAlgorithmStore();
|
|
// 数据表query
|
|
const n_dataTableQuery = ref({
|
|
index: 1,
|
|
size: 15,
|
|
tableName: "",
|
|
userId: userInfo.userId,
|
|
});
|
|
const datatotal = ref(0);
|
|
const nzIndex = ref(0);
|
|
const nzData = ref([]);
|
|
const zjIndex = ref(-1);
|
|
const zjData = ref([]);
|
|
const tableLabel = ref([]);
|
|
const tableLabel2 = ref([]);
|
|
const arrhander = ref([]);
|
|
const arrhanderkey = ref([]);
|
|
// const arrMap = {
|
|
// 客户细分数据表: tableLabel.value,
|
|
// 销售预测数据表: tableLabel4.value,
|
|
// 购物车数据表: tableLabel5.value,
|
|
// 用户评论表: tableLabel3.value,
|
|
// };
|
|
const goNZ = (index, item) => {
|
|
nzIndex.value = index;
|
|
// tableLabel.value = arrMap[item];
|
|
n_dataTableQuery.value.tableName = item;
|
|
delete n_dataTableQuery.value.selfTableName;
|
|
getSurface();
|
|
};
|
|
const goZJ = (index) => {
|
|
zjIndex.value = index;
|
|
nzIndex.value = -1;
|
|
};
|
|
const tableData = ref([]);
|
|
const headerCellStyle = () => {
|
|
return {
|
|
color: "#1f2937 !important",
|
|
};
|
|
};
|
|
// 选择内置或自建
|
|
const selectType = (type, idx) => {
|
|
delete n_dataTableQuery.value.tableName;
|
|
n_dataTableQuery.value.selfTableName = type;
|
|
getSurface();
|
|
zjIndex.value = idx;
|
|
nzIndex.value = -1;
|
|
};
|
|
const getSurface = () => {
|
|
loading.value = true;
|
|
portraitModel
|
|
.getUserTableData(n_dataTableQuery.value)
|
|
.then((res) => {
|
|
tableLabel.value = Object.keys(res?.data?.list[0]);
|
|
tableData.value = res?.data?.list;
|
|
console.log(tableData.value, "454545");
|
|
datatotal.value = res?.data?.total;
|
|
tableLabel2.value = [];
|
|
if (tableData.value[0]?.stepOneA) {
|
|
arrhander.value = JSON.parse(tableData.value[0].stepOneA);
|
|
arrhanderkey.value = Object.keys(tableData.value[0]).slice(2, arrhander.value.length + 2);
|
|
arrhander.value.forEach((item, index) => {
|
|
tableLabel2.value.push({
|
|
prop: arrhanderkey.value[index],
|
|
label: item,
|
|
});
|
|
});
|
|
tableLabel.value = arrhanderkey.value;
|
|
}
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
}, 1000);
|
|
})
|
|
.catch((err) => {
|
|
loading.value = false;
|
|
tableData.value = [];
|
|
});
|
|
};
|
|
// 导入
|
|
const importData = (e) => {
|
|
loading.value = true;
|
|
const files = e.target.files[0];
|
|
const formdata = new FormData();
|
|
formdata.append("file", files);
|
|
formdata.append("userId", userInfo.userId);
|
|
marketingAlgorithmApi
|
|
.getMarketingAlgorithmImport(formdata)
|
|
.then((res) => {
|
|
getZJData();
|
|
selectZJ();
|
|
loading.value = false;
|
|
proxy.$modal.msgSuccess("导入成功");
|
|
})
|
|
.catch((err) => {
|
|
loading.value = false;
|
|
});
|
|
e.target.value = "";
|
|
};
|
|
//选择自建表
|
|
const selectZJ = (item) => {
|
|
portraitModel.getUserTableInfo({ userId: userInfo.userId }).then((res) => {
|
|
nzData.value = res.data.tableNames;
|
|
n_dataTableQuery.value.tableName = nzData.value[0];
|
|
getSurface();
|
|
algorithmStore.userDataLabel = [...res?.data.tableNames, ...res.data.selfBuiltTable].filter((item) => item !== "用户评论表");
|
|
});
|
|
};
|
|
// 查询自建下拉框
|
|
const getZJData = () => {
|
|
marketingAlgorithmApi.getMarketingAlgorithmTable({ userId: userInfo.userId }).then((res) => {
|
|
zjData.value = res?.data;
|
|
});
|
|
};
|
|
onMounted(() => {
|
|
selectZJ();
|
|
getZJData();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 墨黑极简：纯白画布、白面板灰描边、墨黑选中态、纯白表格、紧凑布局 */
|
|
.bi-data-page {
|
|
display: flex;
|
|
gap: 14px;
|
|
width: 100%;
|
|
height: calc(100vh - 150px);
|
|
min-height: 560px;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
|
|
.main-left {
|
|
display: flex;
|
|
flex: 0 0 208px;
|
|
flex-direction: column;
|
|
width: 208px;
|
|
height: 100%;
|
|
padding: 14px 12px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
|
|
.left-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 8px 10px;
|
|
|
|
&--second {
|
|
margin-top: 22px;
|
|
}
|
|
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
filter: grayscale(1);
|
|
opacity: 0.72;
|
|
}
|
|
|
|
span {
|
|
color: #1f2937;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
}
|
|
|
|
.left-item {
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
min-height: 32px;
|
|
padding: 0 10px;
|
|
margin-bottom: 4px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
transition: background 0.16s ease, color 0.16s ease;
|
|
|
|
span {
|
|
overflow: hidden;
|
|
color: #4b5563;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&:hover {
|
|
background: #f9fafb;
|
|
|
|
span {
|
|
color: #2563eb;
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-active {
|
|
background: #2563eb;
|
|
|
|
span {
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&:hover {
|
|
background: #1d4ed8;
|
|
|
|
span {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-button {
|
|
margin-top: auto;
|
|
padding-top: 14px;
|
|
|
|
.hidden-file-input {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.el-button) {
|
|
width: 100%;
|
|
height: 38px;
|
|
border: 1px solid #2563eb;
|
|
border-radius: 10px;
|
|
color: #ffffff;
|
|
background: #2563eb;
|
|
box-shadow: none;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
:deep(.el-button:hover),
|
|
:deep(.el-button:focus) {
|
|
border-color: #1d4ed8;
|
|
background: #1d4ed8;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-right {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
height: 100%;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.data-scrollbar {
|
|
height: 100%;
|
|
|
|
:deep(.el-scrollbar__wrap) {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
:deep(.el-scrollbar__view) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100%;
|
|
padding: 14px 16px 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.data-pagination {
|
|
margin-top: auto;
|
|
padding-top: 12px;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 表格：纯白底 + 墨黑表头 + 横向滚动 */
|
|
:deep(.el-table.data-table) {
|
|
--el-table-border-color: #e5e7eb;
|
|
--el-table-header-bg-color: #ffffff;
|
|
--el-table-header-text-color: #1f2937;
|
|
--el-table-row-hover-bg-color: #f9fafb;
|
|
--el-table-bg-color: #ffffff;
|
|
--el-table-tr-bg-color: #ffffff;
|
|
--el-table-text-color: #374151;
|
|
width: 100%;
|
|
font-size: 13px;
|
|
|
|
th.el-table__cell {
|
|
background: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.el-table__body-wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
/* 分页：墨黑极简（兜底，全局学生端规则之外再保一层） */
|
|
.bi-data-page :deep(.el-pagination) {
|
|
--el-pagination-bg-color: transparent;
|
|
--el-pagination-button-bg-color: #ffffff;
|
|
--el-pagination-hover-color: #2563eb;
|
|
color: #4b5563;
|
|
font-size: 13px;
|
|
|
|
.el-pagination__total,
|
|
.el-pagination__jump {
|
|
color: #6b7280;
|
|
}
|
|
|
|
button,
|
|
.el-pager li {
|
|
min-width: 30px;
|
|
height: 30px;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background-color: #ffffff;
|
|
color: #374151;
|
|
font-weight: 600;
|
|
}
|
|
|
|
button:hover,
|
|
.el-pager li:hover {
|
|
border-color: #2563eb;
|
|
color: #2563eb;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.el-pager li.is-active {
|
|
border-color: #2563eb;
|
|
background: #2563eb;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.el-select .el-input__wrapper {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
:deep(.pagination-container) {
|
|
position: static;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.bi-data-page {
|
|
flex-direction: column;
|
|
|
|
.main-left {
|
|
flex: none;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.main-right {
|
|
min-height: 420px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|