门户及子系统使用

# 一.简介

# 1.门户系统管理相关

详细见系统管理菜单下的9个菜单；

用户，组织，角色，模块相关模块；
菜单，菜单访问日志，门户，日志及faq问答相关模块；

# 2.公共组件

包括常用上云统一样式组件；

# 1).常用公共组件说明

➜  components git:(dev) tree -L 1
.
├── AdvancedFilter	#高级搜索,一般用于Table结合使用
├── BatchButton	#批量选择按钮,一般用于列表批量操作使用
├── CascaderTree	#输入框下拉选择树
├── CategoryTree	#分类树
├── CommonFilter	#普通搜索，,一般用于Table结合使用
├── CommonModal	#对话框弹框
├── Empty	#空组件
├── ExpandTable	#Table列表
├── FormItems	#Form控件
├── IconButton	#图标按钮
├── ModalDrawer	#抽屉对话框
├── MyIcon	#图标组件
├── Pagination	#分页组件
├── PopoverButtonList	#下拉选择按钮
├── RowCardList	#行卡片列表
├── ScriptContent	#脚本组件
├── TableHeaderFilter	#table头部筛选
├── index.js
├── utils.js
└── vars.less
17 directories, 3 files

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 2).子系统脚本初始化

npm i -g bdp-x
➜ bdp init
? Please select init type initPro   初始化项目/Project
? Please input Project name autorun-react
? which local Project do you want to init? bdp-sub-base
? 项目路径名(en) autorun-react
? 子系统名(en) autorun
? Is the project private ? Yes
? description 
? author samyzhg@qq.com
? license MIT
cd autorun-react

1
2
3
4
5
6
7
8
9
10
11
12

目录结构，拿autorun-react示范：

➜  autorun-react tree -L 4
.
├── README.md
├── config
│   ├── config.js
│   ├── plugin.config.js
│   ├── route.cloud.config.js
│   ├── router.config.js
│   └── themes
│       ├── bss.js
│       └── cloud.js
├── functions
│   ├── index.js
│   ├── matchMock.js
│   └── package.json
├── jsconfig.json
├── package.json
├── public
│   ├── config.json
│   ├── favicon.ico
│   ├── icons
│   │   ├── favicon.ico
│   │   ├── icon-128x128.png
│   │   ├── icon-192x192.png
│   │   └── icon-512x512.png
│   ├── img
│   │   └── common
│   │       ├── 403.svg
│   │       ├── 404.svg
│   │       ├── 500.svg
│   │       ├── avatar.png
│   │       ├── event.svg
│   │       ├── logoOne.png
│   │       ├── logoTwo.png
│   │       ├── map.png
│   │       ├── message.svg
│   │       └── notification.svg
│   ├── js
│   │   ├── canvas-toblob.js
│   │   ├── data-set.min.js
│   │   ├── iconfont.js
│   │   └── less.min.js
│   ├── logos
│   │   ├── aimarket.png
│   │   ├── aio.png
│   │   ├── china-mobile.png
│   │   ├── iwhale.png
│   │   └── jsZminer.png
│   └── scar.png
├── scripts
│   ├── generateMock.js
│   ├── getPrettierFiles.js
│   ├── lint-prettier.js
│   └── prettier.js
├── src
│   ├── app.js
│   ├── defaultSettings.js
│   ├── global.js
│   ├── global.less
│   ├── manifest.json
│   └── pages
│       ├── 404.js
│       ├── autorun
│       │   ├── base
│       │   ├── components
│       │   ├── conf
│       │   ├── home
│       │   ├── index.js
│       │   ├── locales
│       │   ├── models
│       │   ├── services
│       │   ├── styles
│       │   └── utils
│       └── document.ejs
├── tsconfig.json
└── tslint.json
22 directories, 52 files

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

# 二.构建部署

拉取 env-react项目最新版本代码；
进入node目录下运行；先 npm install 安装脚本需要的库；再clone env=现场名；npm run clone env=release,拉取制定现场的模块；看打印的版本信息是否对应上env目录下对应的版本；
返回上一层，先install之后，再build env=现场名； npm run build env=autorun

# 手动脚本执行【推荐】

./build.sh autorun

# 自动化jks上脚本

