新运维服务监控功能界面升级

src/pages/dataCenter/dictionary1/AppDic.js

@@ -12,7 +12,7 @@ import {
   notification,
   message,
 } from 'antd';
-import { get, CITY_SERVICE ,PUBLISH_SERVICE} from '@/services';
+import { get, CITY_SERVICE, PUBLISH_SERVICE } from '@/services';
 import { GetKeyValue, EditKeyValue, DeleteKeyValue, AddKeyValue } from '@/services/dataCenter/api'
 import { EditTwoTone, DeleteOutlined, PlusSquareOutlined, SyncOutlined } from '@ant-design/icons';
 import styles from './AppDic.less';
@@ -215,7 +215,7 @@ const AppDic = () => {
     get(`${PUBLISH_SERVICE}/DataManger/ResetKeyValue`, {
     })
       .then(res => {
-        if (res.code===0) {
+        if (res.code === 0) {
           getData();
           notification.success({
             message: '重置成功',
@@ -317,7 +317,7 @@ const AppDic = () => {
     //   .catch(err => {
     //     message.error(err);
     //   });
-    console.log(select)
+   
     DeleteKeyValue({
       key: select.Key,
     }).then(
@@ -337,6 +337,13 @@ const AppDic = () => {
     )
   };
 
+  const pagination = {
+    showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+    pageSizeOptions: [10, 20, 50, 100],
+    defaultPageSize: 20,
+    showQuickJumper: true,
+    showSizeChanger: true,
+  }
   return (
     <div className={styles.AppDic}>
       <Spin spinning={loading} tip="loading...">
@@ -359,7 +366,7 @@ const AppDic = () => {
                 fontSize: '20px',
                 verticalAlign: 'middle',
                 marginRight: '22px',
-                float:'right'
+                float: 'right'
               }}
             />
           </Tooltip>
@@ -371,16 +378,16 @@ const AppDic = () => {
             onConfirm={submitReset}
           >
             <Tooltip title="还原">
-            <SyncOutlined
-              style={{
-                color: '#1890FF',
-                fontSize: '20px',
-                verticalAlign: 'middle',
-                marginRight: '30px',
-                float:'right'
-              }}
-            />
-          </Tooltip>
+              <SyncOutlined
+                style={{
+                  color: '#1890FF',
+                  fontSize: '20px',
+                  verticalAlign: 'middle',
+                  marginRight: '30px',
+                  float: 'right'
+                }}
+              />
+            </Tooltip>
           </Popconfirm>
         </div>
         <Table
@@ -389,14 +396,7 @@ const AppDic = () => {
           columns={columns}
           dataSource={data}
           scroll={{ x: 'max-content' }}
-          pagination={{
-            showTotal: (total, range) =>
-              `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-            pageSizeOptions: [10, 20, 50, 100],
-            defaultPageSize: 20,
-            showQuickJumper: true,
-            showSizeChanger: true,
-          }}
+          pagination={pagination}
         />
       </Spin>
 

src/pages/log/serviceLog/index.js

@@ -11,7 +11,7 @@ import {
   message,
   Spin,
 } from 'antd';
-import { SwapRightOutlined } from '@ant-design/icons';
+import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
 import { Chart, Interval, Line, Tooltip, Axis } from 'bizcharts';
 // import { DataSet } from '@antv/data-set';
 import moment from 'moment';
@@ -21,6 +21,7 @@ const { Option } = Select;
 const { Search } = Input;
 
 const ServiceLog = () => {
+  const [flag, setFlag] = useState(0);
   const [loading, setLoading] = useState(false); // 源数据
   const [dataTable, setDataTable] = useState([]); // 源数据
   const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
@@ -31,7 +32,7 @@ const ServiceLog = () => {
   const [endTime, setEndTime] = useState(
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值，当前时间
   );
-  const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:异常 9999:全部
+  const [logType, setLogType] = useState('9999'); // 请求参数，日志类型，默认是正常，0:成功 -1:异常 9999:全部
   const [searchWord, setSearchWord] = useState(''); // 关键字
 
   // 计算时间间隔（分钟）
@@ -116,7 +117,6 @@ const ServiceLog = () => {
       title: '耗时/ms',
       dataIndex: 'ConsumerTime',
       key: 'ConsumerTime',
-      fixed: 'right',
       width: 100,
       defaultSortOrder: 'descend',
       sortDirections: ['descend', 'ascend'],
@@ -126,7 +126,6 @@ const ServiceLog = () => {
       title: '返回体大小/byte',
       dataIndex: 'ResponseSize',
       key: 'ResponseSize',
-      fixed: 'right',
       width: 140,
       sortDirections: ['descend', 'ascend'],
       sorter: (a, b) => a.ResponseSize - b.ResponseSize,
@@ -143,7 +142,7 @@ const ServiceLog = () => {
     ) {
       countInterval(); // 根据起止时间计算时间间隔
     }
-  }, [startTime, endTime]);
+  }, [startTime, endTime, flag]);
   useEffect(() => {
     if (
       startTime &&
@@ -155,7 +154,7 @@ const ServiceLog = () => {
       setLoading(true);
       getData('/TrafficStatistics', setVisitedCount); // 访问量统计
     }
-  }, [startTime, endTime, logType, timeInterval]);
+  }, [startTime, endTime, logType, timeInterval, flag]);
   useEffect(() => {
     if (
       startTime &&
@@ -169,7 +168,7 @@ const ServiceLog = () => {
       getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
       getData('/GetOMSLog', setDataTable); // 接口调用记录
     }
-  }, [startTime, endTime, logType]);
+  }, [startTime, endTime, logType, flag]);
 
   // 封装接口请求，参数url/设置方法set
   const getData = (url, set) => {
@@ -248,7 +247,13 @@ const ServiceLog = () => {
     setSearchWord(e.target.value);
     // console.log(e.target.value);
   };
-
+  const handleReset = () => {
+    setLogType('9999');
+    setTimeInterval('3');
+    setStartTime(moment().startOf('day'));
+    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
+    setSearchWord('');
+  }
   return (
     <>
       <div className={styles.serviceLog}>
@@ -279,14 +284,25 @@ const ServiceLog = () => {
             <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
             <Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
             <span style={{ marginLeft: '20px' }}>返回状态：</span>
-            <Select defaultValue="正常" onChange={changeStatus}>
+            <Select defaultValue='全部' value={logType} onChange={changeStatus}>
               <Option value="9999">全部</Option>
               <Option value="0">正常</Option>
               <Option value="-1">异常</Option>
             </Select>
+            <span style={{ paddingLeft: '20px' }}>间隔：</span>
+            <Select
+              defaultValue="每小时"
+              value={timeInterval}
+              onChange={selectChange}
+            >
+              <Option value="1">每分钟</Option>
+              <Option value="2">每5分钟</Option>
+              <Option value="3">每小时</Option>
+              <Option value="4">每天</Option>
+            </Select>
             <Search
               allowClear
-              style={{ width: 200, marginLeft: '20px' }}
+              style={{ width: 250, marginLeft: '20px' }}
               placeholder="请输入接口名称"
               onSearch={() => {
                 getData('/GetOMSLog', setDataTable);
@@ -295,23 +311,21 @@ const ServiceLog = () => {
               enterButton
               value={searchWord}
             />
+            <Button icon={<SyncOutlined className={styles.icon}/>} onClick={handleReset} style={{ marginLeft: '25px', verticalAlign:'middle', marginTop:'-3px' }}>
+              重置
+            </Button>
           </Col>
         </Row>
         <Spin spinning={loading} tip="loading">
           <Row style={{ background: 'white' }}>
-            <Col offset={6} style={{ paddingTop: '8px' }}>
-              <span>间隔：</span>
-              <Select
-                defaultValue="每小时"
-                value={timeInterval}
-                size="small"
-                onChange={selectChange}
-              >
-                <Option value="1">每分钟</Option>
-                <Option value="2">每5分钟</Option>
-                <Option value="3">每小时</Option>
-                <Option value="4">每天</Option>
-              </Select>
+            <Col span={8} style={{ paddingTop: '8px', paddingLeft: '5px' }}>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>访问量统计</span>
+            </Col>
+            <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>接口调用频次统计</span>
+            </Col>
+            <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
+              <span style={{ fontSize: '14px', fontWeight: '600' }}>接口平均耗时统计</span>
             </Col>
           </Row>
           <Row className={styles.chart}>
@@ -325,10 +339,10 @@ const ServiceLog = () => {
                 renderer="svg"
                 scale={{
                   Count: { alias: '计数' },
-                  StartTime: { alias: '访问量统计' },
+                  StartTime: { alias: '访问开始时间'}
                 }}
               >
-                <Axis name="StartTime" label="" title={{ offset: 20 }} />
+                <Axis name="StartTime" label="" title={{ offset: 20 }} className={styles.fontColor} />
                 <Axis name="Count" title />
                 <Line shape="smooth" position="StartTime*Count" />
                 <Tooltip shared lock />
@@ -344,10 +358,10 @@ const ServiceLog = () => {
                 renderer="svg"
                 scale={{
                   Count: { alias: '计数' },
-                  Path: { alias: '接口调用频次统计' },
+                  Path: { alias: '接口调用频次' },
                 }}
               >
-                <Axis name="Path" label="" title={{ offset: 20 }} />
+                <Axis name="Path" label="" title={{ offset: 20 }} className={styles.fontColor}/>
                 <Axis name="Count" title />
                 <Interval position="Path*Count" />
                 <Tooltip shared lock />
@@ -363,7 +377,7 @@ const ServiceLog = () => {
                 renderer="svg"
                 scale={{
                   AvgTime: { alias: '响应时长/ms' },
-                  Path: { alias: '接口平均耗时统计' },
+                  Path: { alias: '接口平均响应时长' },
                 }}
               >
                 <Axis name="Path" label="" title={{ offset: 20 }} />
@@ -379,8 +393,7 @@ const ServiceLog = () => {
               bordered
               columns={columns}
               dataSource={dataTable}
-              // scroll={{ x: 'max-content'}}
-              scroll={{ x: 'max-content', y: 'calc(100vh - 562px)' }}
+              scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }}
               pagination={{
                 showTotal: (total, range) =>
                   `第${range[0]}-${range[1]} 条/共 ${total} 条`,

src/pages/log/serviceLog/index.less

@@ -8,6 +8,7 @@
     .chart{
         padding: 10px;
         background: white;
+        font-size:20px;
     }
     .table{
         border-top: 1px solid #f0eded;
@@ -15,9 +16,10 @@
         .ant-table-thead tr th{
             font-weight: 600;
             color:rgba(0,0,0,0.85);
+            background-color:#F6F9FE;
         }
         .ant-table-body{
-            height:calc(100vh - 562px);
+            height:calc(100vh - 580px);
             border-right: white;
             overflow: auto !important;
         }
@@ -32,5 +34,25 @@
             padding:8px;
             padding-right: 20px;
         }
-    }     
+        .ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last{
+            border-right: 1px solid #DBE7FB !important;
+        }
+        .ant-table.ant-table-small {
+            width: 99%;
+            margin: 10px auto;
+        }
+        .ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last{
+            border: 1px solid #DBE7FB;
+        }
+    }
+    .ant-spin-container {
+        background-color: white;
+    } 
+    .fontColor{
+        font-weight: 600;
+    }
+    .icon{
+        margin-top: -5px !important;
+        vertical-align: text-bottom;
+    }
 }
\ No newline at end of file

src/pages/platformCenter/messageManage/projectManage/ProjectManage.jsx

@@ -294,7 +294,7 @@ const ProjectManage = () => {
                     </div>
                     <Button type="primary" onClick={handleReset}>重置</Button>
 
-                    <Button type="primary" style={{ marginLeft: "10px" }} icon={<PlusCircleOutlined />} onClick={onAddClick}>新增</Button>
+                    <Button type="primary" style={{ marginLeft: "10px" }} icon={<PlusCircleOutlined />} onClick={onAddClick}><span style={{ marginTop:"-3px"}}>新增</span></Button>
 
                 </div>
                 <div className={styles.list_view}>

src/pages/platformCenter/messageManage/projectManage/ProjectManage.less

@@ -24,7 +24,9 @@
                 margin-right: 10px;
             }
         }
-
+        .anticon svg {
+            margin-top: -5px;
+        }
         .fast_search {
             height: 60px;
             margin-right: 10px;

src/pages/platformCenter/messageManage/templateManage/TemplateManage.jsx

@@ -251,6 +251,7 @@ const TemplateManage = () => {
         handleShowModal("editVisible", false)
     }
     const onAddSubmit = (result) => {
+        
         console.log(result)
         InsertMessageTemplate({
             Type:result.type,

src/pages/platformCenter/messageManage/templateManage/components/AddModal.jsx

@@ -11,13 +11,13 @@ const AddModal = props => {
     
     const [form] = Form.useForm();
     const [loading, setLoading] = useState(false);
-    
+
     const onSubmit = () => {
         form.submit()
     }
     const onSubmitSuccess = () => {
         const result = form.getFieldValue()
-        props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result })
+        props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result }) 
     }
     const layout = {
         layout: 'horizontal',

src/pages/userCenter/userManage/UserManage.js

@@ -87,7 +87,7 @@ const UserManage = () => {
 
   const [form] = Form.useForm();
   const { Item } = Form;
-  const [selectValue, setSelctValue] = useState(0); // 用户鉴权
+  const [selectValue, setSelctValue] = useState(); // 用户鉴权
 
   const [width, setWidth] = useState(50);
   const [treeLoading, setTreeLoading] = useState(false);