Skip to content

C
CivManage
Commit 4fa7c8e8 authored by 陈前坚's avatar 陈前坚
Browse files
Options

perf: serviceLog

parent 70cc8739
Show whitespace changes
Inline Side-by-side
Showing with 190 additions and 77 deletions
src/pages/log/serviceLog/index.js
View file @ 4fa7c8e8
import React from 'react';
import { Form, DatePicker, Table, Row, Col, Button } from 'antd';
import React, { useState, useEffect } from 'react';
import {
DatePicker,
Table,
Row,
Col,
Button,
notification,
message,
Spin,
} from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
import { DataSet } from '@antv/data-set';
import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index';
const data = [
{ value: 251, name: '接口名称一', subName: '子事例一' },
{ value: 1041, name: '接口名称三', subName: '子事例二' },
{ value: 610, name: '接口名称二', subName: '子事例二' },
{ value: 434, name: '接口名称二', subName: '子事例四' },
{ value: 335, name: '接口名称二', subName: '子事例五' },
{ value: 250, name: '接口名称三', subName: '子事例二' },
];
const columns = Object.keys(data[0]).map(key => ({
// const data = [
// { value: 251, name: '接口名称一', subName: '子事例一' },
// { value: 1041, name: '接口名称三', subName: '子事例二' },
// { value: 610, name: '接口名称二', subName: '子事例二' },
// { value: 434, name: '接口名称二', subName: '子事例四' },
// { value: 335, name: '接口名称二', subName: '子事例五' },
// { value: 250, name: '接口名称三', subName: '子事例二' },
// ];
// const data = [];
const Demo = () => {
const [loading, setLoading] = useState(false); // 源数据
const [data0, setData0] = useState([]); // 源数据
const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
const [scale, setScale] = useState({}); // 坐标轴别名
const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
const [endTime, setEndTime] = useState(
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
);
const [tableColumns, setTableColumns] = useState([]); // 源数据
console.log(startTime.format('HH:mm:ss'));
console.log(endTime.format('HH:mm:ss'));
// 在起止时间任意一个变化后获取数据
useEffect(() => {
if (startTime && endTime) {
setLoading(true);
getData();
}
}, [startTime, endTime]);
const getData = () => {
post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, {
PageIndex: 0,
PageSize: 0,
DateFrom: startTime.format('YYYY-MM-DD'),
DateTo: endTime.format('YYYY-MM-DD'),
HourFrom: startTime.format('HH:mm:ss'),
HourTo: endTime.format('HH:mm:ss'),
IP: '',
Module: '',
LogType: 0,
Description: '',
LoginName: '',
UserName: '',
})
.then(res => {
if (res.code === 0) {
setData0(res.data);
dataTransforrm(res.data);
console.log(res.data);
} else {
notification.error({
message: '数据获取失败',
description: res.message,
});
}
setLoading(false);
})
.catch(err => {
message.error(err);
setLoading(false);
});
};
const dataTransforrm = data => {
data.map((item, index) => {
item.key = index;
return item;
});
const columns = Object.keys(data[0]).map(key => ({
title: key,
dataIndex: key,
key,
}));
// console.log(Object.keys(data[0]));
const scale = {
name: {
}));
setTableColumns(columns);
// console.log(Object.keys(data[0]));
const scale1 = {
Path: {
alias: '接口名称', // 别名
},
subName: {
alias: '名称', // 别名
响应时长: {
alias: '响应时长/ms', // 别名
},
};
const dv1 = new DataSet.View().source(data);
dv1
};
setScale(scale1);
const dv1 = new DataSet.View().source(data);
dv1
.transform({
type: 'aggregate', // 别名summary
fields: ['name'], // 统计字段集
fields: ['Path'], // 统计字段集
operations: ['count'], // 统计操作集
as: ['计数'], // 存储字段集
groupBy: ['name'], // 分组字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv1.rows);
console.log(dv1.rows);
setPathCount(dv1.rows.slice(0, 20));
const dv2 = new DataSet.View().source(data);
dv2
const dv2 = new DataSet.View().source(data);
dv2
.transform({
type: 'aggregate', // 别名summary
fields: ['value'], // 统计字段集
fields: ['ConsumerTime'], // 统计字段集
operations: ['mean'], // 统计操作集
as: ['平均值'], // 存储字段集
groupBy: ['subName'], // 分组字段集
as: ['响应时长'], // 存储字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['平均值'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
fields: ['响应时长'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv2.rows);
console.log(dv2.rows);
setReponseTime(dv2.rows.slice(0, 20));
};
// DatePicker改变点击确定时
const changeStartTime = time => {
setStartTime(time);
};
const changeEndTime = time => {
setEndTime(time);
};
// 近1/6/12/24小时
const setTime = time => {
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setStartTime(
moment(
new Date(new Date().getTime() - time * 60 * 60 * 1000),
'YYYY-MM-DD HH:mm:ss',
),
);
};
function Demo() {
const [timeForm] = Form.useForm();
return (
<>
<Form style={{ padding: '0px 6px' }} form={timeForm}>
<Row>
<Col span={4}>
<Form.Item name="startTime" label="起始时间">
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
</Col>
<Col span={4}>
<Form.Item name="endTime" label="结束时间">
<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
</Form.Item>
</Col>
<div style={{ lineHeight: 2 }}>时间：</div>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="起始时间"
value={startTime}
onChange={changeStartTime}
allowClear={false}
/>
<SwapRightOutlined style={{ lineHeight: 2 }} />
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="结束时间"
value={endTime}
onChange={changeEndTime}
style={{ marginRight: '10px' }}
allowClear={false}
/>
<Col span={12}>
<Button
onClick={() => {
// timeForm.setFieldsValue({ startTime: '2020-11-12 12:12:12' });
}}
>
近1小时
</Button>
<Button>近6小时</Button>
<Button>近12小时</Button>
<Button>近1天</Button>
<Button>近1周</Button>
<Button onClick={() => setTime(1)}>近1小时</Button>
<Button onClick={() => setTime(6)}>近6小时</Button>
<Button onClick={() => setTime(12)}>近12小时</Button>
<Button onClick={() => setTime(24)}>近1天</Button>
<Button onClick={() => setTime(24 * 7)}>近1周</Button>
</Col>
{/* <div style={{ lineHeight: 2 }}>类型：</div> */}
</Row>
</Form>
<Spin spinning={loading} tip="loading">
<Row style={{ padding: '10px' }}>
<Col span={8}>
<Col span={12}>
<Chart
height={300}
height={340}
width={400}
autoFit
data={dv1.rows}
data={pathCount}
interactions={['active-region']}
padding="auto"
scale={scale}
>
<Axis name="name" title />
<Axis
name="Path"
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="计数" title />
<Interval position="name*计数" />
<Interval position="Path*计数" />
<Tooltip shared />
</Chart>
</Col>
<Col span={8}>
<Col span={12}>
<Chart
height={300}
height={340}
width={400}
autoFit
data={dv2.rows}
data={reponseTime}
interactions={['active-region']}
padding="auto"
scale={scale}
>
<Axis name="subName" title />
<Axis name="平均值" title />
<Interval position="subName*平均值" />
<Axis
name="Path"
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="响应时长" title />
<Interval position="Path*响应时长" />
<Tooltip shared />
</Chart>
</Col>
......@@ -125,22 +232,23 @@ function Demo() {
<Table
size="small"
bordered
columns={columns || []}
dataSource={data}
columns={tableColumns || []}
dataSource={data0}
// loading={tableLoading}
scroll={{ x: 'max-content' }}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 20,
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</Spin>
</>
);
}
};
export default Demo;
// dv.transform({
// type: 'aggregate', // 别名summary
......
src/pages/userCenter/UserManage.js
View file @ 4fa7c8e8
......@@ -81,7 +81,7 @@ const UserManage = () => {
const [addOrgVisible, setAddOrgVisible] = useState(false); // 添加机构
const [editOrgVisible, setEditOrgVisible] = useState(false); // 编辑机构
const [deleteOrgVisible, setDeleteOrgVisible] = useState(false); // 删除机构
const [roleVisible, setRoleVisible] = useState(false); // 用户关联
const [roleVisible, setRoleVisible] = useState(false); // 关联角色
const [changeOrgVisible, setChangeOrgVisible] = useState(false); // 更改机构
const [passwordVisible, setPasswordVisible] = useState(false); // 修改密码
const [editUserVisible, setEditUserVisible] = useState(false); // 编辑用户
......@@ -466,7 +466,7 @@ const UserManage = () => {
}, [currentUser]);
/** ***用户批量操作****** */
// 用户关联
// 关联角色
const relateRoles = () => {
getEmptyRoleList();
setRoleVisible(true);
......@@ -484,7 +484,7 @@ const UserManage = () => {
};
/** ***右侧表格相关操作****** */
// 用户关联
// 关联角色
const relateRole = record => {
setRoleVisible(true);
setCurrentUser(record);
......@@ -558,7 +558,12 @@ const UserManage = () => {
const phone = addUserForm.getFieldValue('phone') || '';
const email = addUserForm.getFieldValue('email') || '';
// 正则验证
if (!noChinese.test(loginName)) {
if (loginName === '') {
notification.error({
message: '提交失败',
description: '登录名不能为空!',
});
} else if (!noChinese.test(loginName)) {
notification.error({
message: '提交失败',
description: '登录名不支持中文!',
......@@ -1320,9 +1325,9 @@ const UserManage = () => {
>
<p>即将删除该机构，是否确认删除？</p>
</Modal>
{/* 用户关联 */}
{/* 关联角色 */}
<Modal
title="用户关联"
title="关联角色"
visible={roleVisible}
onOk={multiRelateRoles ? submitRoles : submitRole}
onCancel={() => {
......@@ -1334,7 +1339,7 @@ const UserManage = () => {
width="960px"
>
<Spin spinning={loading} tip="loading">
<Tabs defaultActiveKey="1">
<Tabs defaultActiveKey="1" style={{ marginTop: '-16px' }}>
<TabPane tab="角色" key="1">
{roleVisible &&
rolelist.map((role, index) => (
......
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