# gpamodelbuilder-custom-components

**Repository Path**: isupermap/gpamodelbuilder-custom-components

## Basic Information

- **Project Name**: gpamodelbuilder-custom-components
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-25
- **Last Updated**: 2025-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GPA APP自定义算子参数 UI 指南
## 开发要求
自定义组件的开发需要用到 `Vue.js`。

> 在开始之前，推荐先学习 [Vue.js](https://cn.vuejs.org/)。官方指南假设你已了解关于 [单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html) 的知识。

## 开发步骤

1. 克隆项目文件

``` bash
git clone https://gitee.com/isupermap/gpamodelbuilder-custom-components.git
```

下载后的目录结构

``` bash
├── examples
├── public
├── src
├── README.md
├── package.json
├── vue.config.js
```

2. 在 src-components 目录下创建功能组件xxx.vue

**value**：

- **类型**： `String`
- **详细**： 组件获取gpa传入的填充值props.value

**change**：

- **类型**： `Function`
- **详细**： 组件处理好后的数据回调emit("change",处理好的数据)

3. 在 src 目录下修改配置文件进行注册 components.json

``` json
{
  "DataPicker": {
    "name": "data-picker",
    "paramTypes": ["ENUM"],
    "paramIDs": [{
        "toolID": "iobjects_image_processing:openimage",
        "inputID": "ImageFilePath"
    }]
  }
}
```

字段说明：

**name**：

- **类型**： `String`
- **必填**： `是`
- **详细**： 自定义组件显示名称。需与在xxx.vue 中定义的 name 一致。

**paramTypes**：

- **类型**： `Array<string>`
- **必填**： `否`
- **详细**： 应用于type标识的设置项，多个[xxx,xxx]。可选：ENUM、BOOLEAN、CONNECTION、SELECTFILEPATH、STRING、CREATEFILEPATH、COMPOSITIONFIELD

| type  |  UI
|:----|:----
| STRING | ![STRING](./public/UI/String.png)
| SELECTFILEPATH | ![SELECTFILEPATH](./public/UI/select-file-path.png)
| ENUM  | ![ENUM](./public/UI/Enum.png)
| CREATEFILEPATH | ![CREATEFILEPATH](./public/UI/create-file-path.png)
| CONNECTION | ![CONNECTION](./public/UI/Connection.png)
| COMPOSITIONFIELD | ![COMPOSITIONFIELD](./public/UI/composition-field.png)
| BOOLEAN |  ![BOOLEAN](./public/UI/Boolean.png)

**paramIDs**：

- **类型**： `Array<object>`
- **必填**： `否`
- **详细**： 应用于id标识的设置项，多个[{toolID,inputID},{toolID,inputID}]。

**paramIDs-toolID**：

- **类型**： `String`
- **必填**： `否`
- **详细**： 处理自动化工具ID。

**paramIDs-inputID**：

- **类型**： `String`
- **必填**： `是`
- **详细**： 处理自动化输入参数ID。

`toolID和inputID查询方式：http://{ip}:{port}//iserver/services/geoprocessing/restjsr/gp/v2/list 进入详情页进行查询。`

## 安装依赖

```bash
# install dependencies
npm install
```

## 启动调试

```bash
# serve with hot reload at localhost:8080 or other port
npm run serve
```

## 编译自定义组件

```bash
# build for production with minification
npm run build
```

## 使用自定义组件

将 ` customComponents` 目录下的内容拷贝至目录 `%IPORTAL_HOME%/webapps/iportal/resources/GPAModelBuilder/customComponents` 打开 SuperMap iPortal 中的处理自动化建模，刷新页面，拉取算子，点击算子参数面板展开，即可看到自定义组件UI。