Con una importante actualización de la interfaz API de la plataforma de comercio cuantitativo, se han ajustado los parámetros de la interfaz de estrategia de la plataforma, los controles interactivos y otras funciones, y se han agregado muchas funciones nuevas. El artículo anterior presentó en detalle las actualizaciones de los parámetros de la interfaz y los controles interactivos. Este artículo continúa explorando la aplicación del nuevo botón de la barra de estado de FMZ.COM.

Todo desarrollador de estrategias desea crear una interfaz de usuario que sea fácil de usar, potente y de diseño simple. Para alcanzar este estándar, FMZ.COM no escatima esfuerzos para actualizar las funciones de la plataforma y mejorar la experiencia del usuario. El diseño de controles interactivos directamente en la barra de estado de la página de estrategia es una actualización basada en esta demanda.

A continuación, veamos su aplicación en un escenario de estrategia multivariante.

Escenarios de estrategia multiproducto

Ya sea una estrategia de arbitraje multivariedad totalmente automática o una estrategia de sincronización multivariedad semimanual. La interfaz de usuario de la estrategia deberá tener algunos botones interactivos funcionales, como toma de ganancias, stop loss, liquidación, confianza planificada, etc. para un determinado producto.

A continuación, exploremos las nuevas características del botón de la barra de estado con un escenario de uso más simple. Supongamos que nuestra estrategia negocia múltiples símbolos:

Contrato perpetuo BTC_USDT, Contrato perpetuo ETH_USDT, Contrato perpetuo LTC_USDT, Contrato perpetuo BNB_USDT, Contrato perpetuo SOL_USDT

Mientras la estrategia ejecuta operaciones automáticas, esperamos diseñar un botón de apertura para cada producto en la barra de estado de la interfaz de la estrategia. Pero este botón de posición abierta requiere una serie de configuraciones detalladas, como:

• Tipo de orden: Orden limitada/Orden de mercado.
• La cantidad del pedido: cantidad.
• El precio del pedido: Precio.
• Dirección de negociación: comprar (largo), vender (corto).

Antes de esta actualización de la plataforma, el botón de la barra de estado simplemente activaba un mensaje de interacción del botón. No hay forma de vincular una serie de controles para configurar mensajes complejos. Esta actualización de la interacción resuelve esta necesidad. Echemos un vistazo al diseño del código. Se agregaron comentarios detallados al código para que sea más fácil comprender cómo crear una función de este tipo.

Ejemplos de diseño:

// 设置操作的各个品种 BTC_USDT.swap 为FMZ平台定义的品种格式，表示BTC的U本位永续合约
var symbols = ["BTC_USDT.swap", "ETH_USDT.swap", "LTC_USDT.swap", "BNB_USDT.swap", "SOL_USDT.swap"]

// 根据按钮模板构造按钮
function createBtn(tmp, group) {
    var btn = JSON.parse(JSON.stringify(tmp))
    _.each(group, function(eleByGroup) {
        btn["group"].unshift(eleByGroup)
    })

    return btn
}

function main() {
    LogReset(1)

    var arrManager = []
    _.each(symbols, function(symbol) {
        arrManager.push({
            "symbol": symbol,
        })
    })

    // Btn
    var tmpBtnOpen = {
        "type": "button",
        "cmd": "open",
        "name": "开仓下单",
        "group": [{
            "type": "selected",
            "name": "tradeType",
            "label": "下单类型",
            "description": "市价单、限价单",
            "default": 0,
            "group": "交易设置",
            "settings": {
                "options": ["市价单", "限价单"],
                "required": true,
            }
        }, {
            "type": "selected",
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],
            }
        }, {
            "type": "number",
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",
            "settings": {
                "required": true,
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

    while (true) {
        var tbl = {"type": "table", "title": "dashboard", "cols": ["symbol", "actionOpen"], "rows": []}
        _.each(arrManager, function(m) {
            var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])
            tbl["rows"].push([m["symbol"], btnOpen])
        })
        
        var cmd = GetCommand()
        if (cmd) {
            Log("收到交互：", cmd)
            
            // 解析交互消息: open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
            // 根据第一个冒号:之前的指令判断是哪种按钮模板触发的消息
            var arrCmd = cmd.split(":", 2)
            if (arrCmd[0] == "open") {
                var msg = JSON.parse(cmd.slice(5))
                Log("交易品种：", msg["symbol"], "，交易方向：", msg["direction"], "，订单类型：", msg["tradeType"] == 0 ? "市价单" : "限价单", msg["tradeType"] == 0 ? "，订单价格：当前市价" : "，订单价格：" + msg["price"], "，订单数量：", msg["amount"])
            }
        }

        // 输出状态栏信息
        LogStatus(_D(), "\n", "`" + JSON.stringify(tbl) + "`")
        Sleep(1000)
    }
}

