Dengan kemas kini utama kepada antara muka API platform dagangan kuantitatif, parameter antara muka strategi platform, kawalan interaktif dan fungsi lain telah dilaraskan, dan banyak fungsi baharu telah ditambah. Artikel sebelumnya memperkenalkan secara terperinci kemas kini parameter antara muka dan kawalan interaktif. Artikel ini terus meneroka aplikasi butang bar status FMZ.COM yang baru diperkenalkan.

Setiap pembangun strategi ingin membina antara muka UI yang mudah digunakan, berkuasa dan mudah dalam reka bentuk. Untuk mencapai standard ini, FMZ.COM tidak berusaha keras untuk menaik taraf fungsi platform dan meningkatkan pengalaman pengguna. Mereka bentuk kawalan interaktif secara langsung dalam bar status halaman strategi ialah peningkatan berdasarkan permintaan ini.

Seterusnya, mari kita lihat aplikasinya dalam senario strategi pelbagai variasi.

Senario strategi berbilang produk

Sama ada strategi arbitraj berbilang pelbagai automatik sepenuhnya atau strategi pemasaan pelbagai pelbagai separa manual. Antara muka UI strategi perlu mempunyai beberapa butang interaktif berfungsi, seperti ambil untung, henti rugi, pembubaran, pengamanahan yang dirancang, dll. untuk produk tertentu.

Kemudian mari kita terokai ciri baharu butang bar status dengan senario penggunaan paling mudah. Andaikan strategi kami memperdagangkan berbilang simbol:

Kontrak Kekal BTC_USDT, Kontrak Kekal ETH_USDT, Kontrak Kekal LTC_USDT, Kontrak Kekal BNB_USDT, Kontrak Kekal SOL_USDT

Semasa strategi melaksanakan dagangan automatik, kami berharap dapat mereka bentuk butang pembukaan untuk setiap produk dalam bar status antara muka strategi. Tetapi butang kedudukan terbuka ini memerlukan satu siri tetapan terperinci, seperti:

• Jenis pesanan: Hadkan pesanan/Pesanan pasaran.
• Kuantiti pesanan pesanan: kuantiti.
• Harga pesanan: harga.
• Arah dagangan: beli (panjang), jual (pendek).

Sebelum naik taraf platform ini, butang bar status hanya mencetuskan mesej interaksi butang. Tiada cara untuk mengikat satu siri kawalan untuk menyediakan mesej yang kompleks. Peningkatan kepada interaksi ini menyelesaikan keperluan ini. Mari kita lihat pada reka bentuk kod. Komen terperinci ditambahkan pada kod untuk memudahkan anda memahami cara membina fungsi tersebut.

Contoh Reka Bentuk:

// 设置操作的各个品种 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 kesan larian dahulu, dan kemudian terangkan reka bentuk kawalan butang secara terperinci. Kod strategi berjalan seperti yang ditunjukkan di bawah:

Klik butang dan tetingkap pop timbul akan muncul untuk mengkonfigurasi maklumat pesanan tertentu:

Selepas mengisi maklumat pembukaan yang kami reka.

Anda boleh melihat bahawa strategi menerima mesej, dan dalam kod kami menghuraikan mesej dan mengeluarkan pelbagai tetapan untuk pesanan. Seterusnya, mari kita lihat bagaimana butang ini dibina:

Mula-mula, kami mentakrifkan templat butang, yang merupakan objek JSON, dan menetapkannya kepada pembolehubah tmpBtnOpen. Saya telah memasukkan arahan khusus secara langsung dalam komen kod 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 Kerana ini hanyalah contoh, mungkin terdapat lebih banyak keperluan dalam reka bentuk dan penggunaan sebenar, tidak terhad kepada arah pesanan, harga, kuantiti dan jenis pesanan yang ditetapkan semasa membuka kedudukan. Mungkin juga terdapat peraturan keluar yang direka seperti pesanan pelan ambil untung dan henti rugi. Jadi UI baharu menyokonggroupMedan, yang memudahkan untuk mengumpulkan sekumpulan kawalan dalam kotak timbul bersama-sama untuk paparan, seperti tetapan “Tetapan Transaksi” runtuh dalam tangkapan skrin di atas.

• required Struktur butanggroupKawalan yang ditetapkan di lapangan telah ditingkatkanrequiredMedan tetapan digunakan untuk menetapkan sama ada ia wajib (diperlukan Jika ia ditetapkan kepada mandatori (diperlukan) tetapi tidak diisi (dipilih) semasa penggunaan, anda tidak boleh mengklik butang OK untuk menghantar maklumat interaktif dan merah. mesej gesaan dipaparkan.

• filter DitambahfilterMedan digunakan untuk menetapkan kebergantungan penapis Sebagai contoh, dalam contoh di atas, jika jenis pesanan pasaran dipilih, harga pesanan tidak diperlukan.typeialah “nombor”,nameKawalan untuk “harga” disembunyikan.

• render Untuk jenis kawalan asas ini (tetapan medan jenis): nombor, rentetan, dipilih, boolean. Medan ditambahrenderDigunakan untuk menetapkan pemaparan kawalan Setiap kawalan mempunyai berbilang komponen pemaparan sendiri. Sebagai contoh, dalam contoh di atas, adalah lebih sesuai untuk menjadikan kawalan kotak lungsur yang dipilih sebagai “pemilih segmen”, kerana kotak lungsur turun perlu diklik dua kali (kali pertama untuk mengembangkan kotak lungsur turun , dan kali kedua untuk memilih pilihan). Gunakan komponen pemilih segmen , cuma klik dan pilih pilihan yang anda mahu.

Akhir sekali, pembaca berhati-hati mungkin bertanya, dalam tangkapan skrin di atas, saya tidak melihat maklumat kawalan dalam kotak timbul tempat anda menulis “Jenis Dagangan”, dan “Jenis Dagangan” ini bukan tergolong dalam kumpulan “Tetapan Dagangan” (iaitu:"group": "交易设置"Tetapan ini melaksanakan).

Berikut ialah demonstrasi reka bentuk yang mengikat butang dalam jadual bar status kepada maklumat lain dalam bar status.createBtnFungsi berdasarkan templattmpBtnOpenBina struktur butang akhir dan tulis maklumat lain ke dalam struktur butang semasa pembinaan.

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

Jadi kesan terakhir ialah apabila anda mengklik pada bar status pada antara muka strategisymboluntukBNB_USDT.swapApabila anda mengklik butang dalam baris ini, kotak input “Jenis Perdagangan” dalam tetingkap pop timbul akan diisi secara automatik.BNB_USDT.swap。

Artikel ini hanya memperkenalkan sebahagian kecil daripada aplikasi versi baharu UI Memandangkan panjang keseluruhan tidak boleh terlalu panjang, kami akan terus membincangkan reka bentuk senario permintaan lain dalam artikel seterusnya.

Terima kasih atas sokongan anda!