Dengan pembaruan besar pada antarmuka API platform perdagangan kuantitatif, parameter antarmuka strategi platform, kontrol interaktif, dan fungsi lainnya telah disesuaikan, dan banyak fungsi baru telah ditambahkan. Artikel sebelumnya memperkenalkan secara rinci pembaruan parameter antarmuka dan kontrol interaktif. Artikel ini terus menjajaki penerapan tombol bilah status yang baru diperkenalkan di FMZ.COM.

Setiap pengembang strategi ingin membangun antarmuka UI yang mudah digunakan, kuat, dan sederhana dalam desain. Untuk mencapai standar ini, FMZ.COM berupaya keras untuk meningkatkan fungsi platform dan meningkatkan pengalaman pengguna. Mendesain kontrol interaktif langsung di bilah status halaman strategi merupakan peningkatan berdasarkan permintaan ini.

Selanjutnya, mari kita lihat penerapannya dalam skenario strategi multivariasi.

Skenario strategi multi-produk

Baik itu strategi arbitrase multivariasi yang sepenuhnya otomatis maupun strategi pengaturan waktu multivariasi yang semi-manual. Antarmuka UI strategi perlu memiliki beberapa tombol interaktif fungsional, seperti take profit, stop loss, likuidasi, entrust terencana, dsb. untuk produk tertentu.

Sekarang mari kita jelajahi fitur-fitur baru tombol status bar dengan skenario penggunaan yang paling sederhana. Asumsikan bahwa strategi kita memperdagangkan beberapa instrumen:

Kontrak Berjangka BTC_USDT, Kontrak Berjangka ETH_USDT, Kontrak Berjangka LTC_USDT, Kontrak Berjangka BNB_USDT, Kontrak Berjangka SOL_USDT

Saat strategi menjalankan perdagangan otomatis, kami berharap dapat merancang tombol pembuka untuk setiap produk di bilah status antarmuka strategi. Namun tombol posisi terbuka ini memerlukan serangkaian pengaturan terperinci, seperti:

• Jenis pesanan: Pesanan batas/Perintah pasar.
• Jumlah pesanan: kuantitas.
• Harga pesanan: harga.
• Arah perdagangan: beli (panjang), jual (pendek).

Sebelum pembaruan platform ini, tombol bilah status hanya memicu pesan interaksi tombol. Tidak ada cara untuk mengikat serangkaian kontrol untuk menyiapkan pesan yang rumit. Peningkatan pada interaksi ini mengatasi kebutuhan ini. Mari kita lihat desain kodenya. Komentar terperinci ditambahkan ke kode untuk memudahkan pemahaman cara membangun fungsi semacam itu.

Contoh Desain:

// 设置操作的各个品种 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)
    }
}

Mari kita lihat efek larinya terlebih dahulu, lalu jelaskan desain kontrol tombol secara terperinci. Kode strategi berjalan seperti yang ditunjukkan di bawah ini:

Klik tombol dan jendela pop-up akan muncul untuk mengonfigurasi informasi pesanan tertentu:

Setelah mengisi informasi pembukaan yang kami rancang.

Anda dapat melihat bahwa strategi menerima pesan tersebut, dan dalam kode kami mengurai pesan dan menampilkan berbagai pengaturan untuk pesanan tersebut. Selanjutnya, mari kita lihat bagaimana tombol ini dibuat:

Pertama, kita mendefinisikan templat tombol, yang merupakan objek JSON, dan menetapkannya ke variabel tmpBtnOpen. Saya telah menyertakan instruksi spesifik langsung dalam komentar kode di bawah.

    {
        "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 Karena ini hanya contoh, mungkin ada lebih banyak persyaratan dalam desain dan penggunaan aktual, tidak terbatas pada arah pesanan, harga, kuantitas, dan jenis pesanan yang ditetapkan saat membuka posisi. Mungkin juga ada aturan keluar yang dirancang seperti perintah rencana take-profit dan stop-loss. Jadi UI baru mendukunggroupBidang, yang memudahkan pengelompokan sekumpulan kontrol dalam kotak pop-up bersama-sama untuk ditampilkan, seperti pengaturan “Pengaturan Transaksi” yang diciutkan pada gambar tangkapan layar di atas.

• required Struktur tombolgroupKontrol yang ditetapkan di lapangan telah ditingkatkanrequiredBidang pengaturan digunakan untuk mengatur apakah itu wajib (diperlukan). Jika diatur ke wajib (diperlukan) tetapi tidak diisi (dipilih) selama penggunaan, Anda tidak dapat mengklik tombol OK untuk mengirim informasi interaktif, dan kotak merah akan muncul. pesan prompt ditampilkan.

• filter DitambahkanfilterKolom ini digunakan untuk menetapkan dependensi filter. Misalnya, dalam contoh di atas, jika jenis order pasar dipilih, harga order tidak diperlukan.typeadalah “angka”,nameKontrol untuk “harga” disembunyikan.

• render Untuk tipe kontrol dasar ini (pengaturan bidang tipe): angka, string, dipilih, boolean. Bidang yang ditambahkanrenderDigunakan untuk mengatur kontrol rendering. Setiap kontrol memiliki beberapa komponen rendering sendiri. Misalnya, pada contoh di atas, lebih tepat untuk merender kontrol kotak drop-down yang dipilih sebagai “pemilih segmen”, karena kotak drop-down perlu diklik dua kali (pertama kali untuk memperluas kotak drop-down , dan kedua kalinya untuk memilih opsi). Gunakan komponen pemilih segmen, cukup klik dan pilih opsi yang Anda inginkan.

Terakhir, pembaca yang cermat mungkin bertanya, pada gambar di atas, saya tidak melihat informasi kontrol di kotak pop-up tempat Anda menulis “Jenis Perdagangan”, dan “Jenis Perdagangan” ini tidak termasuk dalam grup “Pengaturan Perdagangan” (yaitu:"group": "交易设置"Pengaturan ini menerapkan).

Berikut adalah demonstrasi desain yang mengikat tombol-tombol pada tabel bilah status ke informasi lain dalam bilah status.createBtnFungsi berdasarkan templatetmpBtnOpenBangun struktur tombol akhir dan tulis informasi lainnya ke dalam struktur tombol selama konstruksi.

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

Jadi efek akhirnya adalah ketika Anda mengklik bilah status pada antarmuka strategisymboluntukBNB_USDT.swapSaat Anda mengklik tombol di baris ini, kotak input “Jenis Perdagangan” di jendela pop-up akan terisi secara otomatis.BNB_USDT.swap。

Artikel ini hanya memperkenalkan sebagian kecil penerapan UI versi baru. Karena panjang keseluruhannya tidak boleh terlalu panjang, kami akan terus membahas desain skenario permintaan lainnya di artikel berikutnya.

Terima kasih atas dukungan Anda!