## 组件属性系统

### 一、属性定义字段释义

| 参数           | 说明                   | 类型                                                                 | 默认值  | 版本    |
|:------------:|:--------------------:|:------------------------------------------------------------------:|:----:|:-----:|
| type         | 参数类型                 | 字符串                                                                | 无    | 0.0.1 |
| name         | 参数名称、组件props中赋值的属性名称 | 字符串                                                                | 无    | 0.0.1 |
| label        | 属性设置面板用来设置属性的标题      | 字符串                                                                | 无    | 0.0.1 |
| placeholder  | 占位符                  | string                                                             | 无    | 0.0.1 |
| value        | 属性的值                 | 无具体类型,同属性的类型                                                       | 无    | 0.0.1 |
| maxLength    | 属性长度                 | 数值类型                                                               | 无    | 0.0.1 |
| count        | 最多条数                 | 数值类型                                                               | 8888 | 0.0.1 |
| options      | select  类型支持，下拉框选项   | string(streamId值的属性名)\|<br/>Array<{text:string,<br/>value:string}> | 无    | 0.0.1 |
| tip          | 提示文案                 | string                                                             | 无    | 0.0.1 |
| showItemIcon | 支持icon更换             | bool                                                               | 无    | 0.0.1 |
| style        | 类型样式                 | 同css 样式                                                            | 无    | 0.0.1 |
| src          | 图片地址                 | string(https)                                                      | 无    | 0.0.1 |
| description  | 描述                   | string                                                             | 无    | 0.0.1 |

### 二、属性定义举例

#### 1.文本

* 定义

```
{
  type: 'text',
  name: 'title',
  label: '标题',
  value: opt.title,
}

value 类型:string
```

* 属性定义
  
  | 参数          | 说明                   | 类型     | 默认值 | 版本    |
  |:-----------:|:--------------------:|:------:|:---:|:-----:|
  | type        | 参数类型                 | 字符串    | 无   | 0.0.1 |
  | name        | 参数名称、组件props中赋值的属性名称 | 字符串    | 无   | 0.0.1 |
  | label       | 属性设置面板用来设置属性的标题      | 字符串    | 无   | 0.0.1 |
  | placeholder | 占位符                  | string | 无   | 0.0.1 |

* UI(会渲染成红框内容)

![text类型](./images/type/text.jpg)

#### 2.可选文本

* 定义
  
  ```
  {
    type: 'option-text',
    name: 'subTitle',
    value: opt.subTitle,
    placeHold: '可选副标题',
  }
  
  value类型:iOptionText
  
  export interface iOptionText{
      value: string;
    show: boolean;//是否显示
  }
  ```

* 属性定义
  
  | 参数          | 说明                   | 类型     | 默认值 | 版本    |
  |:-----------:|:--------------------:|:------:|:---:|:-----:|
  | type        | 参数类型                 | 字符串    | 无   | 0.0.1 |
  | name        | 参数名称、组件props中赋值的属性名称 | 字符串    | 无   | 0.0.1 |
  | label       | 属性设置面板用来设置属性的标题      | 字符串    | 无   | 0.0.1 |
  | placeholder | 占位符                  | string | 无   | 0.0.1 |

* UI(会渲染成红框内容)

![option-text](./images/type/option-text.jpg)

#### 3.图标

* 定义
  
  ```
  {
    type: 'icon',
    name: 'btnIcon',
    value: opt.btnIcon,
  }
  value类型:string
  ```

* 属性定义
  
  | 参数   | 说明                   | 类型  | 默认值 | 版本    |
  |:----:|:--------------------:|:---:|:---:|:-----:|
  | type | 参数类型                 | 字符串 | 无   | 0.0.1 |
  | name | 参数名称、组件props中赋值的属性名称 | 字符串 | 无   | 0.0.1 |

* UI(会渲染成红框内容)
  
  ![icon](./images/type/icon.jpg)

#### 4.可选图标

