Commit 880e5347 authored by 皮倩雯's avatar 皮倩雯

fix: '日志管理界面'

parent b11f6d1d
Pipeline #74594 passed with stages
......@@ -846,6 +846,7 @@ const BookConfigNew = props => {
onOk={viewSubmit}
onCancel={() => {
setAccountVisile(false);
callBackSubmit();
}}
centered
bodyStyle={{ width: '100%', height: '800px', overflowY: 'scorll' }}
......
......@@ -98,6 +98,14 @@ const StandingBook = props => {
width: 200,
ellipsis: true,
},
{
title: '父台账名称',
dataIndex: 'PreName',
key: 'PreName',
align: 'center',
width: 200,
ellipsis: true,
},
{
title: '台账字段',
dataIndex: 'fields',
......
......@@ -1082,9 +1082,11 @@ const FlowChart = props => {
const jsonData = val => {
let listArr = [];
val.map((item, index) => {
if(!item.Config){
console.log(item);
debugger;
if (!item.Config) {
console.log(item);
debugger
debugger;
let arr = [];
arr.push({
mapServer: item.schemeName,
......@@ -1108,6 +1110,7 @@ const FlowChart = props => {
fromData: {
tableName: item.TableName,
filed: item.Fields,
filedShape: item.tableShape,
},
toData: arr,
},
......@@ -1118,6 +1121,7 @@ const FlowChart = props => {
fromData: {
tableName: item.TableName,
filed: item.Fields,
filedShape: item.tableShape,
},
toData: arr,
},
......@@ -1126,10 +1130,9 @@ const FlowChart = props => {
let json = JSON.stringify(obj);
let newObj = { Config: json, BackfillType: 'GIS', RuleName: item.RuleName };
listArr.push(newObj);
}else{
} else {
listArr.push(item);
}
});
return listArr;
};
......
......@@ -43,6 +43,7 @@ const AddModal = props => {
const [tableType, setTableType] = useState();
const [tableName, setTableName] = useState();
const [ruleList, setRuleList] = useState([]);
const [tableShape, setTableShape] = useState();
const [form] = Form.useForm();
useEffect(() => {
......@@ -54,7 +55,9 @@ const AddModal = props => {
setRuleList(arr);
getSchemeList();
if (modalType === 'edit') {
console.log(msg);
form.setFieldsValue(msg);
setTableShape(msg.tableShape);
setTableType(msg.tableType);
setTableName(msg.TableName);
}
......@@ -104,8 +107,6 @@ const AddModal = props => {
const getLayerFields = (val, key, value, typeFields) => {
let obj = form.getFieldsValue();
let newValue = value ? value : schemeValue;
console.log(schemeValue);
debugger;
let data = newValue.find(i => i.servicename === obj.schemeName);
GetLayerFields({
mapServer: data.servicename,
......@@ -141,6 +142,7 @@ const AddModal = props => {
arr.push(...item.TableFields);
});
let data = arr.find(i => i.FieldName === val[Object.keys(val)[0]]);
setTableShape(data.FiledShape);
setTableType(data.type);
setType(data.FiledType);
setTableName(data.table);
......@@ -178,7 +180,8 @@ const AddModal = props => {
} else {
obj = { ...validate, key: msg.ID || msg.key, ...arr };
}
onSubumit(obj, modalType, tableType, tableName);
debugger
onSubumit(obj, modalType, tableType, tableName, tableShape);
}
});
};
......
......@@ -81,6 +81,8 @@ const ConfigGIS = (props, ref) => {
let obj = {};
if (item.Config) {
let newConfig = JSON.parse(item.Config);
console.log(newConfig);
debugger
if (newConfig.mapping) {
let users = [];
newConfig.mapping[0].toData.map((x, y) => {
......@@ -90,6 +92,7 @@ const ConfigGIS = (props, ref) => {
obj.ID = index;
obj.RuleName = item.RuleName;
obj.TableName = newConfig.mapping[0].fromData.tableName;
obj.tableShape = newConfig.mapping[0].fromData.filedShape;
obj.key = index;
obj.nodeName1 = newConfig.mapping[0].toData[0].tableName;
obj.nodeValue1 = newConfig.mapping[0].toData[0].filed;
......@@ -112,6 +115,7 @@ const ConfigGIS = (props, ref) => {
obj.ID = index;
obj.RuleName = item.RuleName;
obj.TableName = newConfig.relationFormMapping[0].fromData.tableName;
obj.tableShape = newConfig.relationFormMapping[0].fromData.filedShape;
obj.key = index;
obj.nodeName1 = newConfig.relationFormMapping[0].toData[0].tableName;
obj.nodeValue1 = newConfig.relationFormMapping[0].toData[0].filed;
......@@ -176,20 +180,21 @@ const ConfigGIS = (props, ref) => {
setviewMsg(val);
};
// GIS配置确定回调
const saveView = (val, type, tableType, TableName) => {
const saveView = (val, type, tableType, TableName, tableShape) => {
let list = JSON.parse(JSON.stringify(tableData.current));
// eslint-disable-next-line prefer-spread
let newKey = list.length > 0 ? Math.max.apply(Math, list.map(item => item.key)) + 1 : 0;
if (type === 'add') {
list.push({ ...val, key: newKey, tableType, TableName });
list.push({ ...val, key: newKey, tableType, TableName, tableShape });
} else {
let edtiIndex = list.findIndex(item => item.key === val.key);
list[edtiIndex] = { ...val, key: newKey, tableType, TableName };
list[edtiIndex] = { ...val, key: newKey, tableType, TableName, tableShape };
}
tableData.current = list;
console.log(list);
debugger
nodeChage('FlowNodeBackfillConfigs', tableData.current);
setViewModal(false);
};
......
/* eslint-disable no-else-return */
/* eslint-disable no-unneeded-ternary */
import React, { useState, useEffect } from 'react';
import {
DatePicker,
Input,
Table,
Row,
Col,
Button,
notification,
message,
Tooltip,
Spin,
Pagination,
Select,
Tag,
Modal,
} from 'antd';
import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import styles from './index.less';
import { GetCallLogPages } from '@/services/logCenter/api';
const { RangePicker } = DatePicker;
const LogCenter = () => {
const [loading, setLoading] = useState(false); // 源数据
const [requestUrl, setRequestUrl] = useState(''); // 接口名称筛选
const [label, setLabel] = useState(''); // 标签筛选
const [allTime, setAllTime] = useState([
moment().startOf('month'),
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
]);
const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
const [total, setTotal] = useState();
const [pageSize, setPageSize] = useState(20);
const [currentPage, setCurrentPage] = useState(1);
const [keepTableList, setKeepTableList] = useState([]);
const [loginCodeFilters, setLoginCodeFilters] = useState([]);
const [loginStateCodeFilters, setLoginStateCodeFilters] = useState([]);
const [filteredValue, setFilteredValue] = useState([]);
const [content, setContent] = useState();
const [modalVisible, setModalVisible] = useState(false);
useEffect(() => {
getTableList();
}, []);
const getTableList = (pageIndex, page, time, url, tag) => {
setLoading(true);
GetCallLogPages({
pageIndex: pageIndex ? pageIndex : currentPage,
pageSize: page ? page : pageSize,
sortFieldsAndDirection: '',
isAll: true,
dateFrom: time
? time[0].format('YYYY-MM-DD HH:mm:ss')
: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
dateTo: time
? time[1].format('YYYY-MM-DD HH:mm:ss')
: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
requestUrl: url === '' ? '' : requestUrl,
thirdUrl: '',
label: tag === '' ? '' : label,
}).then(res => {
setLoading(false);
if (res.code === 0) {
setKeepTableList(res.data.list);
setTotal(res.data.totalCount);
setPageSize(res.data.pageSize);
setCurrentPage(res.data.pageIndex);
let arr1 = res.data.list.map(item => item.code);
arr1 = arr1.filter((value, index) => arr1.indexOf(value) === index);
setLoginCodeFilters(arr1.map(item => ({ text: item, value: item })));
let arr2 = res.data.list.map(item => item.statusCode);
arr2 = arr2.filter((value, index) => arr2.indexOf(value) === index);
setLoginStateCodeFilters(arr2.map(item => ({ text: item, value: item })));
} else {
setKeepTableList([]);
notification.error({
message: '提示',
duration: 3,
description: res.msg,
});
}
});
};
const columns = [
{
title: '接口标签',
dataIndex: 'label',
key: 'label',
width: 150,
fixed: 'left',
render: item => searchStyle1(item),
},
{
title: '接口名称',
dataIndex: 'requestUrl',
key: 'requestUrl',
width: 300,
fixed: 'left',
// render: item => searchStyle(item),
onCell: () => ({
style: {
maxWidth: 400,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer',
},
}),
render: record => (
<Tooltip placement="topLeft" title={record}>
{searchStyle(record)}
</Tooltip>
),
},
{
title: '调用时间',
dataIndex: 'time',
key: 'time',
width: 120,
align: 'center',
},
{
title: '调用结果',
dataIndex: 'code',
key: 'code',
width: 100,
align: 'center',
filters: loginCodeFilters,
onFilter: (value, record) => record.code === value,
filteredValue,
render: record => {
if (record === 0) {
return <span style={{ color: '#6ecd3d', fontWeight: 'bold' }}>成功</span>;
} else {
return <span style={{ color: 'red', fontWeight: 'bold' }}>失败</span>;
}
},
},
{
title: '耗时/ms',
dataIndex: 'consumerTime',
key: 'consumerTime',
align: 'center',
width: 80,
},
{
title: '返回状态码',
dataIndex: 'statusCode',
key: 'statusCode',
width: 100,
align: 'center',
filters: loginStateCodeFilters,
onFilter: (value, record) => record.statusCode === value,
filteredValue,
},
{
title: '请求方法',
dataIndex: 'method',
key: 'method',
width: 80,
align: 'center',
// render: record => {
// if (record === 'GET') {
// return <span style={{ color: '#6ecd3d', fontWeight: 'bold' }}>GET</span>;
// } else if (record === 'POST') {
// return <span style={{ color: '#ffb880', fontWeight: 'bold' }}>POST</span>;
// }
// },
},
{
title: '返回体大小/byte',
dataIndex: 'responseSize',
key: 'responseSize',
width: 130,
align: 'center',
},
{
title: '返回信息',
dataIndex: 'message',
key: 'message',
onCell: () => ({
style: {
maxWidth: 400,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer',
},
}),
render: record => (
<Tooltip placement="topLeft" title={record}>
{record}
</Tooltip>
),
},
{
title: '异常信息',
dataIndex: 'exception',
key: 'exception',
align: 'center',
width: 100,
render: record => {
if (record) {
return (
<Button
size="small"
type="primary"
onClick={() => {
handleLog(record);
}}
style={{ backgroundColor: 'red' }}
>
错误内容
</Button>
);
}
},
},
];
const handleLog = text => {
setModalVisible(true);
setContent(text);
};
// 模糊查询匹配的样式
const searchStyle = val => {
let n;
if (showSearchStyle) {
n = val.replace(new RegExp(requestUrl, 'g'), `<span style='color:red'>${requestUrl}</span>`);
} else {
n = val;
}
return <div dangerouslySetInnerHTML={{ __html: n }} />;
};
const searchStyle1 = val => {
let n;
if (showSearchStyle) {
n = val.replace(new RegExp(label, 'g'), `<span style='color:red'>${label}</span>`);
} else {
n = val;
}
return <div dangerouslySetInnerHTML={{ __html: n }} />;
};
const changeTime = time => {
let time1 = time[0].format('YYYY-MM');
let time2 = time[1].format('YYYY-MM');
if (time1 !== time2) {
message.warning('不允许跨月查询');
} else {
setAllTime(time);
setPageSize(20);
setCurrentPage(1);
getTableList(1, 20, time);
}
};
// 近1/6/12/24小时
const setTime = time => {
setAllTime([
moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
]);
};
const handleReset = () => {
setAllTime([moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')]);
setRequestUrl('');
setLabel('');
setShowSearchStyle(false);
getTableList(
1,
20,
[moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
'',
'',
);
};
const paginationChange = (page, pageSizes) => {
getTableList(page, pageSizes);
setCurrentPage(page);
setPageSize(pageSizes);
};
const onChangeInput = filters => {
setFilteredValue(filters.code, filters.statusCode);
};
return (
<div className={styles.omsLog}>
<Row className={styles.head}>
<Col span={24}>
<span style={{ lineHeight: 2, marginLeft: '7px' }}>时间:</span>
<RangePicker
locale={locale}
showTime
format="YYYY-MM-DD HH:mm:ss"
onChange={changeTime}
value={allTime}
allowClear={false}
/>
{/* <Button onClick={() => setTime(1)} style={{ marginLeft: '20px' }}>
近1小时
</Button>
<Button onClick={() => setTime(24)}>近1天</Button>
<Button onClick={() => setTime(24 * 7)}>近1周</Button>
<Button onClick={() => setTime(14 * 24)}>近2周</Button>
<Button onClick={() => setTime(30 * 24)}>近1月</Button> */}
<span style={{ marginLeft: '20px' }}>接口名称:</span>
<Input
style={{ width: '200px' }}
placeholder="请输入接口名称"
onChange={e => {
setRequestUrl(e.target.value);
}}
value={requestUrl}
allowClear
/>
<span style={{ marginLeft: '20px' }}>接口标签:</span>
<Input
style={{ width: '200px' }}
placeholder="请输入接口标签"
onChange={e => {
setLabel(e.target.value);
}}
value={label}
allowClear
/>
<Button
type="primary"
style={{ marginLeft: '10px' }}
onClick={() => {
setPageSize(20);
setCurrentPage(1);
getTableList(1, 20);
setShowSearchStyle(true);
}}
>
查询
</Button>
<Button
icon={<SyncOutlined className={styles.icon} />}
onClick={handleReset}
style={{
marginLeft: '25px',
verticalAlign: 'middle',
marginTop: '-3px',
}}
>
重置
</Button>
</Col>
</Row>
<Spin spinning={loading} tip="loading">
<div className={styles.table}>
<Table
size="small"
bordered
columns={columns}
dataSource={keepTableList}
scroll={{ x: 'max-content', y: 'calc(100vh - 225px)' }}
pagination={false}
onChange={onChangeInput}
/>
</div>
<Pagination
style={{ display: 'flex', justifyContent: 'end', padding: '10px' }}
total={total}
showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`}
pageSizeOptions={[10, 20, 40, 100]}
current={currentPage}
onChange={paginationChange}
size="small"
pageSize={pageSize}
showSizeChanger
/>
</Spin>
<Modal
title="详细信息"
visible={modalVisible}
keyboard={false}
maskClosable
centered
onOk={() => setModalVisible(false)}
onCancel={() => setModalVisible(false)}
width="1000px"
bodyStyle={{
minHeight: '100px',
maxHeight: '600px',
overflowY: 'scroll',
}}
style={{ top: '40px' }}
footer={[
<Button type="primary" onClick={() => setModalVisible(false)} key="back">
关闭窗口
</Button>,
]}
>
{content}
</Modal>
</div>
);
};
export default LogCenter;
.omsLog {
.head {
padding: 10px;
background: white;
margin-bottom: 2px;
min-width: 1030px;
}
.chart {
padding: 16px;
background: white;
}
.table {
border-top: 1px solid #f0eded;
// overflow: auto;//不要这个,pagination否则无法固定底部
.ant-table-thead tr th {
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
background-color: #f6f9fe;
}
.ant-table-body {
height: calc(100vh - 208px);
border-right: white;
overflow: auto !important;
// .ant-table-tbody{
// overflow: scroll !important;
// }
}
.ant-table-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ant-pagination {
z-index: 999;
border-top: 1px solid #f0eded;
}
.ant-table.ant-table-small {
width: 99%;
margin: 10px auto;
}
.ant-table-pagination {
padding-right: 12px;
background: white;
margin: 1px 0;
padding: 8px;
padding-right: 20px;
}
}
.ant-spin-container {
background-color: white;
}
.icon {
margin-top: -5px !important;
vertical-align: text-bottom;
}
}
......@@ -167,6 +167,7 @@ const MobileConfigPage = asyncComponent(() => import('@/pages/productCenter/mobi
const ServiceLog = asyncComponent(() => import('@/pages/log/serviceLog'));
const LoginLog = asyncComponent(() => import('@/pages/log/loginLog'));
const OmsLog = asyncComponent(() => import('@/pages/log/omsLog'));
const LogCenter = asyncComponent(() => import('@/pages/log/logCenter'));
const superAuthority = [USER_MODE.SUPER];
const adminAuthority = [...superAuthority, USER_MODE.ADMIN];
const iconStyle = { verticalAlign: 'middle' };
......@@ -529,6 +530,11 @@ export default {
name: '运维痕迹',
component: OmsLog,
},
{
path: '/system/logCenter',
name: '日志管理',
component: LogCenter,
},
],
},
],
......
/* eslint-disable camelcase */
/*
* @Description:
* @Author: leizhe
* @Date: 2021-09-27 09:42:21
* @LastEditTime: 2022-04-19 14:56:50
* @LastEditors: leizhe
*/
import { get, PUBLISH_SERVICE, post, postForm } from '../index';
// 获取错误日志、业务日志、第三方调用日志
export const GetCallLogPages = data => post(`/PandaCore/GCK/Log/GetCallLogPages`, data);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment