当前位置： 移动技术网 > IT编程>开发语言>Java > 期货交易网页端（一）

期货交易网页端（一）

2018年09月19日  | 移动技术网IT编程  | 我要评论

 

需求：

用网页打开

登陆框：brokerid，investorid，密码，登陆

下单框：选择方向：买、卖，选择开平：开，平，平今，价格，数量。

持仓框：合约名称，多空，手数，可平，持仓均价，持仓盈亏

挂单框：合约名称，开平，委托价，委托量，挂单量？

委托框：合约名称，状态，开平，委托价，委托量，已成交，已撤单，委托时间

成交框：合约名称，开平，成交价，成交量，成交时间

 

思路：

 新建一个web的项目，基于spring框架。

一方面，后端通过websocket与网页（html5）建立连接，通过stomp协议交换数据。网页将登陆信息，下单操作信息发送给后端。后端将得到的持仓、挂单、委托、成交错误等信息实时的发送给网页。

另一方面，后端通过ctp api，将前端发送过来的登陆、下单请求发给交易服务器。再计算各种状态，将结果通知给前端。（也可以单独新建一个项目，单独实现ctp api的功能，然后通过activemq（或其他方式）进行处理。本文中，假设ctp api已经实现，这里会使用假的接口假装实现一下。

开搞：

因为所有的功能基本上是表格，很自然的就找到了ag-grid这个东西。

先画一个：

<!doctype html>
<html>

<head>
    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.nostyle.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>

