wutt
/
manHourHousekeeper


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords"
    content="工时管理，工时统计，工时填报，项目成本统计，生产工时管理系统，工时成本管理，工时管理软件，研发工时管理系统，企业工时管理系统，项目工时统计，项目工时统计软件，项目工时统计系统，工时统计系统，工时统计表" />
  <meta name="description" content="工时管家提供专业的工时填报和统计报表。支持PC和手机端。可按项目，部门，岗位等多维度统计成本。" />
  <title>工时管家-专注工时管理，手机移动填报，核算项目投入人力成本，企业IPO利器！</title>
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext"
    rel="stylesheet">
  <link href="/css/bootstrap.css" rel="stylesheet">
  <link href="/css/font-awesome.css" rel="stylesheet">
  <link href="/css/swiper.css" rel="stylesheet">
  <link href="/css/magnific-popup.css" rel="stylesheet">
  <link href="/css/styles.css" rel="stylesheet">
  <link href="/css/reset.css" rel="stylesheet">
  <link href="/css/tongyong.css" rel="stylesheet" >
  <link href="/css/knowledgeField.css" rel="stylesheet" >
</head>

<body data-spy="scroll" data-target=".fixed-top" id="body">
  <div class="spinner-wrapper">
      <div class="spinner">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
      </div>
  </div>
  <iframe id="headerIframe" src="/moduleView/header.html" class="iframeClass"></iframe>
  <div class="knowledgeFieldCon">
    <div v-loading="detailsSwitchingLoading" class="wh100 flex">
      <div class="knowledgeField">
        <div class="knowledgeField-header">
          <div class="knowledgeField-header-text">知识园地</div>
          <div class="flex">
            <input id="knowledgeInput" type="text" class="knowledgeInput" placeholder="请输入关键字搜索">
            <button class="searchButton" onclick="search()">搜索</button>
          </div>
        </div>
        <div class="knowledgeField-content">
          <#list knowledgeFieldTableList as item>
            <div>
              <div class="knowledgeField-content-item" onclick="triggerButtonClick(${item.id})">
                <div class="image"><img src="data:image;base64,${item.baseImage}" class="wh100" class="wh100"></img>
                </div>
                <div class="textContent">
                  <div>${ item.title }</div>
                  <p>${ item.profile }</p>
                  <button class="linkButtonss" onclick="learnMore(${item.id})">了解详情></button>
                </div>
              </div>
              <div class="dividingLine"></div>
            </div>
          </#list>
        </div>
        <div class="knowledgeField-bottom flex-center">
          <div class="pagination">
            <button class="prev" onclick="goToPage(currentPage - 1)">上一页</button>
            <ul id="page-list">
              <!-- 动态生成页码 -->
            </ul>
            <button class="next" onclick="goToPage(currentPage + 1)">下一页</button>
          </div>
          <div class="flex-center">
            到第
            <input type="number" class="paginationInput" min="0" id="paginationInput">
            页
          </div>
          <button onClick="confirmJump()" class="paginationButton">确定</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="/js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
<script src="/js/js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
<script src="/js/js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
<script src="/js/js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
<script src="/js/js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
<script src="/js/js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
<script src="/js/js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
<script src="/js/js/scripts.js"></script>
<script src="/js/iframe.js"></script>

<script>
  // 获取当前页面的 URL 参数
  const params = new URLSearchParams(window.location.search);

  // 将参数转换为一个对象
  const paramObj = {};
  params.forEach((value, key) => {
    paramObj[key] = value;
  });

  // 获取当前页面地址的参数
  const { pageIndex = 1, pageSize = 10 } = params;

  let total = ${total}
  let totalPages = Math.ceil(total / pageSize); // 总页数
  let currentSize = pageSize;
  let currentPage = pageIndex; // 当前页
  const knowledgeUrl = '/articleTemplate/pageList'
  const knowledgeDetails = '/articleTemplate/articleDetail'
  const fixedParameters = '?pageIndex=' + currentPage + '&pageSize=' + currentSize + '&info=' // 分页固定参数

  function search() {
    const inputVal = document.getElementById("knowledgeInput").value;
    window.location.href = knowledgeUrl + fixedParameters + inputVal
  }
  function learnMore(id) {
    window.location.href = knowledgeDetails + `?id=` + id
  }
  function triggerButtonClick(itemId) {
    // 找到该 item 对应的按钮并触发点击事件
    const button = document.querySelector('button[onclick="learnMore('+itemId+')"]');
    if (button) {
      button.click();
    }
  }
  function confirmJump() {
    let inputVal = document.getElementById("paginationInput").value;
    if(inputVal <= 0) {
      inputVal = 1
    }
    if(inputVal > totalPages) {
      inputVal = totalPages
    }
    if(!inputVal) {
      return
    }
    window.location.href = knowledgeUrl + '?pageIndex=' + inputVal + '&pageSize=' + currentSize
  }

  // 初始化分页组件
  function initPagination() {
    const pageList = document.getElementById('page-list');
    pageList.innerHTML = ''; // 清空之前的页码

    for (let i = 1; i <= totalPages; i++) {
      const li = document.createElement('li');
      li.textContent = i;
      li.classList.toggle('active', i === currentPage); // 设置当前页的样式
      li.onclick = () => goToPage(i);
      pageList.appendChild(li);
    }

    // 更新按钮的禁用状态
    document.querySelector('.prev').disabled = currentPage === 1;
    document.querySelector('.next').disabled = currentPage === totalPages;
  }

  // 跳转到指定页面
  function goToPage(page) {
    window.location.href = knowledgeUrl + '?pageIndex=' + page + '&pageSize=' + currentSize
  }

  // 初始化分页
  initPagination();

  function reinitIframe() {
      const iframe = document.getElementById("headerIframe");
      let observer = null
      if (iframe) {
          const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
          const iframeBody = iframeDocument.body
          observer = new MutationObserver(function(mutationsList, observer) {
              const bodyHeight = iframeBody.clientHeight;
              iframe.style.height = (bodyHeight + 1) + 'px';
          });

          observer.observe(iframeBody, { attributes: true, childList: true, subtree: true });
          let imgElement = iframeDocument.getElementById('logo');
          let headerItems = iframeDocument.querySelectorAll('.header-item')
          let headerView = iframeDocument.querySelector('.headerView')
          headerView.style.background = '#fff'
          imgElement.src = './image/logos.jpg'
          headerView.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0)';
          headerItems.forEach(function(item) {
              item.style.color = '#000'; // 设置你想要的字体颜色
          });
      }
  }
  reinitIframe()
  
</script>

</html>