Primero echemos un vistazo al efecto de ejecución y luego expliquemos el diseño del control del botón en detalle. El código de estrategia se ejecuta como se muestra a continuación:

Haga clic en un botón y aparecerá una ventana emergente para configurar la información específica del pedido:

Luego de completar la información de apertura diseñamos.

Puedes ver que la estrategia recibió el mensaje y en el código analizamos el mensaje y mostramos las distintas configuraciones para el pedido. A continuación, veamos cómo se construye este botón:

Primero, definimos una plantilla de botón, que es un objeto JSON, y la asignamos a la variable tmpBtnOpen. He incluido las instrucciones específicas directamente en los comentarios del código a continuación.

    {
        "type": "button",       // 状态栏输出控件的类型，目前仅支持按钮
        "cmd": "open",          // 当按钮触发时，策略中GetCommand函数收到的消息前缀，例如这个例子：open:{"symbol":"LTC_USDT.swap","tradeType":0,"direction":"buy","amount":111}
        "name": "开仓下单",      // 策略界面，状态栏上的按钮上显示的内容，参考上图
        "group": [{             // 当按钮触发时，弹框中的控件配置设置，这一层的group字段值是一个数组，弹框中的控件根据这个数组顺序自上而下排列
            "type": "selected",               // 第一个控件类型是：selected ，下拉框 
            "name": "tradeType",              // 当状态栏按钮触发时，消息中包含该控件的设置内容，tradeType就是当前这个下拉框控件输入的值的键名。如果选择第一个选项「市价单」GetCommand函数收到的消息中就包含 "tradeType":0 的键值对信息。
            "label": "下单类型",               // 按钮触发时，弹框中当前控件的标题
            "description": "市价单、限价单",    // 当前控件的说明信息，鼠标放在控件右侧“小问号”图标上就会显示这个说明信息。
            "default": 0,                     // 当前控件的默认值，例如当前是下拉框控件，如果不做选择，默认为下拉框第一个选项，通常下拉框的默认值指的是下拉框选项的索引，即第一个是0，然后是1，以此类推。如果下拉框的选项options是key-value形式则默认值指的是value。
            "group": "交易设置",               // 弹框中的控件如果很多，可以分组，这个字段可以设置分组信息
            "settings": {                     // 当前这个下拉框的具体设置
                "options": ["市价单", "限价单"],   // options和下拉框相关的设置，用于设置下拉框中的选项，这个字段值是一个数组，依次排列下拉框中的选项。
                "required": true,                // required表示是否设置为必选（必填）内容。
            }
        }, {
            "type": "selected",         // 这也是一个下拉框类型
            "name": "direction",
            "label": "交易方向",
            "description": "买入、卖出",
            "default": "buy",
            "group": "交易设置",
            "settings": {
                "render": "segment",   // 和默认下拉框控件不同的是，通过render字段可以把下拉框替换为“分段选择器”，如上图中的“买入/卖出”控件。
                "required": true,
                "options": [{"name": "买入", "value": "buy"}, {"name": "卖出", "value": "sell"}],   // 使用 key-value方式设置options
            }
        }, {
            "type": "number",           // 数值输入框类型控件
            "name": "price",
            "label": "价格",
            "description": "订单的价格",
            "group": "交易设置",
            "filter": "tradeType==1",   // 过滤器，可以用于确定是否显示当前控件，当tradeType==1时，表示是市价单，所以不需要该控件设置价格，所以不显示。
            "settings": {
                "required": true,       // 当该控件激活显示时为必选（必填）
            }
        }, {
            "type": "number",
            "name": "amount",
            "label": "下单量",
            "description": "订单的下单量",
            "group": "交易设置",
            "settings": {
                "required": true,
            }
        }],
    }