* 定义
  
  ```
  {
    type: 'option-icon',
    name: 'icon',
    label: '显示图标',
    value: opt.icon,
  }
  value类型:iOptionIcon
  
  export interface iOptionIcon {
      value: string;
    show: boolean;//是否显示
  }
  ```

* 属性定义
  
  | 参数    | 说明                   | 类型  | 默认值 | 版本    |
  |:-----:|:--------------------:|:---:|:---:|:-----:|
  | type  | 参数类型                 | 字符串 | 无   | 0.0.1 |
  | name  | 参数名称、组件props中赋值的属性名称 | 字符串 | 无   | 0.0.1 |
  | label | 属性设置面板用来设置属性的标题      | 字符串 | 无   | 0.0.1 |

* UI(会渲染成红框内容)
  
  ![option-icon](./images/type/option-icon.jpg)

#### 5.功能配置

* 功能定义
  
  ```
  {
    type: 'function-config',
    name: 'list',
    label: '添加配置',
    count:number,
  }
  value的类型:Array<iBindFunctionProps>
  
  export interface iConfigItem {
    id?: string;
    functionName?: string;
    streamName?: string;
    streamId?: string;
    valueDef?: any;
    desc?: string;
    title?:string;
      text?:string;
    label?:string;
    unit?: string;
    unitConvertFlag?:unitProps
  }
  ```

* 属性定义
  
  | 参数    | 说明                   | 类型   | 默认值  | 版本    |
  |:-----:|:--------------------:|:----:|:----:|:-----:|
  | type  | 参数类型                 | 字符串  | 无    | 0.0.1 |
  | name  | 参数名称、组件props中赋值的属性名称 | 字符串  | 无    | 0.0.1 |
  | count | 最多条数                 | 数值类型 | 8888 | 0.0.1 |

* UI(会渲染成红框内容)

![multiple-config](/Users/fengyanwei/Downloads/Git/iot-ui/文档/images/type/function-config.jpg)

#### 6.天气类型

* 功能定义

```
{
  type: 'weather',
  name: 'weather',
}
value的类型:Array<iBindFunctionProps>

export interface iWeatherConfig {
  location: boolean; //位置
  pm25: boolean; //室外pm2.5
  temperature: boolean; //室外温度
  humidity: boolean; //室外湿度
}
```

* 属性定义
  
  | 参数   | 说明                   | 类型  | 默认值 | 版本    |
  |:----:|:--------------------:|:---:|:---:|:-----:|
  | type | 参数类型                 | 字符串 | 无   | 0.0.1 |
  | name | 参数名称、组件props中赋值的属性名称 | 字符串 | 无   | 0.0.1 |

* 属性定义
  
  ![multiple-config](./images/type/weather.jpg)

#### 7. 枚举排序

* 类型定义

```
{
  type: 'solt-text',
  name: 'items',
  label: '选项顺序',
  showItemIcon:true, //是否展示每个item对应icon 默认不展示
}

value的类型:Array<{
      text: string,
      value: string,
      icon: string,
    }>
```

* 属性定义
  
  | 参数           | 说明                   | 类型   | 默认值 | 版本    |
  |:------------:|:--------------------:|:----:|:---:|:-----:|
  | type         | 参数类型                 | 字符串  | 无   | 0.0.1 |
  | name         | 参数名称、组件props中赋值的属性名称 | 字符串  | 无   | 0.0.1 |
  | label        | 属性设置面板用来设置属性的标题      | 字符串  | 无   | 0.0.1 |
  | showItemIcon | 支持icon更换             | bool | 无   | 0.0.1 |

* UI
  
  ![multiple-config](./images/type/solt-text.jpg)

#### 7.时间转换

* 类型定义

```
type: 'timeConver',
  name: 'items',
  label: '时间格式',
}

{
  hoursFlag: false,
        minutesFlag: false,
        secondsFlag: false,
        descText: ''
 };
```

