507 lines
27 KiB
TypeScript
507 lines
27 KiB
TypeScript
import { connect } from "umi";
|
||
import type { CurrentUser } from "umi";
|
||
import type { ConnectState } from "@/models/connect";
|
||
import React, { useRef, useState } from "react";
|
||
import ProCard from "@ant-design/pro-card";
|
||
import { MenuFoldOutlined } from "@ant-design/icons";
|
||
import type { FormInstance } from "antd";
|
||
import { Button, message, Space, Spin, Tree } from "antd";
|
||
import useRequest from "@ahooksjs/use-request";
|
||
import { getServerpartTree } from "@/services/options";
|
||
import type { ActionType } from "@ant-design/pro-table";
|
||
import ProTable from "@ant-design/pro-table";
|
||
import ReactHTMLTableToExcel from "react-html-table-to-excel";
|
||
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
|
||
import { handleGetOPERATELOGList } from "./service";
|
||
import moment from 'moment'
|
||
import { exportXlsxFromProColumnsExcelJS } from "@/utils/exportExcelFun";
|
||
|
||
|
||
const saleRankReport: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||
const { currentUser } = props
|
||
const downloadBtnRef = useRef<any>()
|
||
const actionRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
|
||
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
const [treeView, setTreeView] = useState<any>()
|
||
const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
|
||
|
||
|
||
// 树相关的属性和方法
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
// 导出的加载效果
|
||
const [showLoading, setShowLoading] = useState<boolean>(false)
|
||
// 是否显示打印的表格
|
||
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
||
// 查询的条件
|
||
const [searchParams, setSearchParams] = useState<any>()
|
||
|
||
const columns: any = [
|
||
{
|
||
title: '统计时间',
|
||
dataIndex: 'search_date',
|
||
valueType: 'dateRange',
|
||
hideInTable: true,
|
||
hideInDescriptions: true,
|
||
search: {
|
||
transform: (value) => {
|
||
return {
|
||
search_date_Start: value[0],
|
||
search_date_End: value[1],
|
||
};
|
||
},
|
||
},
|
||
fieldProps: {
|
||
ranges: {
|
||
"本月": [moment().startOf('M'), moment()],
|
||
"上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
|
||
"近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
|
||
"近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
|
||
}
|
||
},
|
||
initialValue: [moment().startOf('M'), moment()],
|
||
},
|
||
{
|
||
title: '查询内容',
|
||
width: 120,
|
||
ellipsis: true,
|
||
dataIndex: 'searchValue',
|
||
hideInTable: true,
|
||
},
|
||
// {
|
||
// title: '查询日期',
|
||
// width: 160,
|
||
// valueType: 'date',
|
||
// hideInTable: true,
|
||
// dataIndex: 'searchDate',
|
||
// initialValue: moment(),
|
||
// },
|
||
{
|
||
title: '访问编码',
|
||
width: 120,
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
dataIndex: 'OPERATELOG_ID'
|
||
},
|
||
{
|
||
dataIndex: 'USER_PASSPORT',
|
||
title: '登录账号',
|
||
width: 200,
|
||
ellipsis: true,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'USER_LOGINIP',
|
||
title: '登录地址',
|
||
ellipsis: true,
|
||
width: 160,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'USER_LOGINPLACE',
|
||
title: '登录地点',
|
||
ellipsis: true,
|
||
width: 160,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'BROWSER_VERSION',
|
||
title: '浏览器版本',
|
||
width: 140,
|
||
ellipsis: true,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'OPERATING_SYSTEM',
|
||
title: '操作系统',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'OPERATELOG_TYPE',
|
||
title: '登录状态',
|
||
width: 120,
|
||
align: 'center',
|
||
valueType: 'select',
|
||
valueEnum: {
|
||
1000: { text: '成功', status: 'Processing' },
|
||
1001: { text: '失败', status: 'Default' },
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'OPERATELOG_DESC',
|
||
title: <div style={{ textAlign: 'center' }}>备注说明</div>,
|
||
ellipsis: true,
|
||
width: 160,
|
||
align: 'left',
|
||
hideInSearch: true,
|
||
},
|
||
{
|
||
dataIndex: 'OPERATE_DATE',
|
||
title: '登录时间',
|
||
ellipsis: true,
|
||
width: 160,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
},
|
||
]
|
||
|
||
const exportTable = (e) => {
|
||
e.stopPropagation(); // 防止Collapse组件收起
|
||
const main = document.getElementsByClassName(`saleReportHideBox${printIndex}`)[0]
|
||
const thead = main.querySelector('thead').cloneNode(true); // 深克隆DOM节点
|
||
const tbody = main.querySelector('tbody').cloneNode(true); // 深克隆DOM节点
|
||
const container = document.querySelector('#hiddenBox');
|
||
|
||
const tempTable = document.createElement('table');
|
||
tempTable.appendChild(thead);
|
||
tempTable.appendChild(tbody);
|
||
|
||
tempTable.setAttribute('id', 'table-to-xls-saleRankReport'); // 给table添加id，值与按钮上的table字段对应
|
||
|
||
container.appendChild(tempTable); // 把创建的节点添加到页面容器中
|
||
|
||
setShowLoading(false)
|
||
|
||
downloadBtnRef.current.handleDownload();
|
||
setShowExportTable(false)
|
||
tempTable.remove() // 防止重复打印一个内容
|
||
}
|
||
|
||
|
||
return (
|
||
<div ref={(el) => {
|
||
// 打印报表
|
||
if (!reqDetailList || reqDetailList.length === 0) return;
|
||
setPrintOut(el);
|
||
}} >
|
||
|
||
{
|
||
showLoading ?
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
background: 'rgba(0,0,0,0.1)',
|
||
position: 'fixed',
|
||
zIndex: 5,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center'
|
||
}}
|
||
>
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: '15px 20px 10px',
|
||
background: '#fff',
|
||
borderRadius: '8px',
|
||
width: '200px'
|
||
}}>
|
||
<Spin />
|
||
<span style={{ marginLeft: '5px' }}>数据导出中...</span>
|
||
</div>
|
||
</div> : ''
|
||
}
|
||
|
||
<div className={`saleReportHideBox${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
|
||
{
|
||
showExportTable && reqDetailList && reqDetailList.length > 0 ?
|
||
<ProTable
|
||
columns={columns}
|
||
dataSource={reqDetailList}
|
||
pagination={false}
|
||
expandable={{
|
||
defaultExpandAllRows: true
|
||
}}
|
||
/> : ''
|
||
}
|
||
</div>
|
||
<div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />
|
||
|
||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||
<div style={{
|
||
width: '100%',
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0
|
||
}}>
|
||
<ProTable
|
||
actionRef={actionRef}
|
||
formRef={formRef}
|
||
columns={columns}
|
||
bordered
|
||
expandable={{
|
||
expandRowByClick: true
|
||
}}
|
||
headerTitle={'登录日志列表'}
|
||
scroll={{ y: 'calc(100vh - 450px)' }}
|
||
search={{ span: 6 }}
|
||
pagination={{ pageSize: 100 }}
|
||
request={async (params) => {
|
||
const req: any = {
|
||
SearchParameter: {
|
||
OPERATELOG_TYPES: params?.OPERATELOG_TYPE ? params?.OPERATELOG_TYPE : '1000,1001',
|
||
OPERATE_DATE_Start: moment(params?.search_date_Start).format('YYYY-MM-DD'),
|
||
OPERATE_DATE_End: moment(params?.search_date_End).format('YYYY-MM-DD'),
|
||
Province_Code: '734100',
|
||
},
|
||
SortStr: 'OPERATE_DATE desc',
|
||
KeyWord: {
|
||
Key: 'USER_NAME,USER_LOGINIP,USER_LOGINPLACE,BROWSER_VERSION,OPERATING_SYSTEM',
|
||
Value: params?.searchValue || ''
|
||
},
|
||
Province_Code: '734100',
|
||
PageIndex: 1,
|
||
PageSize: 999999
|
||
}
|
||
setSearchParams(params)
|
||
const data = await handleGetOPERATELOGList(req)
|
||
console.log('login', data);
|
||
if (data && data.length > 0) {
|
||
let res: any = data
|
||
let ipConfig: any = {
|
||
"36.4.22.102": "安徽省宿州市萧县",
|
||
"36.60.46.185": "安徽省合肥市",
|
||
"39.144.36.176": "安徽省宿州市",
|
||
"39.144.124.27": "浙江省杭州市",
|
||
"39.144.124.132": "浙江省杭州市",
|
||
"39.144.158.24": "江苏省徐州市",
|
||
"39.144.159.253": "安徽省滁州市",
|
||
"39.144.160.136": "安徽省淮北市",
|
||
"39.144.160.143": "安徽省淮北市",
|
||
"39.144.160.144": "安徽省淮北市",
|
||
"39.144.160.152": "安徽省淮北市",
|
||
"39.144.160.157": "安徽省淮北市",
|
||
"39.144.161.11": "安徽省六安市",
|
||
"39.144.161.210": "安徽省宿州市",
|
||
"39.144.161.233": "安徽省宿州市",
|
||
"39.144.161.254": "安徽省宿州市",
|
||
"39.172.4.108": "浙江省嘉兴市海宁市",
|
||
"39.172.4.201": "浙江省嘉兴市海宁市",
|
||
"39.172.4.213": "浙江省嘉兴市海宁市",
|
||
"39.172.5.59": "浙江省嘉兴市海宁市",
|
||
"39.172.5.112": "浙江省嘉兴市海宁市",
|
||
"39.172.5.121": "浙江省嘉兴市海宁市",
|
||
"39.172.5.127": "浙江省嘉兴市海宁市",
|
||
"60.163.34.228": "浙江省嘉兴市南湖区",
|
||
"60.163.46.232": "浙江省嘉兴市南湖区",
|
||
"60.163.47.184": "浙江省嘉兴市海盐县",
|
||
"60.163.52.122": "浙江省嘉兴市秀洲区",
|
||
"60.163.53.59": "浙江省嘉兴市海宁市",
|
||
"60.163.55.165": "浙江省嘉兴市海宁市",
|
||
"60.163.55.167": "浙江省嘉兴市桐乡市",
|
||
"60.163.58.172": "浙江省嘉兴市海宁市",
|
||
"60.163.59.232": "浙江省嘉兴市海宁市",
|
||
"60.163.59.236": "浙江省嘉兴市海宁市",
|
||
"60.163.60.47": "浙江省嘉兴市海宁市",
|
||
"60.163.60.59": "浙江省嘉兴市海宁市",
|
||
"60.163.62.90": "浙江省嘉兴市桐乡市",
|
||
"60.171.238.244": "安徽省宿州市萧县",
|
||
"60.172.217.114": "安徽省淮北市濉溪县",
|
||
"60.172.217.145": "安徽省淮北市濉溪县",
|
||
"60.176.162.186": "浙江省杭州市上城区",
|
||
"60.176.164.76": "江苏省常州市武进区",
|
||
"60.176.164.247": "浙江省杭州市上城区",
|
||
"112.32.22.113": "安徽省合肥市瑶海区",
|
||
"114.96.180.180": "安徽省淮北市濉溪县",
|
||
"114.96.194.20": "安徽省淮北市濉溪县",
|
||
"114.100.64.31": "安徽省合肥市蜀山区",
|
||
"114.101.225.25": "安徽省六安市",
|
||
"115.192.49.197": "浙江省杭州市上城区",
|
||
"115.192.53.9": "浙江省杭州市上城区",
|
||
"115.192.107.101": "浙江省杭州市上城区",
|
||
"115.193.225.226": "浙江省杭州市上城区",
|
||
"115.193.227.227": "浙江省杭州市上城区",
|
||
"115.193.231.250": "浙江省杭州市上城区",
|
||
"115.194.85.219": "浙江省杭州市上城区",
|
||
"115.194.177.186": "浙江省杭州市上城区",
|
||
"115.195.193.45": "浙江省杭州市上城区",
|
||
"115.196.92.254": "浙江省杭州市上城区",
|
||
"115.198.179.20": "浙江省杭州市上城区",
|
||
"115.204.235.249": "浙江省杭州市上城区",
|
||
"115.205.166.1": "浙江省杭州市上城区",
|
||
"115.205.167.144": "浙江省杭州市上城区",
|
||
"115.206.6.18": "浙江省杭州市上城区",
|
||
"115.227.185.89": "浙江省杭州市上城区",
|
||
"115.230.232.107": "浙江省嘉兴市南湖区",
|
||
"115.230.233.85": "浙江省嘉兴市南湖区",
|
||
"117.64.111.55": "安徽省合肥市长丰县",
|
||
"117.69.251.95": "安徽省淮北市濉溪县",
|
||
"117.70.141.75": "安徽省合肥市",
|
||
"117.136.100.128": "安徽省淮北市",
|
||
"117.136.100.179": "安徽省淮北市",
|
||
"117.136.100.200": "安徽省宿州市",
|
||
"117.136.111.237": "浙江省杭州市",
|
||
"120.243.183.29": "安徽省淮北市濉溪县",
|
||
"122.231.76.168": "浙江省杭州市上城区",
|
||
"122.235.192.101": "浙江省杭州市上城区",
|
||
"122.235.199.72": "浙江省杭州市上城区",
|
||
"122.235.235.125": "浙江省杭州市上城区",
|
||
"122.235.236.69": "浙江省杭州市上城区",
|
||
"122.235.236.102": "浙江省杭州市上城区",
|
||
"122.235.237.105": "浙江省杭州市上城区",
|
||
"122.238.13.42": "浙江省嘉兴市海宁市",
|
||
"122.238.16.70": "浙江省嘉兴市平湖市",
|
||
"122.238.19.85": "浙江省嘉兴市南湖区",
|
||
"122.238.22.131": "浙江省嘉兴市海宁市",
|
||
"122.238.22.208": "浙江省嘉兴市海宁市",
|
||
"122.238.125.207": "浙江省嘉兴市桐乡市",
|
||
"122.238.126.126": "浙江省嘉兴市海宁市",
|
||
"122.238.127.172": "浙江省嘉兴市海宁市",
|
||
"122.238.141.162": "浙江省嘉兴市秀洲区",
|
||
"122.238.141.164": "浙江省嘉兴市秀洲区",
|
||
"122.238.141.172": "浙江省嘉兴市秀洲区",
|
||
"122.238.155.77": "浙江省嘉兴市南湖区",
|
||
"125.118.26.195": "浙江省杭州市上城区",
|
||
"125.119.7.98": "浙江省杭州市上城区",
|
||
"125.119.84.18": "浙江省杭州市上城区",
|
||
"125.119.84.45": "浙江省杭州市上城区",
|
||
"125.120.68.105": "浙江省杭州市上城区",
|
||
"125.120.92.21": "浙江省杭州市上城区",
|
||
"183.157.72.118": "浙江省杭州市上城区",
|
||
"218.23.8.6": "安徽省宿州市萧县",
|
||
"218.72.123.102": "浙江省杭州市上城区",
|
||
"218.74.48.78": "浙江省杭州市上城区",
|
||
"218.109.197.191": "浙江省杭州市上城区",
|
||
"220.178.52.243": "安徽省合肥市蜀山区",
|
||
"220.205.224.8": "安徽省合肥市",
|
||
"220.205.224.35": "安徽省合肥市",
|
||
"220.205.224.39": "安徽省合肥市",
|
||
"220.205.224.100": "安徽省合肥市",
|
||
"220.205.224.169": "安徽省合肥市",
|
||
"220.205.224.237": "安徽省合肥市",
|
||
"220.205.225.1": "安徽省合肥市",
|
||
"220.205.225.96": "安徽省合肥市",
|
||
"220.205.225.150": "安徽省合肥市",
|
||
"220.205.232.82": "安徽省合肥市",
|
||
"220.205.232.106": "安徽省合肥市",
|
||
"220.205.232.130": "安徽省合肥市",
|
||
"220.205.232.190": "安徽省合肥市",
|
||
"220.205.232.206": "安徽省合肥市",
|
||
"220.205.233.36": "安徽省合肥市",
|
||
"220.205.233.92": "安徽省合肥市",
|
||
"220.205.233.110": "安徽省合肥市",
|
||
"220.205.248.117": "安徽省合肥市",
|
||
"220.205.248.142": "安徽省合肥市",
|
||
"220.205.248.179": "安徽省合肥市",
|
||
"220.205.248.196": "安徽省合肥市",
|
||
"220.205.248.236": "安徽省合肥市",
|
||
"220.205.249.113": "安徽省合肥市",
|
||
"220.205.249.124": "安徽省合肥市",
|
||
"220.205.249.135": "安徽省合肥市",
|
||
"220.205.249.137": "安徽省合肥市",
|
||
"220.205.249.171": "安徽省合肥市",
|
||
"220.205.249.203": "安徽省合肥市",
|
||
"220.205.249.216": "安徽省合肥市",
|
||
"220.205.249.254": "安徽省合肥市",
|
||
"220.205.252.25": "安徽省合肥市",
|
||
"220.205.252.63": "安徽省合肥市",
|
||
"220.205.252.69": "安徽省合肥市",
|
||
"220.205.252.94": "安徽省合肥市",
|
||
"220.205.252.187": "安徽省合肥市",
|
||
"220.205.253.14": "安徽省合肥市",
|
||
"220.205.253.65": "安徽省合肥市",
|
||
"220.205.253.90": "安徽省合肥市",
|
||
"220.205.253.102": "安徽省合肥市",
|
||
"220.205.253.250": "安徽省合肥市",
|
||
"220.205.253.253": "安徽省合肥市",
|
||
"220.248.226.210": "安徽省合肥市蜀山区",
|
||
"222.221.252.82": "云南省昆明市西山区",
|
||
"223.104.34.163": "安徽省淮北市",
|
||
"223.104.34.171": "安徽省淮北市",
|
||
"223.104.34.175": "安徽省淮北市",
|
||
"223.104.34.176": "安徽省淮北市",
|
||
"223.104.34.187": "安徽省淮北市",
|
||
"223.104.155.31": "江苏省徐州市",
|
||
"223.104.155.88": "江苏省徐州市",
|
||
"223.242.198.246": "安徽省淮北市濉溪县",
|
||
"223.246.228.18": "安徽省合肥市",
|
||
}
|
||
for (let i = 0; i < res.length; i++) {
|
||
if (res[i].USER_LOGINIP && !res[i].USER_LOGINPLACE) {
|
||
if (ipConfig[res[i].USER_LOGINIP]) {
|
||
res[i].USER_LOGINPLACE = ipConfig[res[i].USER_LOGINIP]
|
||
} else {
|
||
// await fetch(`/baidu-api/location/ip?ip=${res[i].USER_LOGINIP}&coor=bd09ll&ak=XrQQuNQRGxap9YH2xmvx3dzuJVkXhTzT`).then(response => response.text()).then(data => {
|
||
// let result: any = JSON.parse(data)
|
||
// console.log('resultresultresult', result);
|
||
// ipConfig[res[i].USER_LOGINIP] = result.content.address
|
||
// });
|
||
ipConfig[res[i].USER_LOGINIP] = ""
|
||
}
|
||
}
|
||
}
|
||
|
||
console.log('resresres', res);
|
||
console.log('ipConfigipConfigipConfig', ipConfig);
|
||
|
||
|
||
setReqDetailList(res)
|
||
return { data: res, success: true }
|
||
}
|
||
return { data: [], success: true }
|
||
}}
|
||
toolbar={{
|
||
actions: [
|
||
<span style={{ visibility: 'hidden' }}>
|
||
<ReactHTMLTableToExcel
|
||
buttonText={'导出excel'}
|
||
ref={downloadBtnRef}
|
||
table="table-to-xls-saleRankReport"
|
||
filename={`登录日志列表`}
|
||
sheet="sheet1"
|
||
/>
|
||
</span>,
|
||
<Button
|
||
key="new"
|
||
type="primary"
|
||
onClick={(e) => {
|
||
if (reqDetailList && reqDetailList.length > 0) {
|
||
// 尝试一下 导出新方法
|
||
exportXlsxFromProColumnsExcelJS(columns,
|
||
reqDetailList,
|
||
`登录日志`,
|
||
{
|
||
// topTitle: `进销存类别报表`, // 顶部大标题
|
||
// footerMaker: currentUser?.Name,
|
||
// footerMakerTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||
// footerStatsTime: ""
|
||
}
|
||
)
|
||
|
||
// setShowLoading(true)
|
||
// setTimeout(() => {
|
||
// setShowExportTable(true)
|
||
// setTimeout(() => {
|
||
// exportTable(e)
|
||
// }, 100)
|
||
// }, 100)
|
||
} else {
|
||
message.error('暂无数据可导出！')
|
||
}
|
||
}}
|
||
>
|
||
导出excel
|
||
</Button>
|
||
]
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(saleRankReport);
|