Merge branch 'source' of https://github.com/ThingsPanel/thingspanel.github.io into source

Author: hezhuozhuo

docs/user-guide/tenant-operation-manual/device-mgt/device_template.md

@@ -2,48 +2,81 @@
 sidebar_position: 4
 ---
 
-# Product Model
+# Thing Model
 
-The purpose of the Product Model (Thing Model) is to reuse data definitions and charts.
+A Thing Model defines reusable device fields and the Web/App chart pages that are generated from those fields. Device templates can reference a Thing Model so devices of the same type share the same data structure and visualization configuration.
 
 ## 1. Description
-- Click Device Onboarding - Product Model to enter the management page.
-- Product Model corresponds to real-world product names, e.g., "Temp & Hum Sensor" in "Brand X Temp & Hum Sensor".
-- Defines charts and data structures.
-- Charts for Apps can be pre-configured for efficient device onboarding.
-- Product Model can be called by Device Templates.
+
+- Go to **Device Onboarding** > **Thing Model** to open the Thing Model management page.
+- A Thing Model usually represents a real device type, such as a temperature and humidity sensor.
+- The model definition contains telemetry, attributes, events, and commands. These fields can be used as data sources in chart configuration.
+- Web Chart Configuration and App Chart Configuration use the ThingsVis editor to create previewable visualization pages.
+- The saved chart configuration is applied when devices using this model display their details page.
 
 ## 2. Operations
 
-### 2.1 Create Product Model
+### 2.1 Create a Thing Model
 
-- Click "Add Product Model" to create new.
-- Set Template Name, Tags, etc.
+- Click **Add Thing Model**.
+- Enter the name, tag, author, version, description, icon, and other basic information.
 
-![Create Model](./images/image66.png)
+![Create Thing Model](./images/image66.png)
 
-### 2.2 Configure Product Model
+### 2.2 Define the Thing Model
 
-- Configure mapping relations for Telemetry, Attributes, Events, Commands parameter data names and identifiers.
+- Configure the data name, identifier, data type, unit, description, and read/write settings for telemetry and attributes.
+- Configure events and commands when the device needs event reporting or platform-issued control instructions.
+- Save the model definition before entering the chart configuration steps.
 
-![Configure Model](./images/image67.png)
+![Define Thing Model](./images/image67.png)
 
-### 2.3 Configure Charts
+### 2.3 Configure Web Charts
 
-- Select charts to display and data sources.
+The Web chart step is configured through the embedded ThingsVis preview and editor. The **Thing Model Configuration DEMO** shows the current workflow.
 
-![Configure Chart 1](./images/image68.png)
+- In the edit dialog, go to step **3 Web Chart Configuration**.
+- Select the refresh interval at the top of the card. In the DEMO, the interval is set to **5 seconds**.
+- The center area displays the current Web chart page as a ThingsVis preview. In the DEMO, it includes temperature trend, humidity trend, device switch, temperature setting, current temperature, and current humidity widgets.
+- Click **Edit Configuration** to open the ThingsVis editor.
 
-![Configure Chart 2](./images/image69.png)
+![Web Chart Configuration](./images/image68.png)
 
-### 2.4 Configure App Charts
+- In the editor, use the left component library to add widgets, adjust the canvas in the center, and configure the selected page or widget in the right property panel.
+- When binding data, select the fields from the current Thing Model, such as `temperature`, `humidity`, and `switch`.
+- Click **Save Configuration** to save the page back to the Web chart configuration. Click **Cancel** only when you do not want to save the changes.
+- After saving, the Web chart step returns to the preview. Confirm the preview is correct, then click **Next Step**.
+
+![Edit Web Chart Configuration](./images/image69.png)
+
+#### Data binding examples
+
+Select a widget on the canvas, or switch to **Layers** and select the target widget by name. The selected widget's binding options are shown in the right property panel.
+
+For a trend chart, select a line chart widget, such as `chart/uplot`. In **Content**, configure the chart title and display options. In **Data**, set the dataset binding mode to **Field**, set **Data Range** to **Device Data**, set **Data Type** to **Historical Data**, and select a historical array field such as `temperature__history` or `humidity__history`. Configure the time range, aggregation function, aggregation window, smooth curve, and area fill as needed.
 
