fix: '首页功能优化,日志管理重构'

src/pages/homePage/index.jsx

@@ -15,6 +15,7 @@ import {
   Dropdown,
   Menu,
   Empty,
+  Tabs,
 } from 'antd';
 import dengPao from '@/assets/images/icons/dengpao.png';
 import icon from '@/assets/images/icons/icon.png';
@@ -55,7 +56,9 @@ import {
 } from '@/services/webConfig/api';
 import classnames from 'classnames';
 import styles from './index.less';
+import { GetWayNumberofcalls } from '@/services/logCenter/api';
 const { Option } = Select;
+const { TabPane } = Tabs;
 
 const HomePage = () => {
   const [currentData, setCurrentData] = useState(''); // 解决方案的值
@@ -66,22 +69,30 @@ const HomePage = () => {
   const [loading, setLoading] = useState(false);
   const [website, setWebsite] = useState([]);
   const [keepTableList, setKeepTableList] = useState([]);
+  const [keepTableList1, setKeepTableList1] = useState([]);
+  const [keepTableList2, setKeepTableList2] = useState([]);
   const [tip, setTip] = useState([]);
   const [dashboardData, setDashboardData] = useState({});
   const [pipeArr, setPipeArr] = useState();
   const [scheme, setScheme] = useState();
   const history = useHistory();
-  const [state, setState] = useState();
+  const [state, setState] = useState('');
   const [product, setProduct] = useState([]);
   const [limitsWeb, setLimitsWeb] = useState(0);
   const [limitsPhone, setLimitsPhone] = useState(0);
   const [mapConfig, setMapConfig] = useState();
   const [flag, setFlag] = useState(0);
   const [show, setShow] = useState();
+  const [tableData1, setTableData1] = useState([]);
+  const [loadingCenter, setLoadingCenter] = useState(false);
+  const [loadingApi, setLoadingApi] = useState(false);
+  const [loadingDatabase, setLoadingDatabase] = useState(false);
+  const [loadingProduct, setLoadingProduct] = useState(false);
   const [allTime, setAllTime] = useState([
     moment().startOf('month'),
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
   ]);
+  const [activeKey, setActiveKey] = useState('1');
 
   useEffect(() => {
     setLoading(true);
@@ -102,8 +113,29 @@ const HomePage = () => {
     getLimits();
     getMapLayer();
     getDataBaseConfig();
+    getApiCount();
   }, [flag]);
 
+  const getApiCount = () => {
+    GetWayNumberofcalls({
+      pageIndex: 1,
+      pageSize: 10,
+      dateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      dateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
+    }).then(resData => {
+      if (resData.code === 0) {
+        setTableData1(resData.data.listdata);
+      } else {
+        setTableData1([]);
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: resData.msg,
+        });
+      }
+    });
+  };
+
   const getLimits = () => {
     GetMaplayerByTerminalType({ terminalType: 'web', isBaseMap: false }).then(res => {
       if (res.code === '0') {
@@ -124,7 +156,9 @@ const HomePage = () => {
   };
   // 获取产品列表
   const onGetProduct = () => {
+    setLoadingProduct(true);
     getProductList().then(res => {
+      setLoadingProduct(false);
       if (res.code === 0) {
         let arr = [];
         res.data.AllProducts.forEach(i => {
@@ -153,16 +187,16 @@ const HomePage = () => {
   };
 
   const getOMSDashboard = () => {
-    setDashboardData([]);
-    setWebsite([]);
+    setLoadingCenter(true);
     GetOMSDashboard().then(res => {
+      setLoadingCenter(false);
       if (res.code === 0) {
         let arr = [];
         res.data.Web?.forEach(i => {
-          arr.push({ type: 'web', value: i });
+          arr.push({ type: 'Web', value: i });
         });
         res.data.Mobile?.forEach(i => {
-          arr.push({ type: 'mobile', value: i });
+          arr.push({ type: 'Mobile', value: i });
         });
         setWebsite(arr);
         let newTipList = [];
@@ -210,6 +244,7 @@ const HomePage = () => {
 
   // 获取数据库连接配置信息
   const getDataBaseConfig = () => {
+    setLoadingDatabase(true);
     getDataBaseConfigNew().then(resnew => {
       let res = resnew.data;
       setDataBase(res);
@@ -221,7 +256,7 @@ const HomePage = () => {
   const onCheck = val => {
     let str = val ? val : dataBase;
     if (!val) {
-      setLoading(true);
+      setLoadingDatabase(true);
     }
 
     connectionTest({
@@ -231,7 +266,7 @@ const HomePage = () => {
       password: str.password,
     })
       .then(res => {
-        setLoading(false);
+        setLoadingDatabase(false);
         if (res.code === 0) {
           setState(res.data);
           if (!val) {
@@ -242,7 +277,7 @@ const HomePage = () => {
             });
           }
         } else {
-          setState();
+          setState('');
           notification.error({
             message: '提示',
             duration: 15,
@@ -298,6 +333,7 @@ const HomePage = () => {
 
   // 获取日志表格数据
   const getLogMessage = () => {
+    setLoadingApi(true);
     GetWayPages({
       pageIndex: 1,
       pageSize: 10,
@@ -306,10 +342,15 @@ const HomePage = () => {
       info: '',
       isSuccess: false,
     }).then(res => {
+      setLoadingApi(false);
       if (res.code === 0) {
         setKeepTableList(res.data.listData.list);
+        setKeepTableList1(res.data.consumData);
+        setKeepTableList2(res.data.countData.listdata);
       } else {
         setKeepTableList([]);
+        setKeepTableList1([]);
+        setKeepTableList2([]);
         notification.error({
           message: '提示',
           duration: 3,
@@ -621,66 +662,190 @@ const HomePage = () => {
     },
   ];
 
-  const buttonMenu = (
-    <Menu>
-      {currentList.map((i, j) => (
-        <Menu.Item key={j} onClick={() => menuChange(i)}>
-          {i}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+  const columns1 = [
+    {
+      title: '耗时排名',
+      width: 60,
+      align: 'center',
+      render: (text, record, index) => {
+        if (index === 0) {
+          return (
+            <div className={styles.sort} type={index + 1}>
+              {index + 1}
+            </div>
+          );
+        } else if (index === 1) {
+          return (
+            <div className={styles.sort} type={index + 1}>
+              {index + 1}
+            </div>
+          );
+        } else if (index === 2) {
+          return (
+            <div className={styles.sort} type={index + 1}>
+              {index + 1}
+            </div>
+          );
+        } else {
+          return <span>{index + 1}</span>;
+        }
+      },
+    },
+    {
+      title: '接口名称',
+      dataIndex: 'path',
+      key: 'path',
+      width: 300,
+      fixed: 'left',
+      onCell: () => ({
+        style: {
+          maxWidth: 400,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          cursor: 'pointer',
+        },
+      }),
+      render: record => (
+        <Tooltip placement="topLeft" title={record}>
+          {record}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '调用时间',
+      dataIndex: 'requestDate',
+      key: 'requestDate',
+      width: 140,
+      align: 'center',
+    },
+    {
+      title: '请求方法',
+      dataIndex: 'method',
+      key: 'method',
+      width: 80,
+      align: 'center',
+      render: record => {
+        if (record === 'GET') {
+          return (
+            <Tag color="orange" style={{ width: '44.44px' }}>
+              GET
+            </Tag>
+          );
+        }
+        return <Tag color="green">POST</Tag>;
+      },
+    },
+    {
+      title: '耗时/ms',
+      dataIndex: 'consumerTime',
+      key: 'consumerTime',
+      align: 'center',
+      width: 80,
+    },
+    {
+      title: '返回体大小/byte',
+      dataIndex: 'responseSize',
+      key: 'responseSize',
+      width: 130,
+      align: 'center',
+    },
+    {
+      title: '返回状态码',
+      dataIndex: 'result',
+      key: 'result',
+      width: 100,
+      align: 'center',
+    },
+  ];
 
-  const menuChange = e => {
-    setLoading(true);
-    changeSolution({
-      solution: e,
-    })
-      .then(res => {
-        if (res.code === 0) {
-          setCurrentData(e);
-          notification.success({
-            message: '提示',
-            description: '切换成功',
-            duration: 3,
-          });
-          setTimeout(() => {
-            setFlag(flag + 1);
-          }, 5000);
+  const columns2 = [
+    {
+      title: '调用频次排名',
+      width: 80,
+      align: 'center',
+      render: (text, record, index) => {
+        if (index === 0) {
+          return (
+            <div className={styles.sort} type={index + 1}>
+              {index + 1}
+            </div>
+          );
+        } else if (index === 1) {
+          return (
+            <div className={styles.sort} type={index + 1}>
+              {index + 1}
+            </div>
+          );
+        } else if (index === 2) {
+          return (
+            <div className={styles.sort} type={index + 1}>
+              {index + 1}
+            </div>
+          );
         } else {
-          setLoading(false);
-          notification.error({
-            message: '提示',
-            description: res.msg || '切换失败',
-            duration: 15,
-          });
+          return <span>{index + 1}</span>;
         }
-      })
-      .catch(err => {
-        console.error(err);
-      });
+      },
+    },
+    {
+      title: '接口名称',
+      dataIndex: 'path',
+      key: 'path',
+      width: 300,
+      fixed: 'left',
+      onCell: () => ({
+        style: {
+          maxWidth: 400,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          cursor: 'pointer',
+        },
+      }),
+      render: record => (
+        <Tooltip placement="topLeft" title={record}>
+          {record}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '调用次数',
+      dataIndex: 'count',
+      key: 'count',
+      width: 100,
+      align: 'center',
+    },
+  ];
+
+  const onChange = e => {
+    setActiveKey(e);
   };
 
   return (
-    <Spin tip="Loading..." spinning={loading}>
-      <div className={styles.homePage}>
-        <div className={styles.header}>
-          <img className={styles.headerImg} src={dengPao} style={{ height: '16px' }} alt="" />
-          <span className={styles.headerText}>[解决方案] 您当前使用的解决方案是:</span>
-          <span className={styles.headerTextBold}>{currentData}</span>
-          {show && (
-            <Dropdown overlay={buttonMenu}>
-              <span className={styles.headerChangeBtn}>去切换 >></span>
-            </Dropdown>
-          )}
-        </div>
-        <div className={styles.contentTop}>
-          <div className={styles.dataCenter}>
+    <div className={styles.homePage}>
+      <div className={styles.header}>
+        <img className={styles.headerImg} src={dengPao} style={{ height: '16px' }} alt="" />
+        <span className={styles.headerText}>[解决方案] 您当前使用的解决方案是</span>
+        <span className={styles.headerTextBold}>{currentData}</span>
+        {show && (
+          <span
+            className={styles.headerChangeBtn}
+            onClick={() => changeProject()}
+            style={{ cursor: 'pointer' }}
+          >
+            去切换 >>
+          </span>
+        )}
+      </div>
+      <div className={styles.contentTop}>
+        <div className={styles.dataCenter}>
+          <Spin tip="Loading..." spinning={loadingDatabase}>
             <div className={styles.content}>
               <div className={styles.dataCenterLabel}>
-                <div>服务器IP:</div>
-                <div>连接数据库:</div>
-                <div>连接状态:</div>
+                <div>服务器IP</div>
+                <div>连接数据库</div>
+                <div>连接状态</div>
               </div>
               <div className={styles.dataCenterValue}>
                 <div>{dataBase?.ip || '-'}</div>
@@ -712,10 +877,12 @@ const HomePage = () => {
                 </span>
               </div>
             )}
-          </div>
-          <div className={styles.userCenter}>
+          </Spin>
+        </div>
+        <div className={styles.userCenter}>
+          <Spin tip="Loading..." spinning={loadingCenter}>
             <div className={styles.top}>
-              <img src={people} alt="" style={{ marginRight: '5px' }} /> 用户总数：
+              <img src={people} alt="" style={{ marginRight: '5px' }} /> 用户总数
               <span className={styles.fontColor}>{dashboardData.用户总数}</span> 个
             </div>
             <Divider style={{ color: '#E3E7EC' }} />
@@ -744,10 +911,12 @@ const HomePage = () => {
                 用户中心 <img src={icon} alt="" />
               </span>
             </div>
-          </div>
-          <div className={styles.tableCenter}>
+          </Spin>
+        </div>
+        <div className={styles.tableCenter}>
+          <Spin tip="Loading..." spinning={loadingCenter}>
             <div className={styles.top}>
-              <img src={data} alt="" style={{ marginRight: '5px' }} /> 表单总数：
+              <img src={data} alt="" style={{ marginRight: '5px' }} /> 表单总数
               <span className={styles.fontColor}>{dashboardData.表单总数}</span> 个
             </div>
             <Divider style={{ color: '#E3E7EC' }} />
@@ -782,10 +951,12 @@ const HomePage = () => {
                 表单中心 <img src={icon} alt="" />
               </span>
             </div>
-          </div>
-          <div className={styles.flowCenter}>
+          </Spin>
+        </div>
+        <div className={styles.flowCenter}>
+          <Spin tip="Loading..." spinning={loadingCenter}>
             <div className={styles.top}>
-              <img src={flow} alt="" style={{ marginRight: '5px' }} /> 流程总数：
+              <img src={flow} alt="" style={{ marginRight: '5px' }} /> 流程总数
               <span className={styles.fontColor}>{dashboardData.流程数}</span> 个
             </div>
             <Divider style={{ color: '#E3E7EC' }} />
@@ -808,13 +979,15 @@ const HomePage = () => {
                 流程中心 <img src={icon} alt="" />
               </span>
             </div>
-          </div>
-          <div className={styles.hostCenter}>
+          </Spin>
+        </div>
+        <div className={styles.hostCenter}>
+          <Spin tip="Loading..." spinning={loadingProduct}>
             <div className={styles.content}>
               <div className={styles.dataCenterLabel}>
-                <div>站点编号:</div>
-                <div>产品授权:</div>
-                <div>网关状态:</div>
+                <div>站点编号</div>
+                <div>产品授权</div>
+                <div>网关状态</div>
               </div>
               <div className={styles.dataCenterValue}>
                 <div>{currentSiteInfo}</div>
@@ -839,22 +1012,24 @@ const HomePage = () => {
                 宿主管理 <img src={icon} alt="" />
               </span>
             </div>
-          </div>
+          </Spin>
         </div>
-        <div className={styles.contentCenter}>
-          <div className={styles.application}>
+      </div>
+      <div className={styles.contentCenter}>
+        <div className={styles.application}>
+          <Spin tip="Loading..." spinning={loadingCenter}>
             <div className={styles.head}>
               <div className={styles.icon} />
               <span>当前应用</span>
             </div>
             <div className={styles.content}>
               {website?.map(i => {
-                if (i.type === 'web') {
+                if (i.type === 'Web') {
                   return (
                     <div className={styles.contentItem}>
                       <div className={styles.contentLeft}>
                         <img src={web} alt="" />
-                        <span className={styles.blueIcon}>{i.type}:</span>
+                        <span className={styles.blueIcon}>{i.type}</span>
                       </div>
                       <div className={styles.contentText}>
                         <Tooltip title={i.value}>{i.value}</Tooltip>
@@ -866,7 +1041,7 @@ const HomePage = () => {
                   <div className={styles.contentItem}>
                     <div className={styles.contentLeftGreen}>
                       <img src={mobile} alt="" />
-                      <span className={styles.greenIcon}>{i.type}:</span>
+                      <span className={styles.greenIcon}>{i.type}</span>
                     </div>
                     <div className={styles.contentText}>
                       <Tooltip title={i.value}>{i.value}</Tooltip>
@@ -876,8 +1051,10 @@ const HomePage = () => {
               })}
               {website.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
             </div>
-          </div>
-          <div className={styles.userLogin}>
+          </Spin>
+        </div>
+        <div className={styles.userLogin}>
+          <Spin tip="Loading..." spinning={loadingCenter}>
             <div className={styles.head}>
               <div className={styles.headLeft}>
                 <div className={styles.icon} />
@@ -890,8 +1067,10 @@ const HomePage = () => {
             <div className={styles.content}>
               <ReactEcharts style={{ width: '100%', height: '100%' }} option={option} />
             </div>
-          </div>
-          <div className={styles.abnormal}>
+          </Spin>
+        </div>
+        <div className={styles.abnormal}>
+          <Spin tip="Loading..." spinning={loadingCenter}>
             <div className={styles.head}>
               <div className={styles.icon} />
               <span>消息提醒</span>
@@ -929,7 +1108,7 @@ const HomePage = () => {
                   </div>
                 </div>
               )}
-              {!state && (
+              {state === false && (
                 <div className={styles.contentItem}>
                   <div className={styles.contentItemTop}>
                     <div className={styles.topLeft}>
@@ -946,14 +1125,16 @@ const HomePage = () => {
                 <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
               )}
             </div>
-          </div>
+          </Spin>
         </div>
-        <div className={styles.contentBottom}>
-          <div className={styles.callLog}>
+      </div>
+      <div className={styles.contentBottom}>
+        <div className={styles.callLog}>
+          <Spin tip="Loading..." spinning={loadingApi}>
             <div className={styles.title}>
               <div className={styles.titleLeft}>
                 <div className={styles.icon} />
-                <span className={styles.text}>API调用日志</span>
+                <span className={styles.text}>API调用日志（最近10条）</span>
               </div>
               <div className={styles.linkIcon}>
                 <span onClick={() => toLogCenter()} style={{ cursor: 'pointer' }}>
@@ -962,17 +1143,48 @@ const HomePage = () => {
               </div>
             </div>
             <div className={styles.table}>
-              <Table
-                size="small"
-                bordered
-                columns={columns}
-                dataSource={keepTableList}
-                scroll={{ y: 'calc(100% - 53px)' }}
-                pagination={false}
-              />
+              <Tabs
+                activeKey={activeKey}
+                onChange={onChange}
+                tabPosition="left"
+                style={{ height: '100%' }}
+              >
+                <TabPane tab="错误API" key="1">
+                  <Table
+                    size="small"
+                    bordered
+                    columns={columns}
+                    dataSource={keepTableList}
+                    scroll={{ y: 'calc(100% - 53px)' }}
+                    pagination={false}
+                  />
+                </TabPane>
+                <TabPane tab="耗时API" key="2">
+                  <Table
+                    size="small"
+                    bordered
+                    columns={columns1}
+                    dataSource={keepTableList1}
+                    scroll={{ y: 'calc(100% - 53px)' }}
+                    pagination={false}
+                  />
+                </TabPane>
+                <TabPane tab="调用频次" key="3">
+                  <Table
+                    size="small"
+                    bordered
+                    columns={columns2}
+                    dataSource={tableData1}
+                    scroll={{ y: 'calc(100% - 53px)' }}
+                    pagination={false}
+                  />
+                </TabPane>
+              </Tabs>
             </div>
-          </div>
-          <div className={styles.gisMessage}>
+          </Spin>
+        </div>
+        <div className={styles.gisMessage}>
+          <Spin tip="Loading..." spinning={loadingCenter}>
             <div className={styles.head}>
               <div className={styles.icon} />
               <span>GIS信息</span>
@@ -980,11 +1192,11 @@ const HomePage = () => {
             <div className={styles.content}>
               <div className={styles.item}>
                 <div className={styles.dataCenterLabel}>
-                  <div>管网服务:</div>
-                  <div>元数据更新时间:</div>
-                  <div>地图方案:</div>
-                  <div>已配置权限:</div>
-                  <div>默认范围:</div>
+                  <div>管网服务</div>
+                  <div>元数据更新时间</div>
+                  <div>地图方案</div>
+                  <div>已配置权限</div>
+                  <div>默认范围</div>
                 </div>
                 <div className={styles.dataCenterValue}>
                   <div>
@@ -1006,7 +1218,7 @@ const HomePage = () => {
                     )}
                     {limitsPhone > 0 ? (
                       <Tag color="cyan" style={{ marginRight: 0, marginLeft: '8px' }}>
-                        手持
+                        mobile
                       </Tag>
                     ) : (
                       '-'
@@ -1030,10 +1242,10 @@ const HomePage = () => {
                 </span>
               </div>
             </div>
-          </div>
+          </Spin>
         </div>
       </div>
-    </Spin>
+    </div>
   );
 };
 

src/pages/homePage/index.less

@@ -611,6 +611,30 @@
         width: 100%;
         height: calc(100% - 60px);
         overflow: hidden;
+        .sort {
+          width: 22px;
+          height: 22px;
+          border-radius: 50%;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: auto;
+          &[type='1'] {
+            color: #fb0909;
+            border: 2px solid #faa0a0;
+          }
+          &[type='2'] {
+            color: #fb6a09;
+            border: 2px solid #f07942;
+          }
+          &[type='3'] {
+            color: #fbba09;
+            border: 2px solid #f8e680;
+          }
+        }
         :global {
           .ant-table-wrapper {
             height: 100%;
@@ -632,6 +656,19 @@
             }
           }
         }
+        .ant-tabs-tab {
+          padding: 8px 8px;
+        }
+
+        .ant-tabs-tab-active {
+          padding: 8px 8px;
+        }
+        .ant-tabs-tabpane {
+          padding-left: 12px;
+        }
+        .ant-tabs-content-left {
+          height: 100%;
+        }
       }
     }
     .gisMessage {

src/pages/log/logCenter/index.jsx

+/* eslint-disable no-lonely-if */
 /* eslint-disable no-else-return */
 /* eslint-disable no-unneeded-ternary */
 import React, { useState, useEffect, useRef } from 'react';
@@ -16,20 +17,35 @@ import {
   Select,
   Tag,
   Modal,
+  Tabs,
 } from 'antd';
-import { CalculatorFilled, SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
+import {
+  CalculatorFilled,
+  SwapRightOutlined,
+  SyncOutlined,
+  InfoCircleOutlined,
+} 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';
+import {
+  GetCallLogPages,
+  GetWayNumberofcalls,
+  GetAccessLog,
+  GetRemoteOperationLog,
+} from '@/services/logCenter/api';
 import { GetWayPages } from '@/services/homePage/api';
 
 const { RangePicker } = DatePicker;
 const { Option } = Select;
+const { TabPane } = Tabs;
 
 const LogCenter = () => {
   const [loading, setLoading] = useState(false); // 源数据
+  const [loading1, setLoading1] = useState(false); // 源数据
+  const [loadingAccess, setLoadingAccess] = useState(false); // 源数据
+  const [loadingRemote, setLoadingRemote] = useState(false); // 源数据
   const [requestUrl, setRequestUrl] = useState(''); // 接口名称筛选
   const [label, setLabel] = useState(''); // 标签筛选
   const [allTime, setAllTime] = useState([
@@ -37,20 +53,34 @@ const LogCenter = () => {
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
   ]);
   const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
-  const [total, setTotal] = useState();
+  const [total, setTotal] = useState(0);
   const [pageSize, setPageSize] = useState(20);
   const [currentPage, setCurrentPage] = useState(1);
+  const [total1, setTotal1] = useState(0);
+  const [pageSize1, setPageSize1] = useState(10);
+  const [currentPage1, setCurrentPage1] = useState(1);
   const [loginCodeFilters, setLoginCodeFilters] = useState([]);
   const [loginStateCodeFilters, setLoginStateCodeFilters] = useState([]);
   const [content, setContent] = useState();
   const [modalVisible, setModalVisible] = useState(false);
   const [tableData, setTableData] = useState([]);
+  const [tableData1, setTableData1] = useState([]);
+  const [tableDataAccess, setTableDataAccess] = useState([]);
+  const [tableDataRemote, setTableDataRemote] = useState([]);
   const [selectState, setSelectState] = useState('失败');
   const timeSorter = useRef('desc');
   const filterSorter = useRef('requestDate');
+  const [activeKey, setActiveKey] = useState('1');
+  const [totalAccess, setTotalAccess] = useState(0);
+  const [pageSizeAccess, setPageSizeAccess] = useState(20);
+  const [currentPageAccess, setCurrentPageAccess] = useState(1);
+  const [totalRemote, setTotalRemote] = useState(0);
+  const [pageSizeRemote, setPageSizeRemote] = useState(20);
+  const [currentPageRemote, setCurrentPageRemote] = useState(1);
 
   useEffect(() => {
     getTableList();
+    getApiCount();
   }, []);
 
   const getTableList = (pageIndex, page, time, url, tag, success, flag) => {
@@ -105,20 +135,105 @@ const LogCenter = () => {
     });
   };
 
+  const getApiCount = (pageIndex, page, time, url, flag) => {
+    setLoading1(true);
+    let newUrl = url ? url : requestUrl;
+    GetWayNumberofcalls({
+      pageIndex: pageIndex ? pageIndex : currentPage1,
+      pageSize: page ? page : pageSize1,
+      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'),
+      info: flag ? '' : newUrl,
+    }).then(resData => {
+      setLoading1(false);
+      if (resData.code === 0) {
+        setTableData1(resData.data.listdata);
+        setTotal1(resData.data.listcount);
+      } else {
+        setTableData1([]);
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: resData.msg,
+        });
+      }
+    });
+  };
+
+  const getAccessLog = (pageIndex, page, time, word, flag) => {
+    setLoadingAccess(true);
+    let newUrl = word ? word : requestUrl;
+    GetAccessLog({
+      keyword: flag ? '' : newUrl,
+      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'),
+      pageIndex: pageIndex ? pageIndex : currentPageAccess,
+      pageSize: page ? page : pageSizeAccess,
+    }).then(res => {
+      setLoadingAccess(false);
+      if (res.code === 0) {
+        setTableDataAccess(res.data.data);
+        setTotalAccess(res.data.count);
+      } else {
+        setTableDataAccess([]);
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+
+  const getRemoteOperationLog = (pageIndex, page, time, code) => {
+    setLoadingRemote(true);
+    GetRemoteOperationLog({
+      deviceCode: code ? code : requestUrl,
+      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'),
+      pageIndex: pageIndex ? pageIndex : currentPageRemote,
+      pageSize: page ? page : pageSizeRemote,
+    }).then(res => {
+      setLoadingRemote(false);
+      if (res.code === 0) {
+        setTableDataRemote(res.data.list);
+        setTotalRemote(res.data.totalCount);
+      } else {
+        setTableDataRemote([]);
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg,
+        });
+      }
+    });
+  };
+
   const columns = [
     {
       title: '接口名称',
       dataIndex: 'path',
       key: 'path',
-      width: 300,
+      width: 400,
       fixed: 'left',
       onCell: () => ({
         style: {
-          maxWidth: 400,
+          maxWidth: 300,
           overflow: 'hidden',
           whiteSpace: 'nowrap',
           textOverflow: 'ellipsis',
-          cursor: 'pointer',
         },
       }),
       render: record => (
@@ -157,13 +272,6 @@ const LogCenter = () => {
       width: 80,
       sorter: true,
     },
-    // {
-    //   title: '返回状态码',
-    //   dataIndex: 'result',
-    //   key: 'result',
-    //   width: 100,
-    //   align: 'center',
-    // },
     {
       title: '请求方法',
       dataIndex: 'method',
@@ -213,6 +321,233 @@ const LogCenter = () => {
     },
   ];
 
+  const columns1 = [
+    {
+      title: '调用频次排名',
+      width: 100,
+      align: 'center',
+      fixed: 'left',
+      render: (text, record, index) => {
+        let data = currentPage1 * pageSize1 + index + 1 - pageSize1;
+        if (data === 1) {
+          return (
+            <div className={styles.sort} type={data}>
+              {data}
+            </div>
+          );
+        } else if (data === 2) {
+          return (
+            <div className={styles.sort} type={data}>
+              {data}
+            </div>
+          );
+        } else if (data === 3) {
+          return (
+            <div className={styles.sort} type={data}>
+              {data}
+            </div>
+          );
+        } else {
+          return <span>{data}</span>;
+        }
+      },
+    },
+    {
+      title: '接口名称',
+      dataIndex: 'path',
+      key: 'path',
+      width: 300,
+      fixed: 'left',
+      onCell: () => ({
+        style: {
+          maxWidth: 300,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          cursor: 'pointer',
+        },
+      }),
+      render: record => (
+        <Tooltip placement="topLeft" title={record}>
+          {record}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '调用次数',
+      dataIndex: 'count',
+      key: 'count',
+      width: 70,
+      align: 'center',
+    },
+  ];
+
+  const columnsAccess = [
+    {
+      title: '功能名称',
+      dataIndex: '功能名称',
+      key: '功能名称',
+      width: 100,
+      align: 'center',
+      render: record => searchStyle(record),
+    },
+    {
+      title: '功能路径',
+      dataIndex: '功能路径',
+      key: '功能路径',
+      width: 300,
+      fixed: 'left',
+      onCell: () => ({
+        style: {
+          maxWidth: 300,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: record => (
+        <Tooltip placement="topLeft" title={record}>
+          {searchStyle(record)}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '访问时间',
+      dataIndex: '访问时间',
+      key: '访问时间',
+      width: 140,
+      align: 'center',
+    },
+    {
+      title: '功能路由',
+      dataIndex: '功能路由',
+      key: '功能路由',
+      width: 200,
+      align: 'center',
+      render: record => searchStyle(record),
+    },
+    {
+      title: '虚拟目录',
+      dataIndex: '虚拟目录',
+      key: '虚拟目录',
+      align: 'center',
+      width: 80,
+    },
+    {
+      title: '访问人',
+      dataIndex: '访问人',
+      key: '访问人',
+      width: 80,
+      align: 'center',
+      render: record => searchStyle(record),
+    },
+  ];
+
+  const columnsRemote = [
+    {
+      title: '操作人',
+      dataIndex: 'opreationName',
+      key: 'opreationName',
+      width: 100,
+      align: 'center',
+    },
+    {
+      title: '操作时间',
+      dataIndex: 'opreationTime',
+      key: 'opreationTime',
+      width: 100,
+      align: 'center',
+    },
+    {
+      title: '初始状态',
+      dataIndex: 'initStatus',
+      key: 'initStatus',
+      width: 80,
+      align: 'center',
+    },
+    {
+      title: '设备编码',
+      dataIndex: 'deviceCode',
+      key: 'deviceCode',
+      width: 100,
+      align: 'center',
+    },
+    {
+      title: '服务返回信息',
+      dataIndex: 'backContent',
+      key: 'backContent',
+      align: 'center',
+      width: 200,
+      onCell: () => ({
+        style: {
+          maxWidth: 200,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: record => (
+        <Tooltip placement="topLeft" title={record}>
+          {record}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '控制等待时间',
+      dataIndex: 'controlWatiTime',
+      key: 'controlWatiTime',
+      width: 80,
+      align: 'center',
+    },
+    {
+      title: '控制点位',
+      dataIndex: 'controlPoint',
+      key: 'controlPoint',
+      width: 140,
+      align: 'center',
+      onCell: () => ({
+        style: {
+          maxWidth: 140,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        },
+      }),
+      render: record => (
+        <Tooltip placement="topLeft" title={record}>
+          {record}
+        </Tooltip>
+      ),
+    },
+    {
+      title: '控制结果',
+      dataIndex: 'controlResult',
+      key: 'controlResult',
+      width: 80,
+      align: 'center',
+      render: record => {
+        if (record === '成功') {
+          return <Tag color="green">{record}</Tag>;
+        }
+        return <Tag color="orange">{record}</Tag>;
+      },
+    },
+    {
+      title: '目标状态',
+      dataIndex: 'targetStatus',
+      key: 'targetStatus',
+      align: 'center',
+      width: 80,
+    },
+    {
+      title: '实际状态',
+      dataIndex: 'realStatus',
+      key: 'realStatus',
+      width: 80,
+      align: 'center',
+    },
+  ];
+
   const handleLog = text => {
     setModalVisible(true);
     setContent(text);
@@ -242,13 +577,28 @@ const LogCenter = () => {
   const changeTime = time => {
     let time1 = time[0].format('YYYY-MM');
     let time2 = time[1].format('YYYY-MM');
-    if (time1 !== time2) {
+    if (time1 !== time2 && activeKey === '1') {
       message.warning('不允许跨月查询');
     } else {
-      setAllTime(time);
-      setPageSize(20);
-      setCurrentPage(1);
-      getTableList(1, 20, time);
+      if (activeKey === '1') {
+        setAllTime(time);
+        setPageSize(20);
+        setCurrentPage(1);
+        getTableList(1, 20, time);
+        setPageSize1(10);
+        setCurrentPage1(1);
+        getApiCount(1, 10, time);
+      } else if (activeKey === '2') {
+        setAllTime(time);
+        setPageSizeAccess(20);
+        setCurrentPageAccess(1);
+        getAccessLog(1, 20, time);
+      } else {
+        setAllTime(time);
+        setPageSizeRemote(20);
+        setCurrentPageRemote(1);
+        getRemoteOperationLog(1, 20, time);
+      }
     }
   };
   // 近1/6/12/24小时
@@ -264,15 +614,40 @@ const LogCenter = () => {
     setLabel('');
     setSelectState('失败');
     setShowSearchStyle(false);
-    getTableList(
-      1,
-      20,
-      [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
-      '',
-      '',
-      '失败',
-      'rest',
-    );
+    if (activeKey === '1') {
+      getTableList(
+        1,
+        20,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+        '',
+        '失败',
+        'rest',
+      );
+      getApiCount(
+        1,
+        10,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+        'rest',
+      );
+    } else if (activeKey === '2') {
+      getAccessLog(
+        1,
+        20,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+        'rest',
+      );
+    } else {
+      getRemoteOperationLog(
+        1,
+        20,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+        'rest',
+      );
+    }
   };
 
   const paginationChange = (page, pageSizes) => {
@@ -281,6 +656,24 @@ const LogCenter = () => {
     setPageSize(pageSizes);
   };
 
+  const paginationChange1 = (page, pageSizes) => {
+    getApiCount(page, pageSizes);
+    setCurrentPage1(page);
+    setPageSize1(pageSizes);
+  };
+
+  const paginationChangeAccess = (page, pageSizes) => {
+    getAccessLog(page, pageSizes);
+    setCurrentPageAccess(page);
+    setPageSizeAccess(pageSizes);
+  };
+
+  const paginationChangeRemote = (page, pageSizes) => {
+    getRemoteOperationLog(page, pageSizes);
+    setCurrentPageRemote(page);
+    setPageSizeRemote(pageSizes);
+  };
+
   const onChangeInput = (pagination, filters, sorter) => {
     timeSorter.current = sorter.order === 'ascend' ? 'asc' : 'desc';
     filterSorter.current = sorter.field ? sorter.field : 'requestDate';
@@ -291,81 +684,313 @@ const LogCenter = () => {
     setSelectState(e);
     getTableList('', '', '', '', '', e);
   };
+
+  const onChange = e => {
+    setActiveKey(e);
+    setAllTime([moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')]);
+    setCurrentPage(1);
+    setCurrentPage1(1);
+    setCurrentPageAccess(1);
+    setCurrentPageRemote(1);
+    setRequestUrl('');
+    setLabel('');
+    setSelectState('失败');
+    setShowSearchStyle(false);
+    if (e === '1') {
+      getTableList(
+        1,
+        20,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+        '',
+        '失败',
+        'rest',
+      );
+      getApiCount(
+        1,
+        10,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+        'rest',
+      );
+    } else if (e === '2') {
+      getAccessLog(
+        1,
+        20,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+      );
+    } else {
+      getRemoteOperationLog(
+        1,
+        20,
+        [moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')],
+        '',
+      );
+    }
+  };
   return (
     <div className={styles.centerLog}>
-      <div className={styles.head}>
-        <span style={{ lineHeight: 2, marginLeft: '7px' }}>时间：</span>
-        <RangePicker
-          locale={locale}
-          showTime
-          format="YYYY-MM-DD HH:mm:ss"
-          onChange={changeTime}
-          value={allTime}
-          allowClear={false}
-        />
-        <span style={{ marginLeft: '20px' }}>调用结果：</span>
-        <Select style={{ width: '180px' }} value={selectState} onSelect={e => changeSuccess(e)}>
-          <Option value="全部">全部</Option>
-          <Option value="成功">成功</Option>
-          <Option value="失败">失败</Option>
-        </Select>
-        <span style={{ marginLeft: '20px' }}>接口名称：</span>
-        <Input
-          style={{ width: '200px' }}
-          placeholder="请输入接口名称"
-          onChange={e => {
-            setRequestUrl(e.target.value);
-          }}
-          value={requestUrl}
-          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',
-          }}
-        >
-          重置
-        </Button>
-      </div>
-      <div className={styles.table}>
-        <Table
-          size="small"
-          bordered
-          columns={columns}
-          dataSource={tableData}
-          scroll={{ y: 'calc(100% - 35px)' }}
-          pagination={false}
-          onChange={onChangeInput}
-          loading={loading}
-        />
-      </div>
-      <div className={styles.footer}>
-        <Pagination
-          total={total}
-          showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`}
-          pageSizeOptions={[10, 20, 40, 100]}
-          current={currentPage}
-          onChange={paginationChange}
-          size="small"
-          pageSize={pageSize}
-          showSizeChanger
-        />
-      </div>
+      <Tabs
+        activeKey={activeKey}
+        onChange={onChange}
+        style={{ backgroundColor: 'white', paddingLeft: '20px' }}
+      >
+        <TabPane tab="接口调用" key="1">
+          <div className={styles.head}>
+            <span style={{ lineHeight: 2, marginLeft: '7px' }}>时间：</span>
+            <RangePicker
+              locale={locale}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              onChange={changeTime}
+              value={allTime}
+              allowClear={false}
+            />
+            <span style={{ marginLeft: '20px' }}>调用结果：</span>
+            <Select style={{ width: '180px' }} value={selectState} onSelect={e => changeSuccess(e)}>
+              <Option value="全部">全部</Option>
+              <Option value="成功">成功</Option>
+              <Option value="失败">失败</Option>
+            </Select>
+            <span style={{ marginLeft: '20px' }}>接口名称：</span>
+            <Input
+              style={{ width: '200px' }}
+              placeholder="请输入接口名称"
+              onChange={e => {
+                setRequestUrl(e.target.value);
+              }}
+              value={requestUrl}
+              allowClear
+            />
+            <Button
+              type="primary"
+              style={{ marginLeft: '10px' }}
+              onClick={() => {
+                setPageSize(20);
+                setCurrentPage(1);
+                getTableList(1, 20);
+                setCurrentPage1(1);
+                getApiCount(1, 10);
+                setShowSearchStyle(true);
+              }}
+            >
+              查询
+            </Button>
+            <Button
+              icon={<SyncOutlined className={styles.icon} />}
+              onClick={handleReset}
+              style={{
+                marginLeft: '25px',
+                verticalAlign: 'middle',
+              }}
+            >
+              重置
+            </Button>
+          </div>
+          <div className={styles.content}>
+            <div className={styles.left}>
+              <div className={styles.table}>
+                <Table
+                  size="small"
+                  bordered
+                  columns={columns}
+                  dataSource={tableData}
+                  scroll={{ y: 'calc(100% - 30px)' }}
+                  pagination={false}
+                  onChange={onChangeInput}
+                  loading={loading}
+                />
+              </div>
+              <div className={styles.footer}>
+                <Pagination
+                  total={total}
+                  showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`}
+                  pageSizeOptions={[10, 20, 40, 100]}
+                  current={currentPage}
+                  onChange={paginationChange}
+                  size="small"
+                  pageSize={pageSize}
+                  showSizeChanger
+                />
+              </div>
+            </div>
+            <div className={styles.right}>
+              <div className={styles.table}>
+                <Table
+                  size="large"
+                  bordered
+                  columns={columns1}
+                  dataSource={tableData1}
+                  scroll={{ y: 'calc(100% - 30px)' }}
+                  pagination={false}
+                  onChange={onChangeInput}
+                  loading={loading1}
+                />
+              </div>
+              <div className={styles.footer}>
+                <Pagination
+                  total={total1}
+                  defaultPageSize={10}
+                  showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${total1} 条`}
+                  current={currentPage1}
+                  onChange={paginationChange1}
+                  size="small"
+                  pageSize={pageSize1}
+                  showSizeChanger={false}
+                />
+              </div>
+            </div>
+          </div>
+        </TabPane>
+        <TabPane tab="功能访问" key="2">
+          <div className={styles.head}>
+            <span style={{ lineHeight: 2, marginLeft: '7px' }}>时间：</span>
+            <RangePicker
+              locale={locale}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              onChange={changeTime}
+              value={allTime}
+              allowClear={false}
+            />
+            <Tooltip title="可查询功能路径 、功能路由、功能名称、访问人">
+              <InfoCircleOutlined
+                style={{
+                  color: '#1890ff',
+                  marginLeft: '20px',
+                }}
+              />
+            </Tooltip>
+            <span style={{ marginLeft: '3px' }}>快速搜索：</span>
+            <Input
+              style={{ width: '200px' }}
+              placeholder="请输入功能路径 、功能路由、功能名称、访问人"
+              onChange={e => {
+                setRequestUrl(e.target.value);
+              }}
+              value={requestUrl}
+              allowClear
+            />
+            <Button
+              type="primary"
+              style={{ marginLeft: '10px' }}
+              onClick={() => {
+                setPageSizeAccess(20);
+                setCurrentPageAccess(1);
+                getAccessLog(1, 20);
+                setShowSearchStyle(true);
+              }}
+            >
+              查询
+            </Button>
+            <Button
+              icon={<SyncOutlined className={styles.icon} />}
+              onClick={handleReset}
+              style={{
+                marginLeft: '25px',
+                verticalAlign: 'middle',
+              }}
+            >
+              重置
+            </Button>
+          </div>
+          <div className={styles.table}>
+            <Table
+              size="small"
+              bordered
+              columns={columnsAccess}
+              dataSource={tableDataAccess}
+              scroll={{ y: 'calc(100% - 30px)' }}
+              pagination={false}
+              onChange={onChangeInput}
+              loading={loadingAccess}
+            />
+          </div>
+          <div className={styles.footer}>
+            <Pagination
+              total={totalAccess}
+              showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${totalAccess} 条`}
+              pageSizeOptions={[10, 20, 40, 100]}
+              current={currentPageAccess}
+              onChange={paginationChangeAccess}
+              size="small"
+              pageSize={pageSizeAccess}
+              showSizeChanger
+            />
+          </div>
+        </TabPane>
+        <TabPane tab="设备控制" key="3">
+          <div className={styles.head}>
+            <span style={{ lineHeight: 2, marginLeft: '7px' }}>时间：</span>
+            <RangePicker
+              locale={locale}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              onChange={changeTime}
+              value={allTime}
+              allowClear={false}
+            />
+            <span style={{ marginLeft: '20px' }}>设备编码：</span>
+            <Input
+              style={{ width: '200px' }}
+              placeholder="请输入设备编码"
+              onChange={e => {
+                setRequestUrl(e.target.value);
+              }}
+              value={requestUrl}
+              allowClear
+            />
+            <Button
+              type="primary"
+              style={{ marginLeft: '10px' }}
+              onClick={() => {
+                setPageSizeRemote(20);
+                setCurrentPageRemote(1);
+                getRemoteOperationLog(1, 20);
+                setShowSearchStyle(true);
+              }}
+            >
+              查询
+            </Button>
+            <Button
+              icon={<SyncOutlined className={styles.icon} />}
+              onClick={handleReset}
+              style={{
+                marginLeft: '25px',
+                verticalAlign: 'middle',
+              }}
+            >
+              重置
+            </Button>
+          </div>
+          <div className={styles.table}>
+            <Table
+              size="small"
+              bordered
+              columns={columnsRemote}
+              dataSource={tableDataRemote}
+              scroll={{ y: 'calc(100% - 30px)' }}
+              pagination={false}
+              onChange={onChangeInput}
+              loading={loadingRemote}
+            />
+          </div>
+          <div className={styles.footer}>
+            <Pagination
+              total={totalRemote}
+              showTotal={(aa, range) => `第${range[0]}-${range[1]} 条/共 ${totalRemote} 条`}
+              pageSizeOptions={[10, 20, 40, 100]}
+              current={currentPageRemote}
+              onChange={paginationChangeRemote}
+              size="small"
+              pageSize={pageSizeRemote}
+              showSizeChanger
+            />
+          </div>
+        </TabPane>
+      </Tabs>
+
       <Modal
         title="详细信息"
         visible={modalVisible}

src/pages/log/logCenter/index.less

 .centerLog {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
+  overflow-y: hidden;
   .head {
-    padding: 10px;
     background: white;
     margin-bottom: 2px;
     width: 100%;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    flex-wrap: no-wrap;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 40px);
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
+    .left {
+      width: 65%;
+      height: 100%;
+
+      .table {
+        width: 100%;
+        background-color: white;
+        padding: 10px;
+        overflow: hidden;
+        margin-bottom: 3px;
+        height: calc(100vh - 210px);
+        :global {
+          .ant-table-wrapper {
+            height: 100%;
+
+            .ant-spin-nested-loading {
+              height: 100%;
+
+              .ant-spin-container {
+                height: 100%;
+
+                .ant-table.ant-table-small {
+                  height: 100%;
+
+                  .ant-table-container {
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .footer {
+        width: 100%;
+        height: 42px;
+        background-color: white;
+        display: flex;
+        justify-content: flex-end;
+        padding: 10px;
+      }
+    }
+    .right {
+      width: 34%;
+      height: 100%;
+      :global {
+        ::-webkit-scrollbar-thumb {
+          border-radius: 0;
+        }
+        ::-webkit-scrollbar {
+          display: none;
+        }
+      }
+      .table {
+        width: 100%;
+        background-color: white;
+        padding: 10px;
+        overflow: hidden;
+        margin-bottom: 3px;
+        height: calc(100vh - 210px);
+        .sort {
+          width: 22px;
+          height: 22px;
+          border-radius: 50%;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: auto;
+          &[type='1'] {
+            color: #fb0909;
+            border: 2px solid #faa0a0;
+          }
+          &[type='2'] {
+            color: #fb6a09;
+            border: 2px solid #f07942;
+          }
+          &[type='3'] {
+            color: #fbba09;
+            border: 2px solid #f8e680;
+          }
+        }
+        :global {
+          .ant-table-wrapper {
+            height: 100%;
+
+            .ant-spin-nested-loading {
+              height: 100%;
+
+              .ant-spin-container {
+                height: 100%;
+
+                .ant-table {
+                  height: 100%;
+
+                  .ant-table-container {
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+          .ant-table-row-level-0 {
+            height: 65px;
+          }
+        }
+      }
+
+      .footer {
+        width: 100%;
+        height: 42px;
+        background-color: white;
+        display: flex;
+        justify-content: flex-end;
+        padding: 10px;
+      }
+    }
   }
+
   .table {
-    flex: 1;
     width: 100%;
     background-color: white;
     padding: 10px;
     overflow: hidden;
     margin-bottom: 3px;
+    height: calc(100vh - 210px);
     :global {
       .ant-table-wrapper {
         height: 100%;
@@ -26,26 +153,23 @@
         .ant-spin-nested-loading {
           height: 100%;
 
-          .ant-spin-container{
+          .ant-spin-container {
             height: 100%;
 
-            .ant-table.ant-table-small{
+            .ant-table.ant-table-small {
               height: 100%;
 
               .ant-table-container {
                 height: 100%;
               }
             }
-
-            
           }
-
-          
         }
       }
     }
   }
-  .footer{
+
+  .footer {
     width: 100%;
     height: 42px;
     background-color: white;

src/pages/user/login/index.jsx

@@ -52,11 +52,11 @@ const Login = props => {
             sessionStorage.setItem('userType', AUTHORITY[userMode]);
             sessionStorage.setItem('userName', userName);
             if (userMode === USER_MODE.SUPER) {
-              history.push(`/solution`);
-              // history.push(`/homePage`);
+              // history.push(`/solution`);
+              history.push(`/homePage`);
             } else {
-              history.push(`/authority/user`);
-              // history.push(`/homePage`);
+              // history.push(`/authority/user`);
+              history.push(`/homePage`);
             }
           }
           if (userMode === USER_MODE.COMMON) {

src/routes/config.js

@@ -192,6 +192,12 @@ export default {
       path: '/',
       component: BasicLayout,
       routes: [
+        {
+          path: '/homePage',
+          name: '首页',
+          icon: <HomeOutlined style={iconStyle} />,
+          component: HomePage,
+        },
         {
           path: '/solution',
           name: '解决方案',
@@ -199,12 +205,6 @@ export default {
           authority: superAuthority,
           component: CurrentSolution,
         },
-        {
-          path: '/homePage',
-          name: '仪表盘',
-          icon: <HomeOutlined style={iconStyle} />,
-          component: HomePage,
-        },
         {
           path: '/dbm',
           name: '数据库',

src/services/logCenter/api.js

@@ -10,3 +10,12 @@ import { get, PUBLISH_SERVICE, post, postForm } from '../index';
 
 // 获取错误日志、业务日志、第三方调用日志
 export const GetCallLogPages = data => post(`/PandaCore/GCK/Log/GetCallLogPages`, data);
+
+export const GetWayNumberofcalls = params => post(`/PandaCore/GCK/Log/GetWayNumberofcalls`, params);
+
+// 菜单访问记录
+export const GetAccessLog = params => post(`${PUBLISH_SERVICE}/LogCenter/GetAccessLog`, params);
+
+// 设备控制记录
+export const GetRemoteOperationLog = params =>
+  post(`/PandaMonitor/Monitor/Device/GetRemoteOperationLog`, params);