perf: serviceLog

src/pages/log/serviceLog/index.js

-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 => ({
-  title: key,
-  dataIndex: key,
-  key,
-}));
-// console.log(Object.keys(data[0]));
-const scale = {
-  name: {
-    alias: '接口名称', // 别名
-  },
-  subName: {
-    alias: '名称', // 别名
-  },
-};
-const dv1 = new DataSet.View().source(data);
-dv1
-  .transform({
-    type: 'aggregate', // 别名summary
-    fields: ['name'], // 统计字段集
-    operations: ['count'], // 统计操作集
-    as: ['计数'], // 存储字段集
-    groupBy: ['name'], // 分组字段集
-  })
-  .transform({
-    type: 'sort-by',
-    fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
-    order: 'DESC', // 默认为 ASC，DESC 则为逆序
-  });
-console.log(dv1.rows);
+// 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,
+    }));
+    setTableColumns(columns);
+    // console.log(Object.keys(data[0]));
+    const scale1 = {
+      Path: {
+        alias: '接口名称', // 别名
+      },
+      响应时长: {
+        alias: '响应时长/ms', // 别名
+      },
+    };
+    setScale(scale1);
+
+    const dv1 = new DataSet.View().source(data);
+    dv1
+      .transform({
+        type: 'aggregate', // 别名summary
+        fields: ['Path'], // 统计字段集
+        operations: ['count'], // 统计操作集
+        as: ['计数'], // 存储字段集
+        groupBy: ['Path'], // 分组字段集
+      })
+      .transform({
+        type: 'sort-by',
+        fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
+        order: 'DESC', // 默认为 ASC，DESC 则为逆序
+      });
+    console.log(dv1.rows);
+    setPathCount(dv1.rows.slice(0, 20));
+
+    const dv2 = new DataSet.View().source(data);
+    dv2
+      .transform({
+        type: 'aggregate', // 别名summary
+        fields: ['ConsumerTime'], // 统计字段集
+        operations: ['mean'], // 统计操作集
+        as: ['响应时长'], // 存储字段集
+        groupBy: ['Path'], // 分组字段集
+      })
+      .transform({
+        type: 'sort-by',
+        fields: ['响应时长'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
+        order: 'DESC', // 默认为 ASC，DESC 则为逆序
+      });
+    console.log(dv2.rows);
+    setReponseTime(dv2.rows.slice(0, 20));
+  };
 
-const dv2 = new DataSet.View().source(data);
-dv2
-  .transform({
-    type: 'aggregate', // 别名summary
-    fields: ['value'], // 统计字段集
-    operations: ['mean'], // 统计操作集
-    as: ['平均值'], // 存储字段集
-    groupBy: ['subName'], // 分组字段集
-  })
-  .transform({
-    type: 'sort-by',
-    fields: ['平均值'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
-    order: 'DESC', // 默认为 ASC，DESC 则为逆序
-  });
-console.log(dv2.rows);
+  // 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>
+      <Row>
+        <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={() => 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>
+      <Spin spinning={loading} tip="loading">
+        <Row style={{ padding: '10px' }}>
+          <Col span={12}>
+            <Chart
+              height={340}
+              width={400}
+              autoFit
+              data={pathCount}
+              interactions={['active-region']}
+              padding="auto"
+              scale={scale}
+            >
+              <Axis
+                name="Path"
+                label="null"
+                title={{ offset: 20, position: 'end' }}
+              />
+              <Axis name="计数" title />
+              <Interval position="Path*计数" />
+              <Tooltip shared />
+            </Chart>
           </Col>
           <Col span={12}>
-            <Button
-              onClick={() => {
-                // timeForm.setFieldsValue({ startTime: '2020-11-12 12:12:12' });
-              }}
+            <Chart
+              height={340}
+              width={400}
+              autoFit
+              data={reponseTime}
+              interactions={['active-region']}
+              padding="auto"
+              scale={scale}
             >
-              近1小时
-            </Button>
-            <Button>近6小时</Button>
-            <Button>近12小时</Button>
-            <Button>近1天</Button>
-            <Button>近1周</Button>
+              <Axis
+                name="Path"
+                label="null"
+                title={{ offset: 20, position: 'end' }}
+              />
+              <Axis name="响应时长" title />
+              <Interval position="Path*响应时长" />
+              <Tooltip shared />
+            </Chart>
           </Col>
         </Row>
-      </Form>
-      <Row style={{ padding: '10px' }}>
-        <Col span={8}>
-          <Chart
-            height={300}
-            width={400}
-            autoFit
-            data={dv1.rows}
-            interactions={['active-region']}
-            padding="auto"
-            scale={scale}
-          >
-            <Axis name="name" title />
-            <Axis name="计数" title />
-            <Interval position="name*计数" />
-            <Tooltip shared />
-          </Chart>
-        </Col>
-        <Col span={8}>
-          <Chart
-            height={300}
-            width={400}
-            autoFit
-            data={dv2.rows}
-            interactions={['active-region']}
-            padding="auto"
-            scale={scale}
-          >
-            <Axis name="subName" title />
-            <Axis name="平均值" title />
-            <Interval position="subName*平均值" />
-            <Tooltip shared />
-          </Chart>
-        </Col>
-      </Row>
-      <Table
-        size="small"
-        bordered
-        columns={columns || []}
-        dataSource={data}
-        // loading={tableLoading}
-        scroll={{ x: 'max-content' }}
-        pagination={{
-          showTotal: (total, range) =>
-            `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-          pageSizeOptions: [10, 20, 50, 100],
-          defaultPageSize: 20,
-          showQuickJumper: true,
-          showSizeChanger: true,
-        }}
-      />
+        <Table
+          size="small"
+          bordered
+          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: 10,
+            showQuickJumper: true,
+            showSizeChanger: true,
+          }}
+        />
+      </Spin>
     </>
   );
-}
+};
 export default Demo;
 // dv.transform({
 //   type: 'aggregate', // 别名summary

src/pages/userCenter/UserManage.js

@@ -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) => (