-- View App chart styles.
+![Trend Chart Data Binding](./images/image70.png)
+
+For a value card, select `interaction/value-card`. Set the card title, then set the value binding mode to **Field**. Use **Device Data** as the data range, **Thing Model Field** as the data type, and select a numeric field such as `humidity` or `temperature`. Configure the unit, whether to show the unit, the decimal places, and optional trend or icon display.
+
+![Value Card Data Binding](./images/image71.png)
+
+For a switch, select `interaction/switch`. Set **Switch Status** to **Field**, use **Device Data** as the data range, select **Thing Model Field**, and bind it to a Boolean field such as `switch`. Configure the label text, label position, on/off text, size, colors, and behavior options such as disabled state or confirmation before switching.
+
+![Switch Data Binding](./images/image72.png)
+
+### 2.4 Configure App Charts
 
-![App Chart](./images/image70.png)
+The App chart step also uses the ThingsVis editor, but the result is saved separately for the mobile App detail page.
 
-### 2.5 Complete Configuration
+- Go to step **4 App Chart Configuration**.
+- Select the refresh interval for the App detail page.
+- Click **Create Configuration** or **Edit Configuration** to open the editor.
+- Design the mobile detail page and bind widgets to telemetry or attribute fields from the Thing Model.
+- Click **Save Configuration** to save the App chart page and return to the preview.
+- Click **Next Step** to enter the publish step.
 
-- View template info and complete configuration.
+### 2.5 Complete and Publish
 
-![Complete](./images/image71.png)
+- Review the Thing Model information, model definition, Web chart configuration, and App chart configuration.
+- Publish the model after confirming that the configuration is correct.

docs/user-guide/tenant-operation-manual/device-mgt/images/image68.png

@@ -4,51 +4,79 @@ sidebar_position: 4
 
 # 物模型
 
-物模型的目的是复用物模型和图表。如下说明物模型功能如何使用。
+物模型用于定义可复用的设备字段，以及基于这些字段生成的 Web/App 图表页面。设备模板引用物模型后，同一类设备可以复用相同的数据结构和可视化配置。
 
 ## 1、说明
-- 点击设备接入-物模型进入模板管理页面。
-- 物模型对应了现实世界的产品名，例如XX品牌的温湿度传感器中的"温湿度传感器"
-- 物模型的目的是定义物模型定义图表D
-- App端的图表等，设定预配置，方便高效的接入设备。
-- 物模型可以被物模型调用。
 
+- 进入 **设备接入** > **物模型**，打开物模型管理页面。
+- 物模型通常对应现实世界中的设备类型，例如温湿度传感器。
+- 模型定义包含遥测、属性、事件和命令，这些字段可作为图表配置的数据源。
+- Web 图表配置和 App 图表配置均通过 ThingsVis 编辑器创建，并支持保存后预览。
+- 保存后的图表配置会应用到使用该物模型的设备详情页。
 
 ## 2、操作
 
 ### 2.1、创建物模型
 
-- 点击"添加物模型"就可以新建。
+- 点击 **新建物模型**。
+- 填写名称、标签、作者、版本、说明、图标等基本信息。
 
-- 新建时需要设置模板名称，标签等信息。
+![创建物模型](./images/image66.png)
 
-![descript](./images/image66.png)
+### 2.2、定义物模型
 
-### 2.2、配置物模型
+- 配置遥测、属性的数据名称、标识符、数据类型、单位、说明和读写设置。
+- 当设备需要上报事件或接收平台控制指令时，继续配置事件和命令。
+- 保存模型定义后，再进入图表配置步骤。
 
-- 可以在这里配置遥测、属性、事件、命令等对应的参数的数据名称-标识符的映射关系。
+![定义物模型](./images/image67.png)
 