配置：相关.sh可拷贝之前的；

cd /var/lib/jenkins/workspace/zsmart-rgdp-web
rm -rf dist
rm -f dist.zip
cd ./node
#npm install --registry=https://registry.npm.taobao.org/
npm install --registry=http://npm.xxx.com:8081/repository/npm-all/
npm run git addUser xxx xx
npm run clone env=autorun

cd ../
#npm install --registry=https://registry.npm.taobao.org/
npm install --registry=http://npm.xxx.com:8081/repository/npm-all/
npm run build env=autorun
zip -r dist.zip dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 三.接入bdp步骤

示范项目：子系统autorun ,对应后端前缀：autorunweb

# 1.门户bdp上修改

1).respority.config.js；添加参考地址及模块设置；

{
  name: 'autorun',
  repoUrl: 'http://gitlab.xxx.com/xxx/autorun-react.git',
  pages: '/src/pages/autorun',
},

1
2
3
4
5

2).plugin.config.js 添加路径别名

config.resolve.alias.set('@autorun', path.join(__dirname, '../src/pages/autorun'));

3).request.js配置；添加子模块的接口前缀规则；

const systemPrefixes = [
  ...
  'autorunweb',
];

1
2
3
4

4)..env增加模块； .env文件下，=空也要设置；env-react项目也要同步设置 .env

# 智能巡检 的打包分支
branch.autorun=

1
2

5)..gitignore中添加新建的模块；

src/pages/autorun

6).要涉及到配置jks打包的话，还要再env-react项目修改相关配置；按照上面对应的文件修改，再添加对应现场版本的env; .env.autorun

#智能巡检开发环境打包配置

# 环境名称
envName=智能巡检

# ------------------------------------------------------
# 统一门户 的打包分支
branch.portal=V6.4.0.2

# dap 的打包分支
branch.dap=

# 数据开发 dd的打包分支
branch.dd=

# 智慧中心 smart 的打包分支
branch.smart=

# 全程调度 schedule 的打包分支
branch.schedule=

# 数据稽核 dqa 的打包分支
branch.dqa=

# ------------------------------------------------------
# 智能巡检 autorun 的打包分支
branch.autorun=develop
# 是否跳过导流页，1是，0否；默认值：0
skipIndex=1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 2.子系统上修改

1).拉最新的bdp门户库依赖或者指定最新版本；

三种方式安装门户库：

"bdpcloud": "file:../bdp-cloud-react", //package中的配置；
npm i -S bdpcloud@git+ssh://git@gitlab.xxx.com:xxx-bdp/bdp-cloud-react.git#6.5.0 //【推荐】
npm i -S bdpcloud@6.5.0

2).config.js 添加接口代理

const isDev = true;
const targetApi = isDev ? 'http://10.45.46.xxx' : 'http://10.45.46.xxx';
proxy: {
  [`${ROUTER_BASE}aiFactoryServer`]: {// 统一门户后端
    target: `${targetApi}:9001/aiFactoryServer/`, // 开发环境
      changeOrigin: true,
        pathRewrite: { [`^${ROUTER_BASE}aiFactoryServer`]: '' },
  },
    [`${ROUTER_BASE}autorunweb`]: { // 智能巡检
      target: `${targetApi}:8082/`,
      changeOrigin: true,
    },
},

1
2
3
4
5
6
7
8
9
10
11
12
13

3).services目录的接口路径，设置api前缀；

export async function qryNode(params) {
  return request('autorunweb/qryNode', {
    method: 'POST',
    body: params,
  });
}

1
2
3
4
5
6

# 3.167/67线上配置子项目菜单

# 1).上云项目

开发环境：http://xxx.167:8559/
测试环境：http://xxx.67:8559/

# 2).子系统路由添加步骤

对应环境下搜索菜单管理；添加到对应目录下的路由；有/; 编码唯一就可以；
搜索门户管理添加上面的菜单；
为了简化菜单，也可用管理员新建一个子系统角色(比如:autorun), 再给这个角色配置对应子系统的菜单及相关首页设置；【角色管理】模块设置；

# 四.使用

# 1).门户中使用子系统

按照第四步骤，引入即可；

# 2).子系统中使用门户

TODO；

上次更新: 2023/11/17, 05:08:18