更新时间:2023-10-30 GMT+08:00
分享

地铁图

描述

地铁图支持配置节点,节点名称,状态,并且支持在某一节点设置子节点,通过地铁图可以快速开发地铁图功能。

开放能力

地铁图为组件资产,提供地铁图组件,如图1所示。

图1 地铁图组件示例

地铁图组件提供一个配置项查询步骤条信息

  • 入参:无
  • 出参:节点,节点名称和节点状态

如何使用资产

  1. 订购并下载地铁图组件资产(通用地铁图组件:appsteps.zip)

    相关操作请参见如何订购&部署资产

  2. 进入AppCube开发环境,如图2所示,在“管理 > 应用管理 > 页面资产管理 > 组件”页面,单击“提交新组件”,进入“提交新组件”页面。

    图2 进入提交新组件页面

  3. 图3所示,填写组件相关信息,上传下载的地铁图组件资产(通用地铁图组件:appsteps.zip),单击“提交”。

    图3 提交新组件

  4. 在开发环境首页的“项目”页签单击“行业应用”,再单击“创建行业应用”。
  5. 图4所示,输入标签和名称,选择分类,单击“创建”,创建后,页面跳转到应用开发页面

    图4 创建行业应用

  6. 在应用的开发页面,如图5所示,单击应用右侧的,选择“目录”。

    图5 创建目录

  7. 在弹出的“添加目录”页面,如图6所示,输入目录名称(Page),单击“保存”。

    图6 添加目录

  8. 图7所示,单击规划存放页面目录Page右侧的,选择“高级页面”。

    图7 创建高级页面

  9. 在弹出的“添加高级页面”页面,如图8所示,选择“空白”模板,输入页面的“标签”为“test”,“名称”为“test”,单击“添加”。

    图8 添加高级页面

    页面创建完成后,自动进入编辑页面,如图9所示。

    图9 编辑页面

  10. 图10所示,选择自定义组件“appsteps”,拖入到页面内容区域,进行开发。

    图10 选择组件

  1. 图11所示,在页面内容区域,选中组件,右侧展示该组件的属性设置区域,在“组件属性配置”的“属性”页签,设置组件的基本信息,如位置、边框、背景等信息,示例如图12所示。

    图11 设置“属性”
    图12 示例

  2. 单击“数据”页签,进入“数据”页签,如图13所示。

    图13 “数据”页签

  3. 在“数据”页签中,设置组件绑定的桥接器,以实现通过桥接器调用后台接口,获取后台数据。

    地铁图组件提供一个配置项(查询步骤条信息),按照地铁图组件的配置项的入参和出参,在应用中开发后台服务(脚本或服务编排)。

    1. 在应用中创建目录Logic,并创建脚本并启用脚本。
      图14 创建脚本并启用脚本

      查询步骤条信息(querysteps)

      示例:

      @action.object({ type: 'param' })
      export class Output {
          @action.param({ type: 'Object[]', description: "结果" })
          result: object[];
      }
       
      export class SetStepInfo {
          @action.method({ input: "Input", output: "Output", description: "设置步骤条信息" })
          run(): Output {
              let output = new Output();
              let result = [
                  {
                      "label": "提交方案",
                      "title": "提交人:小李",
                      "status": "finish"
                  },
                  {
                      "label": "队长审批",
                      "title": "审批人:小王",
                      "status": "finish"
       
                  },
                  {
                      "label": "业务主管审批",
                      "title": "审批人:小赵",
                      "status": "finish"
                  },
                  {
                      "label": "运输部审批",
                      "title": "审批人:小刘",
                      "status": "process"
                  },
                  {
                      "label": "业务分管中心审批",
                      "title": "审批人:小江",
                      "status": "wait"
                  },
                  {
                      "label": "调度指挥中心审批",
                      "title": "审批人:小马",
                      "status": "wait",
                      "subSteps": [
                          {
                              "label": "指挥中心1",
                              "title": "提交人:任某",
                              "status": "wait"
                          },
                          {
                              "label": "指挥中心2",
                              "title": "提交人:刘某",
                              "status": "wait"
                          }
                      ]
                  },
                  {
                      "label": "安全管理中心审批",
                      "title": "审批人:张三",
                      "status": "wait"
                  },
                  {
                      "label": "总工办审批",
                      "title": "审批人:李四",
                      "status": "wait"
                  },
                  {
                      "label": "总工程师审批",
                      "title": "审批人:王五",
                      "status": "wait"
                  }
              ];
       
              output.result = result;
              return output;
          }
      }

      示例脚本输出参数样式:

      {
          "result": [
              {
                  "label": "提交方案",
                  "status": "finish",
                  "title": "提交人:小李"
              },
              {
                  "label": "队长审批",
                  "status": "finish",
                  "title": "审批人:小王"
              },
              {
                  "label": "业务主管审批",
                  "status": "finish",
                  "title": "审批人:小赵"
              },
              {
                  "label": "运输部审批",
                  "status": "process",
                  "title": "审批人:小刘"
              },
              {
                  "label": "业务分管中心审批",
                  "status": "wait",
                  "title": "审批人:小江"
              },
              {
                  "label": "调度指挥中心审批",
                  "status": "wait",
                  "subSteps": [
                      {
                          "label": "指挥中心1",
                          "status": "wait",
                          "title": "提交人:任某"
                      },
                      {
                          "label": "指挥中心2",
                          "status": "wait",
                          "title": "提交人:刘某"
                      }
                  ],
                  "title": "审批人:小马"
              },
              {
                  "label": "安全管理中心审批",
                  "status": "wait",
                  "title": "审批人:张三"
              },
              {
                  "label": "总工办审批",
                  "status": "wait",
                  "title": "审批人:李四"
              },
              {
                  "label": "总工程师审批",
                  "status": "wait",
                  "title": "审批人:王五"
              }
          ]
      }

      脚本中参数说明:

      • label:地铁图中的导航节点以及节点名称。
      • status:地铁图中当前节点的状态。wait表示等待开始,process表示正在执行中,finish表示执行完成。
    1. 查询步骤条信息脚本封装成一个新的URL地址,方便调用。
      1. 图15所示,单击“服务”,单击“新建”。
        图15 新建公共接口
      2. 在弹出的“新建公共接口”页面中,设置公共接口,如图16所示,单击“保存”。
        图16 查询步骤条信息接口
    2. 在“数据”页签中,配置查询步骤条信息下的数据,如图17所示。
      图17 配置数据

  4. 配置完成后,如图18所示,单击页面上方保存按钮,保存配置,单击发布,发布页面,最后单击释放锁按钮,退出编辑状态。

    如果需要再次编辑,需要单击,获取锁在进行编辑。

    图18 保存,发布并释放锁

  5. 图19所示,单击页面上方预览按钮,即可看到页面配置效果,如图20所示。

    图19 预览
    图20 预览效果

相关文档