* 属性定义
  
  | 参数    | 说明                   | 类型  | 默认值 | 版本    |
  |:-----:|:--------------------:|:---:|:---:|:-----:|
  | type  | 参数类型                 | 字符串 | 无   | 0.0.1 |
  | name  | 参数名称、组件props中赋值的属性名称 | 字符串 | 无   | 0.0.1 |
  | label | 属性设置面板用来设置属性的标题      | 字符串 | 无   | 0.0.1 |

* 属性定义
  
  ![multiple-config](./images/type/time-convert.jpg)

### 9.图片卡片

* 类型定义
  
  ```
  {
    type: 'image-card',
    name: 'clockTask',
    label: '定时任务',
    src:'https://seopic.699pic.com/photo/50046/5562.jpg_wh1200.jpg',
     style:{width:180,height:200}
  }
  ```

* 属性定义
  
  | 参数    | 说明                   | 类型            | 默认值 | 版本    |
  |:-----:|:--------------------:|:-------------:|:---:|:-----:|
  | type  | 参数类型                 | 字符串           | 无   | 0.0.1 |
  | name  | 参数名称、组件props中赋值的属性名称 | 字符串           | 无   | 0.0.1 |
  | label | 属性设置面板用来设置属性的标题      | 字符串           | 无   | 0.0.1 |
  | style | 类型样式                 | 同css 样式       | 无   | 0.0.1 |
  | src   | 图片地址                 | string(https) | 无   | 0.0.1 |

* UI

![image-card.jpg](./images/type/image-card.jpg)

### 10.绑定多个 stream属性bind-multiple-stream

* 类型定义
  
  ```
  {
    type: 'bind-multiple-stream',
    name: 'bindScreams',
    label: '绑定功能',
  description:'点击下面的参数名称，选择当前产品可以设置的定时任务'
  }
  export interface iType {
      streamName:string;
      streamId:string;
      valueDef:any;
      label:string;
  }
  value:Array<iType>
  eg:
  {
     "streamName":"开关",
     "streamId":"Power",
     "valueDef":{
       "specs":{
         "0":"关",
         "1":"开"
        },
    "type":"bool"
     },
     "label":"4"  
  }
  ```

* 属性定义

* | 参数          | 说明                   | 类型     | 默认值 | 版本    |
  |:-----------:|:--------------------:|:------:|:---:|:-----:|
  | type        | 参数类型                 | 字符串    | 无   | 0.0.1 |
  | name        | 参数名称、组件props中赋值的属性名称 | 字符串    | 无   | 0.0.1 |
  | label       | 属性设置面板用来设置属性的标题      | 字符串    | 无   | 0.0.1 |
  | description | 描述                   | string | 无   | 0.0.1 |

* UI
  
  * 第一步
    
    ![image-card.jpg](./images/type/bind-multiple-stream1.jpg)
  
  * 第二步
  
  ![image-card.jpg](./images/type/bind-multiple-card.jpg)

### 12 高级属性->特殊value值设置

* 类型定义
  
  ```
   {
           type: 'special-value-setting',
           name: 'specialObj',
           label: '特殊value值设置',
           style: { width: 207, height: 79 },
           src: 'https://smartoss.tsy.spic.com.cn/smart-lowcode/static/img/special-value.png',
           description:
             '当控制指令为特殊Value值时，其他值不可使用、点击，特殊Value值一定是通过其他参数触发联动<br />例如：雾量设置-微风/低风/中风/高风/睡眠，睡眠',
         },
   value:{checked:bool,{
       value:string,
       text:string
   }}
   eg:"specialObj":{"checked":true,"item":{"text":"关闭","value":"0"}}
  ```

