介绍

本章讲述了如何使用Choerodon 开发新的Dashboard，并且如何将Dashboard注册到平台。包含如下内容：

  • 仪表盘配置
  • 页面编写
  • 配置路由
  • 初始化仪表盘

在模块内部创建dashboard文件夹，路径为choerodon-front-demo/demo/src/app/demo/config/dashboard目录结构为:

dashboard.yml文件内容看起来是这样的:

  1. dashboard:
  2.   - code: "Guide" ## code
  3.     icon: APItest ## 图标
  4.     title: "快速入门" ## 显示的title
  5.     description: "新手指引" ## 描述
  6.     level: site ## 层级，包含site/organization/project
  7.   - code: "Document"
  8.     icon: description
  9.     title: "文档"
  10.     description: "文档"
  11.     level: site
  13.   - code: "Announcement"
  14.     icon: import_contacts
  15.     title: "公告"
  16.     description: "公告"
  17.     level: site
  18.     sort: 3
  1. ## en.yml
  2. "Guide": "Guide"
  3. "Document": "Document"

页面编写

仪表盘的页面的编写与普通页面一致。在choerodon-front-demo/demo/src/app/demo/dashboard 创建对应code 对应的文件夹。每个文件夹中包含index.js 和index.scss。

修改config.js 文件。

  1. // config.js
  3.   local: true, //是否为本地开发
  4.   clientId: 'localhost', // 必须填入响应的客户端（本地开发）
  5.   titlename: 'Demo', //项目页面的title名称
  6.   // favicon: 'favicon.ico', //项目页面的icon图片名称
  7.   theme: {
  8.     'primary-color': '#3F51B5',
  9.   },
  10.   cookieServer: '', // 子域名token共享
  11.   server: 'http://localhost:8080', // 后端接口服务器地址
  12.   port: 9090, // 端口
  13.   dashboard: {
  14.     demo: 'src/app/demo/dashboard/*' // 路径为相对package.json 文件的路径
  15.   }

初始化仪表盘

前端配置好仪表盘之后，需要将仪表盘数据初始化到数据库中。

该命令会在根目录下生成一个dashboard.yml。

然后再执行：

  1. $ python ./demo/node_modules/choerodon-front-boot/structure/dashboard.py -o sql -i ip -p port -u user -s pwd

将dashboard.yml 数据初始化进数据库。