Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/OperationalService into dev

api/.vscode/launch.json

@@ -29,6 +29,7 @@
             // "--qndmn http://resources.anxinyun.cn",
             "--qndmn http://rhvqdivo5.hn-bkt.clouddn.com",
             "--clickHouseUrl http://10.8.30.71",
+            // "--clickHouseUrl https://clickhouse01.anxinyun.cn/play",
             "--clickHousePort 30123",
             "--clickHouseAnxincloud anxinyun",
             "--clickHousePepEmis pepca",

api/app/lib/controllers/alarm/app.js

@@ -89,7 +89,7 @@ async function inspectionList (ctx) {
       ctx.status = 200;
       ctx.body = inspectionRes
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -114,7 +114,7 @@ async function notedInspection (ctx) {
 
       ctx.status = 204;
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -159,7 +159,7 @@ async function apiError (ctx) {
 
       ctx.status = 200;
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -176,7 +176,7 @@ async function apiErrorList (ctx) {
       ctx.status = 200;
       ctx.body = []
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -199,7 +199,7 @@ async function confirmApiError (ctx) {
 
       ctx.status = 204;
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined

api/app/lib/controllers/auth/index.js

@@ -29,7 +29,7 @@ async function login (ctx, next) {
          if (!pomsRegisterRes) {
             throw '你还不是飞尚运维中台成员，请联系管理员添加权限'
          } else if (
-            pomsRegisterRes.disable && (!pomsRegisterRes.role || !pomsRegisterRes.role.includes('admin'))
+            pomsRegisterRes.disabled && !pomsRegisterRes.role.includes('admin')
          ) {
             throw '当前账号已禁用'
          }

api/app/lib/controllers/organization/index.js

@@ -5,13 +5,16 @@ async function allDeps (ctx) {
    try {
       const models = ctx.fs.dc.models;
       const { redis } = ctx.app
-
+      const start = moment()
       let depRes = await redis.get('allDepartments')
+      console.log(`DurationCalc: 1 用时 ${moment().diff(start, 'milliseconds')}`);
       if (depRes) {
          depRes = JSON.parse(depRes)
+         console.log(`DurationCalc: 2 用时 ${moment().diff(start, 'milliseconds')}`);
          depRes = depRes.departments
+         console.log(`DurationCalc: 3 用时 ${moment().diff(start, 'milliseconds')}`);
       }
-
+      console.log(`DurationCalc: 4 用时 ${moment().diff(start, 'milliseconds')}`);
       ctx.status = 200;
       ctx.body = depRes || []
    } catch (error) {
@@ -26,14 +29,14 @@ async function allDeps (ctx) {
 async function editUser (ctx) {
    try {
       const models = ctx.fs.dc.models;
-      const { pepUserId, role = [], correlationProject = [] } = ctx.request.body
+      const { pomsUserId, pepUserId, role = [], correlationProject = [] } = ctx.request.body
 
       const existUserRes = await models.User.findOne({
          where: {
             pepUserId
          }
       })
-      if (existUserRes && !existUserRes.deleted && !pepUserId) {
+      if (existUserRes && !existUserRes.deleted && !pomsUserId) {
          // 新增已存在未删除
          throw '人员账号已添加'
       }
@@ -77,7 +80,7 @@ async function editUser (ctx) {
       ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
-
+         message: typeof error == 'string' ? error : undefined
       }
    }
 }
@@ -93,7 +96,7 @@ async function putUser (ctx) {
          }
       })
 
-      if (existUserRes && existUserRes.role.includes('admin') && !disabled) {
+      if (existUserRes && existUserRes.role.includes('admin') && disabled == false) {
          throw '成员不能既是管理员又是普通成员'
       }
 
@@ -147,7 +150,7 @@ async function delAdmin (ctx) {
 
       ctx.status = 204;
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined

api/app/lib/controllers/project/bind.js

@@ -9,7 +9,7 @@ async function bindAnxin2pep (ctx) {
 
       ctx.status = 20;
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined

api/app/lib/controllers/project/index.js

@@ -12,7 +12,7 @@ async function appList (ctx) {
       ctx.status = 200;
       ctx.body = appRes
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -30,7 +30,7 @@ async function projectAnxincloud (ctx) {
       ctx.status = 200;
       ctx.body = projectRes
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -43,12 +43,12 @@ async function projectPManage (ctx) {
       const models = ctx.fs.dc.models;
       const { clickHouse } = ctx.app.fs
 
-      const projectRes = await clickHouse.projectManage.query(`SELECT * FROM t_project WHERE project_state = 4 ORDER BY id DESC`).toPromise()
+      const projectRes = await clickHouse.projectManage.query(`SELECT id, project_name FROM t_pim_project WHERE isdelete=0 ORDER BY id DESC`).toPromise()
 
       ctx.status = 200;
       ctx.body = projectRes
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined

api/app/lib/controllers/push/config.js

@@ -37,7 +37,7 @@ async function list (ctx) {
       ctx.status = 200;
       ctx.body = listRes
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -68,7 +68,7 @@ async function edit (ctx) {
 
       ctx.status = 204;
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined
@@ -100,7 +100,7 @@ async function state (ctx) {
 
       ctx.status = 204;
    } catch (error) {
-      ctx.fs.logger.error(`path: ${ctx.path}, error: error`);
+      ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
       ctx.status = 400;
       ctx.body = {
          message: typeof error == 'string' ? error : undefined

api/app/lib/middlewares/duration-calc.js

@@ -0,0 +1,14 @@
+'use strict';
+const moment = require('moment');
+
+async function factory (ctx, next) {
+   try {
+      const start = moment()
+      await next()
+      ctx.fs.logger.log(`DurationCalc: ${ctx.path} 用时 ${moment().diff(start, 'milliseconds')}`);
+   } catch (error) {
+      ctx.fs.logger.error(`DurationCalc, error: ${error}`);
+   }
+}
+
+module.exports = factory;

api/app/lib/routes/organization/index.js

@@ -1,5 +1,4 @@
 'use strict';
-
 const organization = require('../../controllers/organization');
 
 module.exports = function (app, router, opts) {

web/client/src/sections/install/actions/roles.js

@@ -27,8 +27,10 @@ export function getOrganizationUser (query) {//获取成员列表
 }
 export function putOrganizationUser (data) {//更新成员状态
     let pomsUserId = ''
+    let msg = ''
     if (data) {
         pomsUserId = data.pomsUserId
+        msg=data.msg
     }
     return (dispatch) =>
         basicAction({
@@ -37,12 +39,16 @@ export function putOrganizationUser (data) {//更新成员状态
             data,
             actionType: "PUT_ORGANIZATIONUSER",
             url: `${ApiTable.putOrganizationUser.replace("{pomsUserId}", pomsUserId)}`,
-            msg: { option: "更新成员状态" }, //更新成员状态
+            msg: { option: msg }, //更新成员状态
             reducer: {},
         });
 }
 
 export function postOrganizationUser (data) {//添加/编辑成员
+    let msg = ''
+    if (data) {
+        msg=data.msg
+    }
     return (dispatch) =>
         basicAction({
             type: "post",
@@ -50,18 +56,24 @@ export function postOrganizationUser (data) {//添加/编辑成员
             data,
             actionType: "POST_ORGANIZATION_USER",
             url: `${ApiTable.postOrganizationUser}`,
-            msg: { option: "添加/编辑成员" }, //添加/编辑成员
+            msg: { option: msg }, //添加/编辑成员
             reducer: { name: "" },
         });
 }
-export function deteleOrganizationAdmin(orgId) {
+export function deteleOrganizationAdmin(data) {
+    let pomsUserId = ''
+    let msg = ''
+    if (data) {
+        pomsUserId = data.id
+        msg=data.msg
+    }
     return (dispatch) =>
       basicAction({
         type: "del",
         dispatch: dispatch,
         actionType: "DEL_ORGANIZATION_ADMIN",
-        url: `${ApiTable.deteleOrganizationAdmin.replace("{pomsUserId}", orgId)}`,
+        url: `${ApiTable.deteleOrganizationAdmin.replace("{pomsUserId}", pomsUserId)}`,
-        msg: { option: "删除管理员" }, //删除管理员
+        msg: { option: msg }, //删除管理员
         reducer: {},
       });
   }

web/client/src/sections/install/components/adminModal.jsx

@@ -42,8 +42,8 @@ function adminModal (props) {
             .validate()
             .then((values) => {
                 if (adminEdit) {
-                    dispatch(install.deteleOrganizationAdmin(editObj.id)).then(
+                    dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then(
-                        dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId })).then((res) => {//获取项企(PEP)全部部门及其下用户
+                        dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '修改管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                             if (res.success) {
                                 close();
                             }
@@ -51,7 +51,7 @@ function adminModal (props) {
                     )
                 }
                 else {
-                    dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId })).then((res) => {//获取项企(PEP)全部部门及其下用户
+                    dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                         if (res.success) {
                             close();
                         }
@@ -77,7 +77,7 @@ function adminModal (props) {
                 <div style={{ margin: "0px 25px" }}>
                     <div style={{ width: '100%', height: 32, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}>
                         <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
-                        <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后拥有平台所有权限和项目，不再拥有成员角色。</div>
+                        <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。</div>
                     </div>
                     <Form
                         allowEmpty

web/client/src/sections/install/components/memberModal.jsx

@@ -61,11 +61,20 @@ function memberModal (props) {
                 if (roleArr.indexOf('admin') != -1) {
                     roleArr.splice(roleArr.indexOf('admin'), 1)
                 }
-                dispatch(install.postOrganizationUser({ role: roleArr, pepUserId: values.pepUserId })).then((res) => {//获取项企(PEP)全部部门及其下用户
+                if (memberEdit) {
+                    dispatch(install.postOrganizationUser({ role: roleArr,pomsUserId: editObj.id, pepUserId: values.pepUserId, msg: '修改成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
                         if (res.success) {
                             close();
                         }
                     })
+                }
+                else{
+                    dispatch(install.postOrganizationUser({ role: roleArr, pepUserId: values.pepUserId, msg: '新增成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
+                        if (res.success) {
+                            close();
+                        }
+                    })
+                }
             })
     }
     function handleCancel () {
@@ -86,7 +95,7 @@ function memberModal (props) {
                 <div style={{ margin: "0px 25px" }}>
                     <div style={{ width: '100%', height: 32, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}>
                         <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
-                        <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后拥有平台所有权限和项目，不再拥有成员角色。</div>
+                        <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。</div>
                     </div>
                     <Form
                         allowEmpty

web/client/src/sections/install/containers/roles.jsx

@@ -37,7 +37,7 @@ const Roles = (props) => {
                         </div>
                         {
                             row.departments.length > 1 ? (
-                                <Tooltip content={departmentsArr.join(',')} trigger="click">
+                                <Tooltip content={departmentsArr.join(',')} trigger="click"  style={{ lineHeight: 2 }}>
                                     <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 8, cursor: "pointer", }}>
                                         +{row.departments.length - 1}
                                     </div>
@@ -70,7 +70,7 @@ const Roles = (props) => {
             title: (
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                     数据分析师
-                    <Tooltip content={'拥有分析、工单、资料的权限'}>
+                    <Tooltip content={'拥有数据分析、工单管理的权限、资料相关的权限'} style={{ lineHeight: 2 }}>
                         <img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} />
                     </Tooltip>
                 </div>
@@ -103,7 +103,7 @@ const Roles = (props) => {
             title: (
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                     售后运维
-                    <Tooltip content={'拥有问题、设备、工单、资料、一期控制台的权限'}>
+                    <Tooltip content={'拥有设备、问题、工单、资料相关的权限'}  style={{ lineHeight: 2 }}>
                         <img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} />
                     </Tooltip>
                 </div>
@@ -135,8 +135,8 @@ const Roles = (props) => {
         }, {
             title: (
                 <div style={{ display: 'flex', alignItems: 'center' }}>
-                    资源管理员
+                    资源管理者
-                    <Tooltip content={'拥有资料、工单的权限'}>
+                    <Tooltip content={'拥有资料、设备、工单相关的权限'}  style={{ lineHeight: 2 }}>
                         <img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} />
                     </Tooltip>
                 </div>
@@ -169,7 +169,7 @@ const Roles = (props) => {
             title: (
                 <div style={{ display: 'flex', alignItems: 'center' }}>
                     客户服务
-                    <Tooltip content={'拥有服务、工单的权限'}>
+                    <Tooltip content={'拥有服务、工单、资料相关的权限'}  style={{ lineHeight: 2 }}>
                         <img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} />
                     </Tooltip>
                 </div>
@@ -209,11 +209,12 @@ const Roles = (props) => {
                         {row?.disabled ? (
                             <Button
                                 theme="borderless"
+                                style={{ color: '#F31C1C' }}
                                 onClick={() => {
-                                    dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled })).then(() => getUserList())
+                                    dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled,msg:'更新成员状态' })).then(() => getUserList())
                                 }}
                             >
-                                启用
+                                已禁用
                             </Button>
                         ) : (
                             <Popconfirm
@@ -222,12 +223,12 @@ const Roles = (props) => {
                                 showArrow={true}
                                 position="topRight"
                                 onConfirm={() => {
-                                    dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled })).then(() => {
+                                    dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled,msg:'更新成员状态' })).then(() => {
                                         getUserList();
                                     })
                                 }}
                             >
-                                <Button theme="borderless">禁用</Button>
+                                <Button theme="borderless">已启用</Button>
                             </Popconfirm>
                         )}
                         <Button
@@ -246,8 +247,8 @@ const Roles = (props) => {
                             showArrow={true}
                             position="topRight"
                             onConfirm={() => {
-                                dispatch(install.putOrganizationUser({ pomsUserId: row?.id, deleted: true })).then(() => {
+                                dispatch(install.putOrganizationUser({ pomsUserId: row?.id, deleted: true,msg:'删除成员' })).then(() => {
-                                    if (page.current > 0 && limits.current < 2) {
+                                    if (page.current > 0 && mylimits.current < 2) {
                                         setQuery({ limit: 10, page: page.current - 1 })
                                     } else {
                                         setQuery({ limit: 10, page: page.current })
@@ -265,7 +266,8 @@ const Roles = (props) => {
     // const [data, setdata] = useState([])//表格数据
     const tableData = useRef([]); //每页实际条数
     const page = useRef(query.page);//哪一页
-    const limits = useRef(); //每页实际条数
+    const [limits, setLimits] = useState()//每页实际条数
+    const mylimits = useRef(); //每页实际条数
     const [pepList, setPepList] = useState([])//角色分配
     useEffect(() => {
         getUserList();
@@ -274,11 +276,11 @@ const Roles = (props) => {
         dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户
             setPepList(res.payload.data)
         })
-        getUserList()
     }, [])
     function getUserList () {
         let searchData = { ...query, role: roleChoose }
         dispatch(install.getOrganizationUser(searchData)).then((res) => {//获取成员列表
+            if (res.success) {
                 tableData.current = res.payload.data.users.rows;
                 let notCreatedArr = []
                 let notCreatedNum = 5 - res.payload.data.admin.length
@@ -286,7 +288,9 @@ const Roles = (props) => {
                     notCreatedArr.push('')
                 }
                 setRoleAssignment(res.payload.data.admin.concat(notCreatedArr))
-            limits.current = res.payload.data.users.count
+                setLimits(res.payload.data.users.count)
+                mylimits.current = res.payload.data.users.rows.length
+            }
         })
     }
     function handleRow (record, index) {//斑马条纹
@@ -317,8 +321,8 @@ const Roles = (props) => {
                         {
                             roleAssignment.map((item, index) => {
                                 return (
-                                    <div key={index} style={{
+                                    <div key={index} className='adminTop' style={{
-                                        width: 312, height: 127, boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)',
+                                        width: 312, height: 127,
                                         borderRadius: 2, background: "url(/assets/images/install/cardBackground0" + (index + 1) + '.png)',
                                         backgroundSize: "100% 100%", marginRight: 20, marginBottom: 20,
                                     }}>
@@ -335,11 +339,11 @@ const Roles = (props) => {
                                                                 <div key={idx} style={{
                                                                     background: '#52A4F6', borderRadius: 2, height: 18, padding: '2px 4px',
                                                                     fontSize: 10, marginTop: 17, width: 'max-content', color: '#FFFFFF',
-                                                                    display: 'flex', alignItems: 'center', marginRight: 4,
+                                                                     alignItems: 'center', marginRight: 4,display:idx>3?'none':'flex'
                                                                 }}>
                                                                     {
                                                                         idx > 2 ? (
-                                                                            <Tooltip content={mydepartmentsArr.join(',')}>
+                                                                            <Tooltip content={mydepartmentsArr.join(',')}  style={{ lineHeight: 2 }}>
                                                                                 <div style={{ fontSize: 14, cursor: "pointer", }}>
                                                                                     ...
                                                                                 </div>
@@ -396,7 +400,7 @@ const Roles = (props) => {
                                                                 showArrow={true}
                                                                 position="topRight"
                                                                 onConfirm={() => {
-                                                                    dispatch(install.deteleOrganizationAdmin(item?.id)).then(() => getUserList())
+                                                                    dispatch(install.deteleOrganizationAdmin({id:item.id,msg:'删除管理员'})).then(() => getUserList())
                                                                 }}
                                                             >
                                                                 <div style={{ marginLeft: 4, cursor: "pointer", }}>
@@ -482,11 +486,11 @@ const Roles = (props) => {
                     }}
                 >
                     <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
-                        共{limits.current}条信息
+                        共{limits}条信息
                     </span>
                     <Pagination
                         className="22"
-                        total={limits.current}
+                        total={limits}
                         showSizeChanger
                         currentPage={query.page + 1}
                         pageSizeOpts={[10, 20, 30, 40]}

web/client/src/sections/install/containers/system.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Spin, Card } from '@douyinfe/semi-ui';
+import { Spin, Button } from '@douyinfe/semi-ui';
 import '../style.less'
 
 const Example = (props) => {
@@ -13,21 +13,48 @@ const Example = (props) => {
 
     return (
         <>
-        <div>
+            <div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}>
-            2222222222222
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
+                        <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>系统映射</div>
+                        <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>ROLE ASSIGNMENT</div>
+                    </div>
+                    <div style={{marginRight:20}}>
+                        <Button
+                            theme="solid"
+                            type="primary"
+                            style={{
+                                width: 108,
+                                height: 32,
+                                borderRadius: 2,
+                                marginLeft: 40
+                            }}
+                            onClick={() => {
+                                // setEditObj({})
+                                // setMemberEdit(false)
+                                // setMemberModal(true);
+                            }}
+                        >
+                            添加映射关系
+                        </Button>
+                    </div>
+                </div>
+                <div style={{marginTop:20}}>
+                    111
+                </div>
             </div>
         </>
     )
 }
 
 function mapStateToProps (state) {
-   const { auth, global, members, webSocket } = state;
+    const { auth, global, members } = state;
     return {
         //   loading: members.isRequesting,
-    //   user: auth.user,
+        user: auth.user,
-    //   actions: global.actions,
+        actions: global.actions,
         //   members: members.data,
-    //   socket: webSocket.socket
     };
 }
 

web/client/src/sections/install/style.less

@@ -14,3 +14,10 @@
         }
     }
 }
+.adminTop{
+    box-shadow: 0px 0px 12px 2px rgba(220,222,224,0.2);
+    transition: box-shadow 0.5s ease;
+}
+.adminTop:hover{
+    box-shadow: 0px 0px 12px 2px rgba(130, 131, 133,0.5);
+}