UIOTOS文档：示例12：接口查询曲线展示| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat

**

注意:本文为自动抓取供AI学习!!格式未经调整，点击[查看原文档]

**(https://www.yuque.com/liuhuo-nc809/uiotos/agxi0nd0fmmxxq7h?singleDoc#%20%E3%80%8A%E7%A4%BA%E4%BE%8B12%EF%BC%9A%E6%8E%A5%E5%8F%A3%E6%9F%A5%E8%AF%A2%E6%9B%B2%E7%BA%BF%E5%B1%95%E7%A4%BA%E3%80%8B)!

目标

前面介绍了接口组件和表单操作（参见示例9和示例11），本篇综合介绍查询数据表单方式给到曲线。示例如下：

步骤

示例说明

• 内嵌页放置曲线组件，以及清空按钮。
• 主页面按钮，触发接口调用，数据通过表单赋值，给到内嵌页的曲线。

内嵌页

包含有统计曲线、按钮组件，如下所示：

新建

略。参见1新建。命名为"曲线图"。

拖放组件

拖入按钮、统计曲线并设置：
步骤1：拖入按钮（属性设置可忽略）

• 文字设置清空
• 去掉勾选深色风格

步骤2：拖入统计曲线组件

• 数量设置为1
• X轴数据
  • 设置该属性为纯表单。（点击，面板中选择formValue，参见纯表单使用）
  • 别名设置../xdate。（格式参考自定义属性别名）

别名的设置取决于接口返回的字段以及结构，与当前值，构成表单数据的一项键值对。

• Y轴数据_0
  • 设置该属性为纯表单。点击，面板中选择formValue，参见纯表单使用）
  • 别名设置../yvalue/chart。（格式参考自定义属性别名）

别名的设置取决于接口返回的字段。与当前值，同样也构成表单数据的一项键值对。

完整步骤：

说明：因每次拖进来的统计曲线，颜色是随机的，这里可忽视颜色的变化。

连线操作

按钮点击，清空曲线数据。设置如下：

• 无关联属性（按钮）→ Y轴数据_0（统计曲线）
• 解析赋值索引0位置为[]。（注意：并非清空属性，而是对其索引0设置空数组值，让连线直接传出）

布局

全部所有组件，右键菜单中，选择自动布局(参见布局)。

主页面

接口请求数据，表单操作给到曲线，如下所示：

新建

略。参见1新建。命名为"接口数据给统计曲线图"。

拖放组件

拖入接口、按钮、嵌套容器组件，并设置属性：
步骤1：拖入接口组件，设置如下：> 这里配置按照示例的测试接口来，仅作参考。

• 接口地址：长度为2，索引0、1分别设置（参见接口地址url）：
  • 索引0设置："http://203.189.6.3:19999/"
  • 索引1设置："property/FacialRecord/humanDecencyDataScreening"
• 请求类型选择GET
• 参数对象设置{"time":"2024-03-14"}

注意事项：

为了方面接口测试，也可以用mock模拟数据（参见开启模拟），步骤如下：

• 勾选开启模拟。
• 模拟返回中填写如下数据：

{
    "success": true,
    "message": "",
    "code": 200,
    "result": {
        "log": [
            {
                "state": "人脸识别",
                "time": "2024-03-14 23:48:48",
                "deviceName": "4F-A"
            },
            {
                "state": "人脸识别",
                "time": "2024-03-14 23:47:50",
                "deviceName": "1F-D"
            },
            {
                "state": "人脸识别",
                "time": "2024-03-14 23:47:33",
                "deviceName": "1F-V"
            },
            {
                "state": "人脸识别",
                "time": "2024-03-14 23:47:27",
                "deviceName": "1F-V"
            },
            {
                "state": "人脸识别",
                "time": "2024-03-14 23:47:18",
                "deviceName": "1F-V"
            },
            {
                "state": "人脸识别",
                "time": "2024-03-14 23:47:15",
                "deviceName": "1F-V"
            }
        ],
        "generalNum": 151303,
        "yvalue": {
            "chart": [
                11,
                14,
                8,
                21,
                10,
                18,
                111,
                477,
                1294,
                1154,
                577,
                995,
                1419,
                617,
                837,
                704,
                581,
                1216,
                961,
                447,
                230,
                128,
                125,
                51
            ]
        },
        "xdate": [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
        ]
    },
    "timestamp": 1719455707194,
    "_requestParams": {
        "type": "get",
        "url": "http://203.189.6.3:19999/property/FacialRecord/humanDecencyDataScreening",
        "contentType": "application/json",
        "data": "time=2024-03-14",
        "dataType": "JSON",
        "headers": {
            "X-Access-Token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MTkzNjgzMTksInVzZXJuYW1lIjoiYWRtaW4ifQ.AnnYQgtveisWQDm9K_hRFIHDOG09exMZRlK_pAVduoA"
        }
    }
}

步骤2：拖入嵌套容器，属性设置：

• 去掉勾选开启阴影

• 勾选纯表单

为什么要勾选纯表单，有什么作用？

步骤3：拖按钮组件，（属性设置可忽略）文字中输入接口查询。

效果如下：

页面嵌套

嵌套容器嵌套前面的内嵌页（操作参见容器嵌套）。

属性继承（可忽略，用默认继承的属性即可）

需要用到嵌套容器中内嵌页的表单属性，在继承面板中，选择继承这几个属性。
（参见连线-高级篇属性继承），如下所示：

连线操作

步骤1：按钮点击触发接口请求无关联属性（按钮）→ 请求（接口）

步骤2：返回数据给曲线表单赋值

• 无关联属性（接口）→ 无关联属性（容器）

因步骤2已勾选了纯表单

• 解析赋值索引0对应值为"result"（参见解析规则）。

小结

本示例进一步介绍了接口请求和表单操作，并且可以了解到，嵌套封装形成的多层页面，分别可以有逻辑，之间能够通信。