属性类型

bool：开关

属性的value取值：true或者false。

属性的配置栏显示的示例：

代码示例：

export default {
  "properties": [{
    "identifier": "switch",
    "defaultValue": false,
    "text": "电源开关",
    "type": "bool",
    "description": "这是电源开关",
  }],
  "services": [],
  "events": []
};

有关bool类型属性使用示例，可参见本地开发测试。

number：数字输入框

属性的value取值：number型数字。

属性的配置栏显示的示例：

属性相关的字段：

代码示例：

export default {
  "properties": [{
    "identifier": "temperature",
    "defaultValue": 26,
    "text": "温度",
    "type": "number",
    "options": {
      "min": -10,
      "max": 36,
      "step": 2,
      "placeholder": "请输入温度"
    }
  }],
  "services": [],
  "events": []
};

text：文本输入框

属性的value取值：string型的文本框。

属性的配置栏显示的示例：

属性相关的字段：

代码示例：

export default {
  "properties": [{
    "identifier": "temperature",
    "text": "温度",
    "type": "text",
    "defaultValue": "温度文案",
    "options": {
      "placeholder": "请输入温度",
      "maxLength": 10,
      "readOnly": true,
    }
  }],
  "services": [],
  "events": []
};

color：选择颜色

属性的value值：{ r: number, g: number, b: number, a: number }。

属性的配置栏显示的示例：

color属性可提供配置选择颜色功能：单击输入框中左侧的色块icon，弹出如上图所示的调色盘。

属性相关字段：

代码示例：

export default {
  "properties": [{
    "identifier": "color",
    "text": "颜色",
    "type": "color",
  }],
  "services": [],
  "events": []
};

enum：下拉选择

属性的value值为string型的数据，支持的item.type类型：text、image、icon-text。

属性的配置栏显示的示例：

• item.type = text
• item.type = image
• item.type = icon-text

属性相关字段：

代码示例：

{
    identifier: 'valueFont',
    text: '测试',
    type: 'enum',
    options: {
       items: [
         { label: '16', value: '16' },
         { label: '14', value: '14' },
          {
            "type": "image",
            "url": "https://img.alicdn.com/tfs/TB1mAL1khD1gK0jSZFsXXbldVXa-240-16.png",
            "label": "虚线",
            "value": 2
          },
         {
          "type": "icon-text",
          "url": "https://img.alicdn.com/tfs/TB1FNnCj.D1gK0jSZFGXXbd3FXa-34-28.png",
          "label": "圆形端点",
          "value": 1
        },
       ],
       multiple: true,
    },
    defaultValue: 16,
  },

options支持function的写法，可动态调整选项值，如下示例：

export default {
  "properties": [{
    identifier: 'value',
    type: 'text',
    text: '属性值'
  }, {
    identifier: 'directionOption',
    text: '测试',
    type: 'enum',
    disableDataSources: 'all',
    options: ({ props }) => {
      let opt;
      if (props.value === 'boolean'){
        opt = {
          items: [
            { label: '1', value: true },
            { label: '0', value: false },
          ]
        }
      }
      if (props.value === 'number') {
        opt = { 
          items: [
            { label: '>', value: '>' },
            { label: '<', value: '<' },
          ]
        }
      }
      return opt;
    },
  }],
  "services": [],
  "events": []
};

显示效果：

image：图片

属性的value值：string型的图片URL。

image可提供图片地址选择框，即属性的配置栏显示的示例：

属性相关字段：

代码示例：

export default {
  "properties": [{
    identifier: 'avatar',
    type: 'image',
    text: '选择图片',
    defaultValue: "https://img.alicdn.com/tfs/TB1S8vZqIj_B1NjSZFHXXaDWpXa-244-244.png",
    options: {
      items: [
      'https://img.alicdn.com/tfs/TB1FNnCj.D1gK0jSZFGXXbd3FXa-34-28.png',
      'https://img.alicdn.com/tfs/TB1mAL1khD1gK0jSZFsXXbldVXa-240-16.png',
    ]
    }
  }],
  "services": [],
  "events": []
};

index.js的render()：

render(): JSX.Element {
        const { avatar } = this.props;

        return (
            <div>
                <img src={avatar} />
            </div>
        );
    }

显示效果：

group：成组

将多个属性在右侧编辑栏编成一组。

属性的配置栏显示的示例：

属性相关字段：

代码示例：

export default {
  "properties": [{
    identifier: 'arrowGroup',
    text: '流动箭头',
    type: 'group',
    displayIdentifier: 'showArrow',
    displayDefaultValue: true,
    options: {
      items: [
        {
          identifier: 'arrowDirection',
          text: '箭头方向',
          type: 'enum',
          options: {
            items: [
              { label: '向左', value: 'left' },
              { label: '向右', value: 'right' },
            ],
          },
          defaultValue: 'left',
        },
        {
          identifier: 'arrowColor',
          text: '箭头颜色',
          type: 'color',
          defaultValue: { r: 14, g: 155, b: 255, a: 1 },
        },
      ]
    }
  }],
  "services": [],
  "events": []
};

pureDataSource：纯数据源属性

表示该属性是用于设置数据源的。

属性的配置栏显示的示例：

属性相关字段：

代码示例：

export default {
  "properties": [{
    identifier: 'dataSource',
    text: '设备名称',
    type: 'pureDataSource',
    dataTypes: ['Number', 'Enum', 'Boolean'],
    options:{
      dataSourceInfoErrorTip:'接口需要返回数值、布尔或枚举值才能进行风机的状态配置',
      showDataSourceInfo: true,
    },
  }],
  "services": [],
  "events": []
};