-![descript](./images/image67.png)
+### 2.3、配置 Web 图表
 
-### 2.3、配置图表
+当前 Web 图表通过内嵌的 ThingsVis 预览和编辑器完成配置。下图以 **物模型配置 DEMO** 为例说明当前流程。
 
-- 并选择展示的图表和数据来源
+- 在编辑弹窗中进入第 **3 步 Web 图表配置**。
+- 在卡片顶部选择刷新频率。DEMO 中当前设置为 **5 秒**。
+- 中间区域会以内嵌 ThingsVis 的方式预览当前 Web 图表页面。DEMO 中包含温度趋势、湿度趋势、设备开关、温度设置、当前温度和当前湿度等组件。
+- 点击 **编辑配置** 打开 ThingsVis 编辑器。
 
-![descript](./images/image68.png)
+![Web 图表配置](./images/image68.png)
 
-![descript](./images/image69.png)
+- 在编辑器中，左侧组件库用于添加组件，中间为画布，右侧属性面板用于配置页面或选中的组件。
+- 绑定数据时，从当前物模型字段中选择对应字段，例如 `temperature`、`humidity`、`switch`。
+- 点击 **保存配置** 后，页面会保存回 Web 图表配置；如果不保存本次修改，点击 **取消**。
+- 保存后会返回 Web 图表预览，确认预览无误后点击 **下一步**。
 
-### 2.4、配置App图表
+![编辑 Web 图表配置](./images/image69.png)
 
-- 查看APP图表的样式：
+#### 绑定数据示例
 
-![descript](./images/image70.png)
+在画布中选中组件，或切换到 **图层** 后按组件名称选择目标组件。选中后，右侧属性面板会显示该组件的数据绑定项。
 
-### 2.5、完成配置
+配置曲线图时，选择 `图表/时序图` 等折线图组件。在 **内容** 中设置标题、图例、X 轴、Y 轴等显示项；在 **数据** 中将数据集绑定模式设为 **字段**，数据范围选择 **设备数据**，数据类型选择 **历史数据**，字段选择 `temperature__history` 或 `humidity__history` 这类历史数组字段。随后按需要设置时间范围、聚合函数、聚合窗口、平滑曲线和面积填充。
 
-- 查看模板的信息，并完成配置。
+![曲线图数据绑定](./images/image70.png)
 
-![descript](./images/image71.png)
+配置数值卡片时，选择 `指标/数值`。先设置卡片标题，再将 **数值** 的绑定模式设为 **字段**。数据范围选择 **设备数据**，数据类型选择 **物模型字段**，字段选择 `humidity` 或 `temperature` 等数值字段。根据物模型字段设置单位、是否显示单位、小数位数，也可以按需要开启趋势或图标。
 
+![数值卡片数据绑定](./images/image71.png)
 
+配置开关时，选择 `控制/开关`。将 **开关状态** 的绑定模式设为 **字段**，数据范围选择 **设备数据**，数据类型选择 **物模型字段**，字段绑定到 `switch` 这类布尔字段。然后配置标签文字、标签位置、开启文字、关闭文字、尺寸、颜色，以及禁用、确认后切换等行为选项。
 
+![开关数据绑定](./images/image72.png)
+
+### 2.4、配置 App 图表
+
+App 图表同样使用 ThingsVis 编辑器配置，但会单独保存为移动端 App 详情页配置。
+
+- 进入第 **4 步 App 图表配置**。
+- 选择 App 详情页的刷新频率。
+- 点击 **创建配置** 或 **编辑配置** 打开编辑器。
+- 设计移动端详情页，并将组件绑定到物模型中的遥测或属性字段。
+- 点击 **保存配置** 保存 App 图表页面，并返回预览。
+- 点击 **下一步** 进入发布步骤。
+
+### 2.5、完成并发布
+
+- 检查物模型基本信息、模型定义、Web 图表配置和 App 图表配置。
+- 确认无误后发布物模型。