123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510 |
- let page = 11;
- let pageSize = 20;
- let total = 0;
- let loadedItems = 0;
- let isLoading = false;
- const timeoutDuration = 10000;
- const preLoadDistance = 300;
- const authToken = localStorage.getItem("Authorization");
- 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');
- const license_info_closeModal = document.querySelector('.license-info-close');
- const license_info_loadingIndicator = document.getElementById('loading-indicator');
- let LicApplicationData = [];
- async function fetchLicenseData(page, pageSize) {
- try {
- const response = await fetch(`http://127.0.0.1:8080/api/admin/GetAllLicenseInfo?page=${page}&pageSize=${pageSize}`, {
- method: 'GET',
- headers: {
- 'Authorization': `Bearer ${authToken}`,
- 'Content-Type': 'application/json'
- }
- });
-
- const result = await response.json();
-
-
- if (total === 0 && result.total) {
- total = result.total;
- }
-
-
- LicApplicationData = LicApplicationData.concat(result.data || []);
- console.log("LicApplicationData: ",LicApplicationData);
- return result.data || [];
- } catch (error) {
- console.error("加载数据失败", error);
- return [];
- }
- }
- function renderLicenseCards(data, clearContainer = false) {
- console.log("-----------渲染次数");
-
- const license_info_container = document.getElementById('license-info-restaurant-list');
-
- if (clearContainer) {
- license_info_container.innerHTML = '';
- isLoading = false;
- loadedItems = 0;
- page = 11;
- pageSize = 20;
- console.log("-----------渲染清除");
- }
- console.log("-----------data:",data);
- data.forEach(group => {
- const firstItem = group[0];
- let statusClass = '';
- if (firstItem.LicenseFlage === '已生成') {
- statusClass = 'license-status-green';
- } else if (firstItem.LicenseFlage === '未生成') {
- statusClass = 'license-status-yellow';
- } else if (firstItem.LicenseFlage === '已失效') {
- statusClass = 'license-status-red';
- }
- const card = document.createElement('div');
- card.className = 'license-info-card';
-
-
- card.innerHTML = `
- <div class="license-info-card-header">
- <h3 class="card-title">${firstItem.GlxmName}</h3>
- </div>
- <div class="license-info-card-content">
- <p class="card-text">${firstItem.ApplicationDate} ${firstItem.ApplicationTime}</p> <!-- 显示日期和时间 -->
- <p class="card-text">创建者:${firstItem.Creator}</p>
- <p class="card-text">公司:${firstItem.Company}</p>
- <p class="card-text ${statusClass}">许可证状态:${firstItem.LicenseFlage}</p>
- <p class="card-text">oa_request_id:${firstItem.oa_request_id}</p>
- </div>
- `;
-
- card.addEventListener('click', () => {
- showModalForCard(group);
- });
-
-
- license_info_container.appendChild(card);
- });
-
- }
- function checkContentHeight() {
- const documentHeight = document.documentElement.scrollHeight;
- const windowHeight = window.innerHeight;
- if (documentHeight <= windowHeight) {
- console.log("页面内容不足,继续加载更多数据");
- loadMoreData();
- }
- }
- async function checkAndLoadMore(scrollHeight, scrollTop, clientHeight) {
- if (isLoading || loadedItems >= total) return;
-
- if (scrollTop + clientHeight >= scrollHeight - preLoadDistance) {
- console.log(`触发加载更多数据:page=${page}, pageSize=${pageSize}`);
- await loadMoreData();
- }
- }
- async function loadMoreData() {
- if (isLoading) return;
- isLoading = true;
- console.log('开始加载更多数据');
-
-
-
-
-
- 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 += 10;
- pageSize += 10;
-
- loadedItems += data.length;
-
- renderLicenseCards(data);
- console.log('数据加载完成,更新页面');
- }
-
-
- isLoading = false;
-
- checkContentHeight();
- }
- function initializeScrollListeners() {
-
- window.addEventListener('scroll', handleWindowScroll);
-
- license_info_mainElement.addEventListener('scroll', handleMainScroll);
-
- }
- function removeScrollListeners() {
-
- window.removeEventListener('scroll', handleWindowScroll);
-
- license_info_mainElement.removeEventListener('scroll', handleMainScroll);
- }
- function handleWindowScroll() {
-
- checkAndLoadMore(document.body.scrollHeight, window.scrollY, window.innerHeight);
- }
- function handleMainScroll() {
- checkAndLoadMore(license_info_mainElement.scrollHeight, license_info_mainElement.scrollTop, license_info_mainElement.clientHeight);
- }
- (async function() {
- const data = await fetchLicenseData(1, 10);
- if (data.length > 0) {
- renderLicenseCards(data);
- loadedItems += data.length;
- }
-
-
- checkContentHeight();
- })();
- initializeScrollListeners()
- function showModalForCard(item) {
- const modal = document.getElementById('license-info-modal');
- const modalContent = document.querySelector('.license-info-modal-content');
- const modalBody = document.getElementById('license-info-modal-body');
-
- let currentPage = 1;
- const itemsPerPage = 2;
-
- const sortedItem = item.sort((a, b) => a.oa_id - b.oa_id);
- const totalPages = Math.ceil(sortedItem.length / itemsPerPage);
-
- const paginationContainer = document.querySelector('.license-info-modal-pagination');
-
- paginationContainer.innerHTML = '';
-
- const prevButton = document.createElement('button');
- prevButton.classList.add('prev-page');
- prevButton.innerText = '上一页';
- paginationContainer.appendChild(prevButton);
-
- const selectPageDropdown = document.createElement('select');
- paginationContainer.appendChild(selectPageDropdown);
-
- const nextButton = document.createElement('button');
- nextButton.classList.add('next-page');
- nextButton.innerText = '下一页';
- paginationContainer.appendChild(nextButton);
-
-
- function initializeHeaderContent(firstItem) {
-
- const modalHeader = document.querySelector('.license-info-modal-header');
- modalHeader.innerHTML = '';
-
- const companyDiv = document.createElement('div');
- companyDiv.classList.add('license-info-company');
- companyDiv.innerHTML = `<strong>Company: </strong> ${firstItem.Company}`;
- const creatorDiv = document.createElement('div');
- creatorDiv.classList.add('license-info-creator');
- creatorDiv.innerHTML = `<strong>Creator: </strong> ${firstItem.Creator}`;
- const applicationDateDiv = document.createElement('div');
- applicationDateDiv.classList.add('license-info-application-date');
- applicationDateDiv.innerHTML = `<strong>Application Date: </strong> ${firstItem.ApplicationDate}`;
- const applicationTimeDiv = document.createElement('div');
- applicationTimeDiv.classList.add('license-info-application-time');
- applicationTimeDiv.innerHTML = `<strong>Application Time: </strong> ${firstItem.ApplicationTime}`;
-
- const button1 = document.createElement('button');
- button1.classList.add('license-info-modal-button');
- button1.innerText = '按钮1';
- button1.addEventListener('click', () => {
- alert('按钮1被点击');
- });
- const button2 = document.createElement('button');
- button2.classList.add('license-info-modal-button');
- button2.innerText = '按钮2';
- button2.addEventListener('click', () => {
- alert('按钮2被点击');
- });
-
- modalHeader.appendChild(companyDiv);
- modalHeader.appendChild(creatorDiv);
- modalHeader.appendChild(applicationDateDiv);
- modalHeader.appendChild(applicationTimeDiv);
- modalHeader.appendChild(button1);
- modalHeader.appendChild(button2);
- }
-
- function initializeDropdown() {
- selectPageDropdown.innerHTML = '';
- for (let page = 1; page <= totalPages; page++) {
- const option = document.createElement('option');
- option.value = page;
- option.innerText = `第 ${page} 页`;
- selectPageDropdown.appendChild(option);
- }
- selectPageDropdown.value = currentPage;
- }
-
- function renderPage(page) {
- modalBody.innerHTML = '';
-
- const startIndex = (page - 1) * itemsPerPage;
- const endIndex = Math.min(startIndex + itemsPerPage, sortedItem.length);
-
- const firstItem = sortedItem[0];
- initializeHeaderContent(firstItem);
-
- for (let i = startIndex; i < endIndex; i++) {
- const group = sortedItem[i];
- const groupBox = document.createElement('div');
- groupBox.classList.add('license-info-group-box');
-
- groupBox.innerHTML = `
- <div class="license-info-group-title">组 ${i + 1}</div>
- <p><strong>UniqueID:</strong> ${group.UniqueID}</p>
- <p><strong>oa_id:</strong> ${group.oa_id}</p>
- <p><strong>oa_request_id:</strong> ${group.oa_request_id}</p>
- <p><strong>Creator:</strong> ${group.Creator}</p>
- <p><strong>oa_request_name_new:</strong> ${group.oa_request_name_new}</p>
- `;
-
- modalBody.appendChild(groupBox);
- }
-
- selectPageDropdown.value = page;
-
- prevButton.disabled = (page === 1);
- nextButton.disabled = (page === totalPages);
- }
-
- selectPageDropdown.addEventListener('change', function() {
- currentPage = parseInt(this.value);
- renderPage(currentPage);
- });
-
- prevButton.addEventListener('click', function() {
- if (currentPage > 1) {
- currentPage--;
- renderPage(currentPage);
- }
- });
-
- nextButton.addEventListener('click', function() {
- if (currentPage < totalPages) {
- currentPage++;
- renderPage(currentPage);
- }
- });
-
- function togglePaginationVisibility() {
- if (totalPages <= 1) {
-
- paginationContainer.style.display = 'none';
- } else {
-
- paginationContainer.style.display = 'flex';
- }
- }
-
- initializeDropdown();
- renderPage(currentPage);
-
- togglePaginationVisibility();
-
- modal.style.display = 'flex';
- setTimeout(() => {
- modalContent.classList.add('show');
- }, 10);
-
- const closeModal = document.querySelector('.license-info-close');
- closeModal.addEventListener('click', () => {
- modalContent.classList.remove('show');
- setTimeout(() => {
- modal.style.display = 'none';
- }, 500);
- });
-
- window.addEventListener('click', (event) => {
- if (event.target === modal) {
- modalContent.classList.remove('show');
- setTimeout(() => {
- modal.style.display = 'none';
- }, 500);
- }
- });
- }
- const userManagementLink = document.getElementById('user-management-link');
- const licenseInfoLink = document.getElementById('license-info-link');
- userManagementLink.addEventListener('click', function(event) {
- event.preventDefault();
- removeScrollListeners();
-
- fetch('user_management.html')
- .then(response => response.text())
- .then(data => {
-
- license_info_mainElement.innerHTML = data;
-
-
- })
- .catch(error => console.error('加载用户管理页面失败:', error));
- });
- licenseInfoLink.addEventListener('click', function(event) {
- event.preventDefault();
-
- const licenseInfoHtml = `
- <div class="license-info-container" id="license-info-restaurant-list"> </div>
- `;
-
- license_info_mainElement.innerHTML = licenseInfoHtml;
-
- LicApplicationData = [];
- initializeScrollListeners();
-
- (async function() {
- const data = await fetchLicenseData(1, 10);
- if (data.length > 0) {
- console.log('加载的数据:', data);
- renderLicenseCards(data, true);
-
- } else {
- console.error('未加载到数据');
- }
- })();
- });
|