|
@@ -0,0 +1,198 @@
|
|
|
+const $ = require('jquery');
|
|
|
+require("../css/logManagement.less");
|
|
|
+require('./../resource/jquery-ui/jquery-ui.min.js');
|
|
|
+require('./modal.js');
|
|
|
+const { api } = require('./api.js')
|
|
|
+const { post, getCookie, getUrlArgObjectNew, emptyBox, setDatePicker, getPickerDate, listenScroll } = require('./utils.js')
|
|
|
+const iconCalenBlue = require("./../images/icon_calen_blue.png")
|
|
|
+const iconCalenGrey = require("./../images/icon_calen_grey.png")
|
|
|
+const arrowLeft= require("./../images/arrow_left.png")
|
|
|
+const arrowRight = require("./../images/arrow_right.png")
|
|
|
+
|
|
|
+let size=15, loginName = "", loginIp = ""
|
|
|
+
|
|
|
+$(function () {
|
|
|
+ listenScroll('.mukuai')
|
|
|
+ dateChange()
|
|
|
+
|
|
|
+ $(".abnormalClear").click(function () {
|
|
|
+ // window.location.reload()
|
|
|
+ loginName = ""
|
|
|
+ loginIp=""
|
|
|
+ setDatePicker($("#datepicker"), $("#datepicker2"), 1)
|
|
|
+ $(".loginName ").val("")
|
|
|
+ $(".loginIp ").val("")
|
|
|
+ getTabData(1)
|
|
|
+ })
|
|
|
+ setDatePicker($("#datepicker"), $("#datepicker2"), 1)
|
|
|
+ getTabData(1)//条目缺陷
|
|
|
+})
|
|
|
+$('.loginName').on("input", function (e) {
|
|
|
+ let val = $(this).val().trim()
|
|
|
+ loginName = val
|
|
|
+})
|
|
|
+$('.loginIp').on("input", function (e) {
|
|
|
+ let val = $(this).val().trim()
|
|
|
+ loginIp = val
|
|
|
+})
|
|
|
+
|
|
|
+$(".menu .page", parent.document).removeClass("active")
|
|
|
+$(parent.document).find(".menu .page[code=YH-RZGL-DLRZ]").addClass("active")
|
|
|
+//所有数据切换日期筛选
|
|
|
+function dateChange() {
|
|
|
+ $(".monthYear .mon").click(function () {
|
|
|
+ $(this).css({
|
|
|
+ backgroundColor: '#00A1FF',
|
|
|
+ color: '#fff'
|
|
|
+ }).siblings().css({
|
|
|
+ color: '#00A1FF',
|
|
|
+ backgroundColor: '#fff'
|
|
|
+ })
|
|
|
+ setDatePicker($("#datepicker"), $("#datepicker2"), 1)
|
|
|
+ getTabData(1)
|
|
|
+ })
|
|
|
+ $(".monthYear .year").click(function () {
|
|
|
+ $(this).css({
|
|
|
+ backgroundColor: '#00A1FF',
|
|
|
+ color: '#fff'
|
|
|
+ }).siblings().css({
|
|
|
+ color: '#00A1FF',
|
|
|
+ backgroundColor: '#fff'
|
|
|
+ })
|
|
|
+ setDatePicker($("#datepicker"), $("#datepicker2"), 2)
|
|
|
+ getTabData(1)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//获取表格数据
|
|
|
+function getTabData(activePage) {
|
|
|
+ const dateStatrt = getPickerDate($("#datepicker"), 1)
|
|
|
+ const dateEnd = getPickerDate($("#datepicker2"), 2)
|
|
|
+ const start = new Date(dateStatrt).getTime()
|
|
|
+ const end = new Date(dateEnd).getTime()
|
|
|
+ if (start > end) {
|
|
|
+ $.alerModal({ "message": '开始时间不能大于结束时间~', type: "tip", time: '1000', isFather: true, fatherWrapper: $("#mainBox", parent.document) });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const param = {
|
|
|
+ loginName: loginName.replace(/%/g,"/%").replace(/_/g,"/_"),
|
|
|
+ loginIp: loginIp.replace(/%/g,"/%").replace(/_/g,"/_"),
|
|
|
+ "startDate": dateStatrt,
|
|
|
+ "endDate": dateEnd,
|
|
|
+ size: size,
|
|
|
+ current:activePage,
|
|
|
+ }
|
|
|
+ $('.pagination').html("")
|
|
|
+ $('.tbody').html(emptyBox('努力加载中...', '', 1))
|
|
|
+ post(api.loginLogPage, param).then(res => {
|
|
|
+ if (res.data.code == '0') {
|
|
|
+ const data = res.data.data.records
|
|
|
+ const totalPage = res.data.data.pages
|
|
|
+ const totalNum = res.data.data.total
|
|
|
+ renderTab(data, activePage)
|
|
|
+ if(totalPage > 1){
|
|
|
+ renderPagination(totalPage,Number(activePage),totalNum)
|
|
|
+ } else{
|
|
|
+ $('.pagination').html("")
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ $('.tbody').html(emptyBox())
|
|
|
+ }
|
|
|
+ }).catch((e) =>{
|
|
|
+
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+$(".filter").on("click", function (e) {
|
|
|
+
|
|
|
+ getTabData(1)
|
|
|
+})
|
|
|
+
|
|
|
+function renderTab(data, activePage) {
|
|
|
+ let str = ``;
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ const item = data[i]
|
|
|
+ str += `
|
|
|
+ <tr data-id=${item.id} data-index=${i}>
|
|
|
+ <td class="textCenter">${(activePage - 1) * 15 + i + 1}</td>
|
|
|
+ <td data-model="${item.loginName}">${item.loginName}</td>
|
|
|
+ <td class="loginDate">${item.loginDate}</td>
|
|
|
+ <td class="loginIp">${item.loginIp||"-"}</td>
|
|
|
+ <td class="loginAddress">${item.loginAddress}</td>
|
|
|
+ <td class="loginBrowser">${item.loginBrowser}</td>
|
|
|
+ </tr>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ $('.tbody').html(str ? str : emptyBox())
|
|
|
+}
|
|
|
+
|
|
|
+//分页渲染
|
|
|
+function renderPagination(totalPage,activePage,totalNum){
|
|
|
+ let str = `<span class="totalSum">共${totalPage}页/${totalNum}条数据</span><span class="prePage"><img class="arrowPage" src=${arrowLeft} /></span>`
|
|
|
+ if(totalPage <= 6){
|
|
|
+ for(let i = 1; i <= totalPage; i++){
|
|
|
+ str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(activePage <= 3){ //选中页数小于4
|
|
|
+ for(let i = 1; i <= 4; i++){
|
|
|
+ str += `<span class="pageNum ${'page'+i}" data-page=${i}>${i}</span>`
|
|
|
+ }
|
|
|
+ str += `<span class="more" >...</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
|
|
|
+
|
|
|
+ } else if(activePage > totalPage -3){
|
|
|
+ str += `<span class="pageNum page1" data-page=1>1</span>`
|
|
|
+ str += `<span class="more" >...</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+(totalPage-3)}" data-page=${totalPage -3}>${totalPage -3}</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+(totalPage-2)}" data-page=${totalPage -2}>${totalPage -2}</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+(totalPage-1)}" data-page=${totalPage -1}>${totalPage -1}</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
|
|
|
+ } else {
|
|
|
+ str += `<span class="pageNum page1" data-page=1>1</span>`
|
|
|
+ str += `<span class="more" >...</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+(activePage -1)}" data-page=${activePage -1}>${activePage -1}</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+activePage}" data-page=${activePage}>${activePage}</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+(activePage +1)}" data-page=${activePage +1}>${activePage +1}</span>`
|
|
|
+ str += `<span class="more" >...</span>`
|
|
|
+ str += `<span class="pageNum ${'page'+totalPage}" data-page=${totalPage}>${totalPage}</span>`
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ str += `<span class="nextPage"><img class="arrowPage" src=${arrowRight} /></span>`
|
|
|
+ $('.pagination').html(str)
|
|
|
+ $('.page' + activePage).addClass('activePage')
|
|
|
+ $(".pageNum").on("click", function(e){
|
|
|
+ const activePageNow = Number($(this).attr('data-page'))
|
|
|
+ getTabData(activePageNow)
|
|
|
+ })
|
|
|
+ $(".prePage").on("click", function(e){
|
|
|
+ let activePageNow = Number($(".activePage").attr('data-page'))
|
|
|
+ if(activePageNow > 1){
|
|
|
+ activePageNow--
|
|
|
+ getTabData(activePageNow)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $(".nextPage").on("click", function(e){
|
|
|
+ let activePageNow = Number($(".activePage").attr('data-page'))
|
|
|
+ if(activePageNow < totalPage){
|
|
|
+ activePageNow++
|
|
|
+ getTabData(activePageNow)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+$(function () {
|
|
|
+ $('.datapickerBox').append(`<img class="iconCalen" src=${iconCalenGrey} />`)
|
|
|
+ $('.iconCalen').on("mouseenter", function (e) {
|
|
|
+ $(this).attr("src", iconCalenBlue)
|
|
|
+ })
|
|
|
+ $('.iconCalen').on("mouseleave", function (e) {
|
|
|
+ $(this).attr("src", iconCalenGrey)
|
|
|
+ })
|
|
|
+ $('.iconCalen').on("click", function (e) {
|
|
|
+ $(this).parent().find("input").focus()
|
|
|
+ })
|
|
|
+});
|