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

目标

前面介绍了接口组件和表单操作（参见 示例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"
        }
    }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.
• 48.
• 49.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.
• 56.
• 57.
• 58.
• 59.
• 60.
• 61.
• 62.
• 63.
• 64.
• 65.
• 66.
• 67.
• 68.
• 69.
• 70.
• 71.
• 72.
• 73.
• 74.
• 75.
• 76.
• 77.
• 78.
• 79.
• 80.
• 81.
• 82.
• 83.
• 84.
• 85.
• 86.
• 87.
• 88.
• 89.
• 90.
• 91.
• 92.
• 93.
• 94.
• 95.
• 96.
• 97.
• 98.
• 99.
• 100.
• 101.
• 102.
• 103.
• 104.
• 105.

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

• 去掉勾选 开启阴影

• 勾选 纯表单

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

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

效果如下：

页面嵌套

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

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

需要用到 嵌套容器中内嵌页的 表单属性，在继承面板中，选择继承这几个属性。

（参见 连线-高级篇属性继承），如下所示：

连线操作

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

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

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

因步骤2已勾选了 纯表单

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

小结

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

原创作者: u_15629616 转载于: https://blog.51cto.com/u_15629616/11860723