* 属性定义
  
  | 参数          | 说明                   | 类型            | 默认值 | 版本    |
  |:-----------:|:--------------------:|:-------------:|:---:|:-----:|
  | type        | 参数类型                 | 字符串           | 无   | 0.0.1 |
  | name        | 参数名称、组件props中赋值的属性名称 | 字符串           | 无   | 0.0.1 |
  | label       | 属性设置面板用来设置属性的标题      | 字符串           | 无   | 0.0.1 |
  | style       | 类型样式                 | 同css 样式       | 无   | 0.0.1 |
  | src         | 图片地址                 | string(https) | 无   | 0.0.1 |
  | description | 描述                   | string        | 无   | 0.0.1 |

* UI
  
  ![image-card.jpg](./images/type/special-value-setting.jpg)

### 13.属性标题

* 类型定义
  
  ```
  {
    type: 'attribute-title',
    name: 'attributeTitle',
    label: '高级属性',
    style:{}
  },
  ```

* UI
  
  | 参数    | 说明                   | 类型      | 默认值 | 版本    |
  |:-----:|:--------------------:|:-------:|:---:|:-----:|
  | type  | 参数类型                 | 字符串     | 无   | 0.0.1 |
  | name  | 参数名称、组件props中赋值的属性名称 | 字符串     | 无   | 0.0.1 |
  | label | 属性设置面板用来设置属性的标题      | 字符串     | 无   | 0.0.1 |
  | style | 类型样式                 | 同css 样式 | 无   | 0.0.1 |

* 属性定义

  ![image-card.jpg](./images/type/attribute-title.jpg)

### 14.带跳转页面的功能配置卡片

* 类型定义
  
  ```
   {
          type: 'multiple-config',
          name: 'list',
          label: '添加配置',
          count: 99999
        },
   value:[{"streamId":"State","functionName":"状态","valueDef":{"specs":{"values":{"0":"待机中","1":"工作中"}},"type":"enum"},"id":"urn:jiot-spec-v1:property:State:52098D","label":"","unitConvertFlag":{"hour":false,"minute":false,"second":false},"streamName":"状态","icon":"insideicon-wutianjia"}]
  ```

* UI
  
  | 参数    | 说明                   | 类型   | 默认值  | 版本    |
  |:-----:|:--------------------:|:----:|:----:|:-----:|
  | type  | 参数类型                 | 字符串  | 无    | 0.0.1 |
  | name  | 参数名称、组件props中赋值的属性名称 | 字符串  | 无    | 0.0.1 |
  | label | 属性设置面板用来设置属性的标题      | 字符串  | 无    | 0.0.1 |
  | count | 最多条数                 | 数值类型 | 8888 | 0.0.1 |

* UI
  
  ![image-card.jpg](./images/type/multiple-config.jpg)

### 15.耗材类型

* 类型定义

```
{
  type:'setConsumables',
  name:'consumablesList',
  label: '耗材配置',
}
value的类型:Array<initFormDataProps>

interface initFormDataProps {
id: number;
parameter?: any; // 绑定耗材余量参数
resetFirst?: any; // 耗材重置第一个参数
resetLast?: string; // 耗材重置最后一个参数
imgUrl?: string; // 图片地址
explain?: string; // 备注说明
recommendList?:any[]; // 推荐列表
isDone?: boolean; // 当前项表单是否完成填写
isRepeat?:boolean; // 是否重复参数
}
```

* 属性定义

| 参数    | 说明                   | 类型   | 默认值  | 版本    |
|:-----:|:--------------------:|:----:|:----:|:-----:|
| type  | 参数类型                 | 字符串  | 无    | 0.0.1 |
| name  | 参数名称、组件props中赋值的属性名称 | 字符串  | 无    | 0.0.1 |
| label | 属性设置面板用来设置属性的标题      | 字符串  | 无    | 0.0.1 |

* UI

  ![image-card.jpg](./images/type/consumables.png)
  ![image-card.jpg](./images/type/consumable-config.png)

### 16.样式联动

* 定义
  
  ```
  {
    type: 'style-link',
    name: 'link',   
     label:'样式联动'
  }
  ```

* 属性定义

* UI