<body>
    <div id="orderpanel" style="height: 50px; width:1280px;">这里是下单框</div>
    
    <div id="positiongrid" style="height: 120px;width:1280px;" class="ag-theme-balham">这是持仓框</div>
    <div id="pendingordersgrid" style="height: 120px;width:1280px;" class="ag-theme-balham">这是挂单框</div>
    <div id="allordersgrid" style="height: 120px;width:1280px;" class="ag-theme-balham">这是委托框</div>
    <br/>
    <div id="tradedgrid" style="height: 120px;width:1280px;" class="ag-theme-balham">这是成交框</div>
    <script type="text/javascript" charset="utf-8">
        var positioncolumndefs = [
            { headername: "合约名称", field: "instrumentid" },
            { headername: "多空", field: "posidirection" },
            { headername: "手数", field: "volume" },
            { headername: "可平", field: "volume1" },
            { headername: "持仓均价", field: "opencost" },
            { headername: "持仓盈亏", field: "positionprofit" }
        ];

        // specify the data
        var positionrowdata = [
            { instrumentid: "i1901", posidirection: "多",volume:39,volume1:20, opencost:3311,positionprofit: 35000 },
            { instrumentid: "m1901", posidirection: "空",volume:39,volume1:20, opencost:3311,positionprofit: 35000 }


        ];

        var positiongridoptions = {
            columndefs: positioncolumndefs,
            rowdata: positionrowdata,
            enablesorting: true,
            rowselection: 'single'
        };

        // lookup the container we want the grid to use
        var positiongriddiv = document.queryselector('#positiongrid');

        // create the grid passing in the div to use together with the columns & data we want to use
        new aggrid.grid(positiongriddiv, positiongridoptions);


        ///挂单框///////////////////////////////////////////
        var pendingorderscolumndefs = [
            { headername: "合约名称", field: "instrumentid" },
            { headername: "开平", field: "comboffsetflag" },
            { headername: "委托价", field: "limitprice" },
            { headername: "委托量", field: "volumetotaloriginal" },
            { headername: "挂单量", field: "volumetotal" }
        ];

        // specify the data
        var pendingordersrowdata = [
            { instrumentid: "i1901", comboffsetflag: "开",limitprice:5555,volumetotaloriginal:20, volumetotal:20},
            { instrumentid: "m1901", comboffsetflag: "平",limitprice:3721,volumetotaloriginal:20, volumetotal:10}
        ];

        var pendingordersgridoptions = {
            columndefs: pendingorderscolumndefs,
            rowdata: pendingordersrowdata,
            enablesorting: true,
            rowselection: 'single'
        };

        // lookup the container we want the grid to use
        var pendingordersgriddiv = document.queryselector('#pendingordersgrid');

        // create the grid passing in the div to use together with the columns & data we want to use
        new aggrid.grid(pendingordersgriddiv, pendingordersgridoptions);

        //委托框//////////////////////////////////
        var allorderscolumndefs = [
            { headername: "合约名称", field: "instrumentid" },
            { headername: "状态", field: "orderstatus" },
            { headername: "开平", field: "comboffsetflag" },
            { headername: "委托价", field: "limitprice" },
            { headername: "委托量", field: "volumetotaloriginal" },
            { headername: "已成交", field: "volumetraded" },
            { headername: "已撤单", field: "volumecancelled" },
            { headername: "委托时间", field: "inserttime" }
        ];

        // specify the data
        var allordersrowdata = [
            { instrumentid: "i1901", orderstatus: "已成",comboffsetflag:"开",limitprice:509, volumetotaloriginal:2,volumetraded: 2, volumecancelled:0,inserttime:"22:18:00"},
            { instrumentid: "m1901", orderstatus: "已成",comboffsetflag:"平",limitprice:509, volumetotaloriginal:2,volumetraded: 2, volumecancelled:0,inserttime:"23:18:00"},


        ];

        var allordersgridoptions = {
            columndefs: allorderscolumndefs,
            rowdata: allordersrowdata,
            enablesorting: true
        };

        // lookup the container we want the grid to use
        var allordersgriddiv = document.queryselector('#allordersgrid');

        // create the grid passing in the div to use together with the columns & data we want to use
        new aggrid.grid(allordersgriddiv, allordersgridoptions);

        ///成交框/////////////////////////////////////////////////////////////////
        var tradedcolumndefs = [
            { headername: "合约名称", field: "instrumentid" },
            { headername: "开平", field: "offsetflag" },
            { headername: "成交价", field: "price" },
            { headername: "成交量", field: "volume" },
            { headername: "成交时间", field: "tradetime" }
        ];

        // specify the data
        var tradedrowdata = [
            { instrumentid: "i1901", offsetflag: "平",price:501,volume:20, tradetime:"09:00:01" },
            { instrumentid: "m1901", offsetflag: "开",price:501,volume:20, tradetime:"09:00:02" },
            { instrumentid: "rb1901", offsetflag: "平",price:501,volume:20, tradetime:"09:00:01" },
            { instrumentid: "i1901", offsetflag: "开",price:501,volume:20, tradetime:"13:33:01" },
            { instrumentid: "i1901", offsetflag: "平",price:501,volume:20, tradetime:"09:00:01" },
            { instrumentid: "i1901", offsetflag: "开",price:501,volume:20, tradetime:"14:00:01" },
            { instrumentid: "i1901", offsetflag: "平",price:501,volume:20, tradetime:"09:00:01" },
            { instrumentid: "i1901", offsetflag: "开",price:501,volume:20, tradetime:"10:00:01" },
            { instrumentid: "i1901", offsetflag: "开",price:501,volume:20, tradetime:"11:00:01" },
            { instrumentid: "i1901", offsetflag: "平",price:501,volume:20, tradetime:"22:00:01" },
            { instrumentid: "i1901", offsetflag: "平",price:501,volume:20, tradetime:"09:00:01" },



        ];

        var tradedgridoptions = {
            columndefs: tradedcolumndefs,
            rowdata: tradedrowdata,
            enablesorting: true
        };

        // lookup the container we want the grid to use
        var tradedgriddiv = document.queryselector('#tradedgrid');

        // create the grid passing in the div to use together with the columns & data we want to use
        new aggrid.grid(tradedgriddiv, tradedgridoptions);
    </script>
</body>

</html>

 

这是效果图：

 

持仓框和挂单框可以选择，通知下单框当前选中的那个合约，可以进行相应的平仓、修改委托和撤单操作。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网