• group Dado que este es solo un ejemplo, es posible que existan más requisitos en el diseño y el uso reales, no limitados a la dirección del pedido, el precio, la cantidad y el tipo de pedido establecidos al abrir una posición. También pueden diseñarse reglas de salida como órdenes de planes de toma de ganancias y de stop loss. Así que la nueva interfaz de usuario es compatiblegroupCampo que permite agrupar cómodamente un grupo de controles en el cuadro emergente para su visualización, como la configuración contraída “Configuración de transacciones” en la captura de pantalla anterior.

• required Estructura del botóngroupSe han aumentado los controles establecidos en el campo.requiredEl campo de configuración se utiliza para establecer si es obligatorio (requerido). Si se establece como obligatorio (requerido) pero no se completa (selecciona) durante el uso, no puede hacer clic en el botón Aceptar para enviar la información interactiva y se mostrará un mensaje rojo. Se muestra un mensaje de aviso.

• filter AgregadofilterEl campo se utiliza para establecer dependencias de filtros. Por ejemplo, en el ejemplo anterior, si se selecciona el tipo de orden de mercado, no es necesario indicar el precio de la orden.typees “número”,nameLos controles de “precio” están ocultos.

• render Para estos tipos básicos de controles (configuración de campo de tipo): número, cadena, seleccionado, booleano. Campos añadidosrenderSe utiliza para configurar la representación del control. Cada control tiene sus propios componentes de representación múltiples. Por ejemplo, en el ejemplo anterior, es más apropiado representar el control del cuadro desplegable seleccionado como un “selector de segmento”, porque es necesario hacer clic dos veces en el cuadro desplegable (la primera vez para expandir el cuadro desplegable). , y la segunda vez para seleccionar una opción). Utilice el componente selector de segmentos, simplemente haga clic y seleccione la opción que desee.

Finalmente, los lectores atentos pueden preguntar, en la captura de pantalla anterior, no veo la información de control en el cuadro emergente donde escribió “Tipo de negociación”, y este “Tipo de negociación” no pertenece al grupo “Configuración de negociación”. (es decir:"group": "交易设置"Esta configuración implementa).

A continuación se muestra una demostración de un diseño que vincula los botones de la tabla de la barra de estado a otra información en la barra de estado.createBtnFunción basada en plantillatmpBtnOpenConstruya la estructura final del botón y escriba otra información en la estructura del botón durante la construcción.

// 构造按钮的时候，绑定当前行的品种名称等信息，给按钮的弹框增加一个控件，并排在首位
var btnOpen = createBtn(tmpBtnOpen, [{"type": "string", "name": "symbol", "label": "交易品种", "default": m["symbol"], "settings": {"required": true}}])

Entonces, el efecto final es que cuando haces clic en la barra de estado en la interfaz de estrategiasymbolparaBNB_USDT.swapAl hacer clic en el botón de esta fila, el cuadro de entrada “Tipo de operación” en la ventana emergente se completará automáticamente.BNB_USDT.swap。

Este artículo presenta solo una pequeña parte de la aplicación de la nueva versión de UI. Dado que la extensión total no puede ser demasiado larga, continuaremos analizando el diseño de otros escenarios de demanda en el próximo artículo.

¡Gracias por su apoyo!