<!-- source: https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/public/repository/b7c818b1-9132-46a7-bfaf-78fc6747791a/doc/265623892880523264 -->

## 1、数字面板字体大小和颜色配置

#### （1）问题举例

![image.png](../_assets/265623892880523264/001-4a866ccd64.png)

![image.png](../_assets/265623892880523264/002-f9c34d183e.png)

此类问题中的字体大小和颜色配置问题，建议使用数字面板组件自带的配置来实现，若使用二开css的方案，则会丢失组件自带的配置能力。

#### （2）配置方法

![image.png](../_assets/265623892880523264/003-b16599926a.png)

数字面板组件包含组件自定义样式设置功能，其中可以对字体颜色 / 大小 / 字重进行配置。

## 2、九宫格字段配置方案

#### （1）问题举例

![image.png](../_assets/265623892880523264/004-69b1087b3d.png)

在使用EB组件进行字段展示时，如图所示的字段展示配置为九宫格字段配置，常见于列表的列表式、看板、项目树任务数业务组件等。

#### （2）配置方法

![image.png](../_assets/265623892880523264/005-5b64576a0f.png)

![image.png](../_assets/265623892880523264/006-cbc68db3f1.png)

配置例子

为最大保留EB原生拥有的配置能力， 不重复实现组件已有功能（按钮配置，点击事件等逻辑），在使用九宫格字段配置组件时，建议将无需进行自定义渲染的字段使用EB配置的方式来实现所需的样式，如字体的颜色、大小、字重配置等。间距等样式问题由前端使用css处理。

## 3、字段级自定义渲染

### （1）问题举例

### ![image.png](../_assets/265623892880523264/007-1c1030de54.png)

![image.png](../_assets/265623892880523264/008-8a77b3e1a6.png)

![image.png](../_assets/265623892880523264/009-c3b2f89ef5.png)

(2) 调用自定义渲染

对于原生EB无法配置出来的字段效果而需要使用自定义渲染时，如紧急程度 / 状态和进度（不展示进度条）等，前端实现了字段级渲染的统一方案，可通过在EB页面中调用代码块来实现。

```javascript
// 自定义渲染方法
window.sjrProjectSDK.appendRegField(COMPID, fieldName);

// 参数描述
// COMPID - 组件ID，可在EB页面中选中组件后复制ID获取
// fieldName - 需要走统一自定义渲染逻辑的字段名称，可传string或string[]
// ⚠️⚠️⚠️ compId会层层传递，例如在多列容器中包含列表，如果传了多列容器的Id，则被包裹的列表也会走此逻辑

// example - 我的项目页面紧急程度、项目状态自定义渲染、如上图二
// 含义：对于组件ID为c92fe1f7df5248e38b64523a686f8356的组件，将对应字段为项目表中紧急程度、项目类型、项目状态的字段，使用统一自定义渲染逻辑进行处理
window.sjrProjectSDK.appendRegField('c92fe1f7df5248e38b64523a686f8356', ['projectBasePriority', 'projectBaseType', 'projectBaseStatus']);
```

### (3)当前支持的字段类型和效果(完善中)

（如需要实现对应效果可直接使用）

#### 3.1 项目进度 / 任务进度:

用于取消进度条展示

字段key：projectBaseProgress / taskBaseProgress

**效果图：**![image.png](../_assets/265623892880523264/010-1996a3168b.png)

#### 3.2 项目状态 / 任务状态：

根据配置的颜色渲染状态字段

字段key：projectBaseStatus / taskBaseStatus

**效果图**：  
![image.png](../_assets/265623892880523264/011-16aca39383.png)

#### 3.3 项目紧急程度 / 任务紧急程度：

根据配置的颜色渲染紧急程度字段

字段key：projectBasePriority / taskBasePriority

**效果图（update: 现在紧急程度的渲染与状态维持一致）：**

![image.png](../_assets/265623892880523264/012-d5ee64717f.png)

#### 3.4 项目类型 / 任务类型：

用于取消默认的点击事件

字段key：projectBaseType / taskBaseType

**效果图：**

#### ![image.png](../_assets/265623892880523264/013-ea08cf9252.png)

#### 3.5 任务负责人（看板中，渲染为头像）（废弃warning，无法获取到头像信息，使用自带显示转换实现）

字段key：taskBaseManager

#### 3.6 任务起始日、到期日（看板中）（四个字段同时存在时，还需要存在状态字段才能使用；必须存在对应的起始日和到期日字段才可使用）

字段key：taskBasePlanStart / taskBasePlanEnd / taskBaseActualStart / taskBaseActualEnd

渲染逻辑：

1、存在状态字段时，根据状态展示计划或实际日期；

2、未设置时，展示未设置。

3、非用户当前年的数据，展示为年月日。

**效果图：**![image.png](../_assets/265623892880523264/014-52fc41337b.png)

#### 3.7 项目任务起始日、到期日（列表、表格中，渲染颜色需要存在状态字段）

字段key：taskBasePlanStart / taskBasePlanEnd / taskBaseActualStart / taskBaseActualEnd / projectBasePlanStart / projectBasePlanEnd / projectBaseActualStart / projectBaseActualEnd

**渲染逻辑：**

计划开始时间 - 红色：

— 当前状态 == 未开始 && 计划开始时间 \< 当前时间

计划完成时间 - 红色：

— 当前状态 !== 已完成 && 计划完成时间 \< 当前时间

开始时间时分为00:00时不显示，完成时间时分为23:59时不显示

**效果图：**

![image.png](../_assets/265623892880523264/015-42d4f37617.png)
