// 全局变量定义
const serverIP = '10.28.20.150';
const serverPort = '8080';
let page = 21; // 初始页码为1,代表从第1条数据开始获取
let pageSize = 30; // 初始每次固定获取10条数据
let licenseTotal = 0; // 数据总量(从接口获取)
let loadedItems = 0; // 已加载的数据条目数量
let isLoading = false; // 防止多次加载
const timeoutDuration = 10000; // 超时时间10秒
const preLoadDistance = 300; // 距离底部300px时提前加载
// 假设 Authorization 值存储在 localStorage 中,key 为 "authToken"
const authToken = localStorage.getItem("Authorization");
let currentUserInfo ; // 获取当前用户登录信息
let currentUserPermissions; // 用于存储用户权限信息
//获取 主内容区域
const license_info_mainElement = document.querySelector('main'); // 主内容区域
//模态框
const license_info_modal = document.getElementById('license-info-modal'); // 模态框容器
const license_info_modalContent = document.querySelector('.license-info-modal-content'); // 模态框内容区域
const license_info_modalDescription = document.getElementById('license-info-modal-description'); // 模态框描述
const license_info_modalPrice = document.getElementById('license-info-modal-price'); // 模态框产品信息
const license_info_modalRating = document.getElementById('license-info-modal-rating'); // 模态框MAC地址
const license_info_closeModal = document.querySelector('.license-info-close'); // 模态框关闭按钮
const license_info_loadingIndicator = document.getElementById('loading-indicator'); // 加载提示元素
//存储
let LicApplicationData = []; // 用于存储从接口获取的数据
// 统一的打开模态框函数
function openModal(modalId) {
const modal = document.getElementById(modalId);
if (modal) {
modal.style.display = "block"; // 显示模态框
} else {
console.error('模态框不存在,ID:', modalId);
}
}
// 统一的关闭模态框函数
function closeModal(modalId) {
const modal = document.getElementById(modalId);
if (modal) {
modal.style.display = "none"; // 隐藏模态框
} else {
console.error('模态框不存在,ID:', modalId);
}
}
//-----------头部--------------------------------
function setupUserInfoModal(currentUserInfo) {
console.log("currentUserInfo,", currentUserInfo);
// 获取按钮、模态框和关闭按钮的 DOM 元素
const loginButton = document.querySelector('.login-button');
const loginModal = document.getElementById('loginModal');
const loginModalClose = document.querySelector('.login-modal-close');
const userInfoContainer = document.getElementById('userInfoContainer');
// 设置按钮的显示内容为当前用户的名称
loginButton.textContent = currentUserInfo.Username;
// 点击按钮时显示模态框,并将用户信息填充到模态框中
loginButton.addEventListener('click', () => {
userInfoContainer.innerHTML = `
${firstItem.ApplicationDate} ${firstItem.ApplicationTime}
创建者:${creatorUser}
公司:${firstItem.Company}
集群:${childRowCount} 套 共计:${firstItem.TotalNodes} 节点
许可证状态:${firstItem.LicenseFlage}
`;
// 给卡片添加点击事件,点击后显示模态框
card.addEventListener('click', () => {
// 传递当前卡片的详细数据到模态框
const oaRequestId = card.getAttribute('data-oa-request-id');
showModalForCard(group, oaRequestId); // 传递 oa_request_id
//showModalForCard(group); // 传递当前卡片的详细数据到模态框
});
// 将卡片添加到容器中
license_info_container.appendChild(card);
});
}
// 检查是否滚动到底部并触发加载
// async function checkAndLoadMore(scrollHeight, scrollTop, clientHeight) {
// if (isLoading || loadedItems >= licenseTotal) return; // 如果正在加载或已加载完所有数据则退出
// // console.log(`Scroll Info - scrollHeight: ${scrollHeight}, scrollTop: ${scrollTop}, clientHeight: ${clientHeight}`);
// if (scrollTop + clientHeight >= scrollHeight - preLoadDistance) {
// console.log(`触发加载更多数据:page=${page}, pageSize=${pageSize}`); // 每次触发时打印输出
// await loadMoreData();
// }
// }
// 加载更多数据函数
async function loadMoreData() {
if (isLoading) return; // 防止重复加载
isLoading = true;
console.log('开始加载更多数据');
// 显示加载提示
// license_info_loadingIndicator.style.display = 'block'; // 显示提示
// license_info_loadingIndicator.innerText = '正在加载...'; // 重置加载提示
// 设置超时处理
const timeout = setTimeout(() => {
license_info_loadingIndicator.innerText = '加载超时,请重试'; // 修改提示语为超时提示
isLoading = false;
license_info_loadingIndicator.style.display = 'none'; // 超时后隐藏加载提示
}, timeoutDuration);
// 获取数据
const data = await fetchLicenseData(page, pageSize);
console.log(`加载的新数据 data`,data); // 每次触发时打印输出
// 清除超时定时器
clearTimeout(timeout);
if (data.length > 0) {
// 更新 page 和 pageSize,下一次请求从新的位置开始
page += 10; // 每次请求后,page 增加10,表示从下一组数据开始
pageSize += 10; // pageSize 每次递增10
// 更新已加载的条目数
loadedItems += data.length;
// 渲染数据到页面
renderLicenseCards(data);
console.log('数据加载完成,更新页面');
}
// 隐藏加载提示
//license_info_loadingIndicator.style.display = 'none'; // 加载完成后隐藏提示
isLoading = false; // 请求完成,允许下次请求
// 检查内容高度,必要时继续加载
//checkContentHeight();
checkAndLoadMore();
}
//--------------------------监听 window 滚动---监听 main 容器的滚动-----------------------------------------------
// // 监听 window 滚动
// window.addEventListener('scroll', () => {
// checkAndLoadMore(document.body.scrollHeight, window.scrollY, window.innerHeight);
// });
// // 监听 main 容器的滚动
// license_info_mainElement.addEventListener('scroll', () => {
// checkAndLoadMore(license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight);
// });
function initializeScrollListeners() {
// 只监听 main 容器的滚动
license_info_mainElement.addEventListener('scroll', handleMainScroll);
// console.log('滚动监听已初始化');
}
function removeScrollListeners() {
// 移除 main 容器的滚动监听
license_info_mainElement.removeEventListener('scroll', handleMainScroll);
}
// 新增一个重启滑动监听功能函数,当用户清空搜索条件时调用
function restartScrollListeners() {
// 重新绑定滑动监听器
initializeScrollListeners();
}
function handleMainScroll() {
// console.log('handleMainScroll', license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight);
checkAndLoadMore(license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight);
}
async function checkAndLoadMore(scrollHeight, scrollTop, clientHeight) {
if (isLoading || loadedItems >= licenseTotal) return; // 如果正在加载或已加载完所有数据则退出
// console.log(`Scroll Info - scrollHeight: ${scrollHeight}, scrollTop: ${scrollTop}, clientHeight: ${clientHeight}`);
if (scrollTop + clientHeight >= scrollHeight - preLoadDistance) {
console.log(`触发加载更多数据:page=${page}, pageSize=${pageSize}`); // 每次触发时打印输出
await loadMoreData();
}
}
//-----------------------------------------------------------------------------------------
// 初始化加载第一页
(async function() {
const data = await fetchLicenseData(1, 20);
if (data.length > 0) {
renderLicenseCards(data); // 渲染数据到页面
loadedItems += data.length; // 更新已加载的条目数
}
//license_info_loadingIndicator.style.display = 'none'; // 初始化后隐藏加载提示
// 检查内容高度
// checkContentHeight();
checkAndLoadMore()
})();
//初始化监听滚动条
initializeScrollListeners()
///-----------获取登录用户信息----------------------------------------
async function fetchUsername() {
try {
const response = await fetch(`http://${serverIP}:${serverPort}/api/admin/userInfo`, {
method: 'GET',
headers: {
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'application/json'
}
});
const data = await response.json();
currentUserRole = data.data.Role; // 存储当前用户的角色
currentUserName = data.data.Username;
// 使用获取到的角色,调用获取权限的接口
await fetchPermissionsByRole(currentUserRole);
console.log('当前用户角色:', data);
currentUserInfo = data.data;
// 调用该函数,初始化模态框
setupUserInfoModal(currentUserInfo);
updateMenuVisibility();
return data.data; // 返回获取到的用户信息数据
} catch (error) {
console.error('Error fetching user info or permissions:', error);
}
}
fetchUsername();
// 调用函数更新菜单可见性
// 将 fetchPermissionsByRole 转换为异步函数
async function fetchPermissionsByRole(role) {
try {
const response = await fetch(`http://${serverIP}:${serverPort}/api/admin/GetSelfRoles`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: role })
});
const data = await response.json();
currentUserPermissions = data.data.Permissions; // 获取用户的权限数组
console.log('currentUserPermissions:', currentUserPermissions);
// 检查用户是否有读取许可证的权限
const hasReadLicensePermission = currentUserPermissions.includes("read_license");
const hasReadLicenseAllPermission = currentUserPermissions.includes("read_all_license");
const hasReadUserPermission = currentUserPermissions.includes("read_user");
const hasReadRolePermission = currentUserPermissions.includes("get_role");
if (!hasReadLicensePermission && !hasReadLicenseAllPermission) {
if (hasReadRolePermission) {
document.getElementById('role-management-link').click();
}else if (hasReadUserPermission){
document.getElementById('user-management-link').click();
}
}
// if (hasReadLicensePermission || hasReadLicenseAllPermission) {
// document.getElementById('license-info-link').click();
// }else if (hasReadRolePermission) {// 根据权限触发相应的按钮点击事件
// // 如果没有读取许可证的权限,则触发角色管理按钮的点击事件
// document.getElementById('role-management-link').click();
// } else if ( hasReadUserPermission) {
// // 如果有读取许可证的权限,则触发用户管理按钮的点击事件
// document.getElementById('user-management-link').click();
// }
// if (hasReadRolePermission) {// 根据权限触发相应的按钮点击事件
// // 如果没有读取许可证的权限,则触发角色管理按钮的点击事件
// document.getElementById('role-management-link').click();
// } else if ( hasReadUserPermission) {
// // 如果有读取许可证的权限,则触发用户管理按钮的点击事件
// document.getElementById('user-management-link').click();
// }
// 定义权限类别
// const licensePermissions = ['upload_license', 'read_license'];
// const userPermissionsCheck = ['create_user', 'read_user', 'update_user', 'delete_user'];
// const rolePermissions = ['create_role', 'delete_role', 'update_role', 'get_role'];
// const hasLicenseAccess = licensePermissions.some(permission => userPermissions.includes(permission));
// const hasUserManagementAccess = userPermissionsCheck.some(permission => userPermissions.includes(permission));
// const hasRoleManagementAccess = rolePermissions.some(permission => userPermissions.includes(permission));
// 根据权限渲染菜单并显示初始页面
//renderMenuAndInitialPage(hasLicenseAccess, hasUserManagementAccess, hasRoleManagementAccess);
} catch (error) {
console.error('Error fetching permissions:', error);
}
}
//--------------进度条-------------------------------------------------
// 创建模态框的 DOM 元素并插入到 body 中
function createLoadingModal() {
const modalHTML = `