{% extends "base.html" %}
{% block title %}{% endblock %}
{% block body %}

    {{ super() }}
    {% block switch %}
    {% endblock %}
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>





<script type="text/javascript" >
    //监听加载状态改变
    /*
    document.onreadystatechange = completeLoading;

    //加载状态为complete时移除loading效果

    function completeLoading() {
        if (document.readyState == "complete") {
            var loadingMask = document.getElementById('loadingDiv');
            loadingMask.parentNode.removeChild(loadingMask);
            var  otherDiv=document.getElementById('image1');
    //显示
            otherDiv.style.display="block";
            chartData[0].render()
        }
    }

     */



    user='{{ user|tojson }}'
    userid = eval('(' + user + ')')
    password='{{ password|tojson }}'
    passwordid = eval('(' + password + ')')
    mode='{{ mode|tojson }}'
    modeid = eval('(' + mode + ')')
    pagetab='{{ pagetab|tojson }}'
    pagenumber='{{ pagenumber|tojson }}'
    tradingDay='{{ tradingDay|tojson }}'
    tradingDayid = eval('(' + tradingDay + ')')
    token='{{ token|tojson }}'
    tokenid = eval('(' + token + ')')
    var charts = [];
    var t1






</script>
<script>
    var Name_stg='{{ stg_first }}'
    var Name_inst='{{ instid_first }}'
    //var Name_stgid='{{ stg_first|tojson }}'
    //var Name_instid='{{ instid_first|tojson }}'
    freq={{ freq }}
    //freqid='{{ freq|tojson }}'
    //console.log(freq)
    //console.log(Name_stg)
    //console.log(Name_inst)
    var chartData = [];
    var intervaltime=[1000,5000]
    legendsize=[15,12,9,6,3]
    //chart_list=['chart0','chart1','chart2','chart3','chart4','chart5'];
    var datapoint_all = {};
    var datapoint_openlong_all ={};
    var datapoint_closelong_all = {};
    var datapoint_openshort_all = {};
    var datapoint_closeshort_all ={};
    starttime = '{{ starttime|tojson }}';
    //console.log(starttime)
    pagetab='{{ pagetab|tojson }}'
    pagenumber='{{ pagenumber|tojson }}'
    status_json = '{{ status|tojson }}';
    button_json = '{{ button|tojson }}';
    flag='{{ flag|tojson }}'



    //console.log(data)
    allCaseMessage = '{{ data|tojson }}';
    var testData = eval('(' + allCaseMessage + ')')
    var testData_old = eval('(' + allCaseMessage + ')')
    allCaseMessage1 = '{{ title|tojson }}';
    var title = eval('(' + allCaseMessage1 + ')')
    allCaseMessage2='{{ image_tabname|tojson }}'
    var image_tabname=eval('(' + allCaseMessage2 + ')')
    var timerRunning = false;
    //length_tab=1/title.length
    //console.log(111)
    //console.log(testData)

    $(document).ready(function () {

        charts[0] = new CanvasJS.Chart("chartContainer",
                    {
                        title: {
                            text: title
                        },
                        axisY: {
                            title: "Price",
                            prefix: "¥",
                              stripLines: [{
                                  showOnTop: true,
                                  lineDashType: "dash",
                                  color: "#ff4949",
                                  labelFontColor: "#ff4949",
                                  labelFontSize: 14
                                }]
                          },
                        data: [
                            {
                                type: "line",
                                showInLegend: true,
                                markerSize: 1,
                                legendText: "价格",
                                lineColor:"blue",
                                lineThickness: 3,   //**Try various lineThickness values **//
                                dataPoints: dataPoints1
                            },
                            {
                                type: "scatter",
                                legendText: "开多",
                                showInLegend: true,
                                markerSize:15,
                                markerColor: 'red',


                                markerType: "circle",  //"circle", "square", "cross", "none"
                                dataPoints: datapoint_openlong
                            },

                            {
                                type: "scatter",
                                markerSize: 15,
                                showInLegend: true,
                                legendText: "平多",
                                markerColor: 'red',
                                markerType: "cross",  //"circle", "square", "cross", "none"
                                dataPoints: datapoint_closelong
                            },
                            {
                                type: "scatter",
                                legendText: "开空",
                                showInLegend: true,
                                markerSize: 15,
                                markerColor: 'green',


                                markerType: "circle",  //"circle", "square", "cross", "none"
                                dataPoints: datapoint_openshort
                            },
                            {
                                type: "scatter",
                                markerSize: 15,
                                showInLegend: true,
                                legendText: "平空",
                                markerColor: 'green',
                                markerType: "cross",  //"circle", "square", "cross", "none"
                                dataPoints: datapoint_closeshort
                            }


                        ]
                    });
        charts[1]=new CanvasJS.Chart("chartContainer_volume",
                {
                  height: 100,
                  toolTip: {
                    shared: true
                  },
                  axisX: {
                    crosshair: {
                      enabled: true,
                      snapToDataPoint: true
                    }
                  },
                  axisY: {

                    title: "volume"

                  },
                  legend: {
                    horizontalAlign: "left"
                  },
                  data: [{
                    yValueFormatString: "#,###.##",
                    //axisYType: "secondary",
                    name: "volume",
                    dataPoints : dataPoints2
                  }]}
                )
        syncTooltip(charts);
        function syncTooltip(charts) {

            if(!this.onToolTipUpdated){
              this.onToolTipUpdated = function(e) {
                for (var j = 0; j < charts.length; j++) {
                  if (charts[j] != e.chart)
                    charts[j].toolTip.showAtX(e.entries[0].xValue);
                }
              }
            }

            if(!this.onToolTipHidden){
              this.onToolTipHidden = function(e) {
                for( var j = 0; j < charts.length; j++){
                  if(charts[j] != e.chart)
                    charts[j].toolTip.hide();
                }
              }
            }

            for(var i = 0; i < charts.length; i++) {
                if(!charts[i].options.toolTip)
                  charts[i].options.toolTip = {};

                charts[i].options.toolTip.updated = this.onToolTipUpdated;
                charts[i].options.toolTip.hidden = this.onToolTipHidden;
            }
          }
        stockChart_bar = new CanvasJS.StockChart("chartContainer_bar",{
            exportEnabled: true,
            theme: "light2",
            title:{
              text:title
            },
            charts: [{
              toolTip: {
                shared: true
              },
              axisX: {
                lineThickness: 5,
                tickLength: 0,
                labelFormatter: function(e) {
                  return "";
                },
                crosshair: {
                  enabled: true,
                  snapToDataPoint: true,
                  labelFormatter: function(e) {
                    return ""
                  }
                }
              },
              axisY: {
                title: "Price",
                prefix: "¥"
              },
              legend: {
                verticalAlign: "top",
                horizontalAlign: "left"
              },
              data: [{
                name: "Price",
                yValueFormatString: "¥#,###.##",
                //axisYType: "secondary",
                type: "candlestick",
                risingColor: "red",
                fallingColor: "green",
                dataPoints : dataPoints1
              },{
                type: "scatter",
                legendText: "开多",
                showInLegend: true,
                markerSize:10,
                markerColor: 'orange',
                markerType: "circle",  //"circle", "square", "cross", "none"
                dataPoints: datapoint_openlong},

                {
                    type: "scatter",
                    markerSize: 10,
                    showInLegend: true,
                    legendText: "平多",
                    markerColor: 'orange',
                    markerType: "cross",  //"circle", "square", "cross", "none"
                    dataPoints: datapoint_closelong
                },
                {
                    type: "scatter",
                    legendText: "开空",
                    showInLegend: true,
                    markerSize:10,
                    markerColor: 'blue',


                    markerType: "circle",  //"circle", "square", "cross", "none"
                    dataPoints: datapoint_openshort
                },
                {
                    type: "scatter",
                    markerSize: 10,
                    showInLegend: true,
                    legendText: "平空",
                    markerColor: 'blue',
                    markerType: "cross",  //"circle", "square", "cross", "none"
                    dataPoints: datapoint_closeshort
                }]
            },{
              height: 100,
              toolTip: {
                shared: true
              },
              axisX: {
                crosshair: {
                  enabled: true,
                  snapToDataPoint: true
                }
              },
              axisY: {

                title: "volume"
              },
              legend: {
                horizontalAlign: "left"
              },
              data: [{
                yValueFormatString: "#,###.##",
                axisYType: "secondary",
                name: "volume",
                dataPoints : dataPoints2
              }]
            }],
            navigator: {
              data: [{
                color: "grey",
                dataPoints: dataPoints3
              }],
              slider: {
                minimum: new Date(2018, 0o1, 0o1),
                maximum: new Date(2018, 0o1, 0o1)
              }
            }
          });
        //console.log(testData)
        if(freq==0){
            console.log(3)
            var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
            var datapoint_openlong = [];
            var datapoint_closelong = [];
            var datapoint_openshort = [];
            var datapoint_closeshort = [];

            for(var i = 0; i < testData.length; i++){
              dataPoints1.push({label: testData[i].date, y: Number(testData[i].current)});
              dataPoints2.push({label: testData[i].date, y: Number(testData[i].volume)});
              dataPoints3.push({label: testData[i].date, y: Number(testData[i].current)});
              datapoint_openlong.push({label: testData[i].date, y: testData[i].openlong})
              datapoint_closelong.push({label: testData[i].date, y: testData[i].closelong})
              datapoint_openshort.push({label: testData[i].date, y: testData[i].openshort})
              datapoint_closeshort.push({label: testData[i].date, y: testData[i].closeshort})
            }
            //console.log(dataPoints1)

            charts[0].render();
            charts[1].render()
            //console.log(stockChart)
            $("#chartContainer").show()
            $("#chartContainer_volume").show()
            $("#chartContainer_bar").hide()
        }
        else{
            var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
            var datapoint_openlong = [];
            var datapoint_closelong = [];
            var datapoint_openshort = [];
            var datapoint_closeshort = [];

            for(var i = 0; i < testData.length; i++){
              dataPoints1.push({label: testData[i].date, y: [Number(testData[i].open), Number(testData[i].high), Number(testData[i].low), Number(testData[i].close)], color: testData[i].open > testData[i].close ? "green" : "red"});;
              dataPoints2.push({label: testData[i].date, y: Number(testData[i].volume), color: testData[i].open > testData[i].close ? "green" : "red"});
              dataPoints3.push({label: testData[i].date, y: Number(testData[i].close)});
              datapoint_openlong.push({label: testData[i].date, y: testData[i].openlong})
              datapoint_closelong.push({label: testData[i].date, y: testData[i].closelong})
              datapoint_openshort.push({label: testData[i].date, y: testData[i].openshort})
              datapoint_closeshort.push({label: testData[i].date, y: testData[i].closeshort})
            }

            stockChart_bar.render();
            $("#chartContainer").hide()
            $("#chartContainer_volume").hide()
            $("#chartContainer_bar").show()
        }
        //console.log(testData)




        $('body').everyTime('2s',function(){
				run();
			},0,true);


    })
</script>
<style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }

  #loadingDiv{

    text-align: center;



  }



  </style>
<style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }



  </style>
    <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }

  #tablecontext .headtable ul li{
    display: inline-block;
    width: 16.33%;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    background-color: #333;
    text-align: center;
    color: #fff;
  }
  #tablecontext .headtable ul li.current{
    background-color: green;
  }
  #tablecontext .bodytable{
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  #tablecontext .bodytable ul li{
    display: none;
  }
  #tablecontext .bodytable ul li.current{
    display: block;
  }

  #tablecontext .cd div{
    display: none;
  }
  #tablecontext .cd div.current{
    display: block;
  }

  </style>
<script type="text/javascript">





         function run(){
             if(!timerRunning){
                 timerRunning = true;
                 console.log('run')
                 $.ajax({
                 type: "POST",
                 dataType: "json",
                 async: false,
                 url: "/image_dynamic_all",//后端请求url地址
                 data: {'user':user,'starttime':starttime,'password':password,'mode':mode,'pagenumber':pagenumber,'pagetab':pagetab,'status':status_json,'button':button_json,'flag':flag,'name_inst':Name_inst,'name_stg':Name_stg,'freq':freq,'token':token},//后端请求参数
                 success:function (result) {
                         //console.log(testData_old)
                         //console.log(title)
                         status_title=result.status_title
						 timerRunning = false;
						 return;

                         document.getElementById('status_title').innerHTML=status_title
                         //console.log(1)
                         //console.log(status_title)
                         balance=result.balance
                         document.getElementById('balance').innerHTML=balance

                         status_json=JSON.stringify(result.status)
                         button_json=JSON.stringify(result.button)
                         flag=JSON.stringify(result.flag)
                         trade=result.tables_trade
                         //console.log(trade)
                         document.getElementById("trade").innerHTML=trade;
                         order=result.tables_order
                         document.getElementById("order").innerHTML=order;
                         position=result.tables_position
                         document.getElementById("position").innerHTML=position;
                         account=result.tables_account
                         document.getElementById("account").innerHTML=account;

                         log=result.tables_log
                         document.getElementById("log").innerHTML=log;

                         //console.log(12)
                         starttime=JSON.stringify(result.starttime)
                         //console.log(starttime)

                         user=JSON.stringify(result.user)
                         //title=result.title
                         //console.log(1)




                         //testData=testData.concat(adddata)

                        //console.log(sd)

                         //console.log(kkk)
                        if(freq==0){
                            //console.log(stockChart)
                            adddata = result.data
                            //console.log(adddata)
                            testData=testData_old.concat(adddata)
                            testData_old=testData
                            //console.log(testData_old)
                            var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
                            var datapoint_openlong = [];
                            var datapoint_closelong = [];
                            var datapoint_openshort = [];
                            var datapoint_closeshort = []
                            for(var i = 0; i < testData.length; i++){
                              dataPoints1.push({label: testData[i].date, y: Number(testData[i].current)});;
                              dataPoints2.push({label: testData[i].date, y: Number(testData[i].volume)});
                              dataPoints3.push({label: testData[i].date, y: Number(testData[i].current)});
                              datapoint_openlong.push({label: testData[i].date, y: testData[i].openlong})
                              datapoint_closelong.push({label: testData[i].date, y: testData[i].closelong})
                              datapoint_openshort.push({label: testData[i].date, y: testData[i].openshort})
                              datapoint_closeshort.push({label: testData[i].date, y: testData[i].closeshort})
                            }
                            if (dataPoints1.length<5000){
                                legendsize_index=15
                                linesize_index=3
                            }
                            else if(5000<dataPoints1.length<10000){
                                legendsize_index=12
                                linesize_index=2.3
                            }
                            else if(10000<dataPoints1.length<15000){
                                legendsize_index=10
                                linesize_index=1.7
                            }
                            else if(15000<dataPoints1.length<20000){
                                legendsize_index=8
                                linesize_index=1
                            }
                            else if(20000<dataPoints1.length<25000){
                                legendsize_index=6
                                linesize_index=1
                            }
                            else if(25000<dataPoints1.length<30000){
                                legendsize_index=5
                                linesize_index=1
                            }
                            else if(30000<dataPoints1.length){
                                legendsize_index=3
                                linesize_index=0.5
                            }
                            charts[0].options.data[0].dataPoints=dataPoints1
                            charts[1].options.data[0].dataPoints=dataPoints2
                            //charts[0].options.navigator.data[0].dataPoints=dataPoints3
                            charts[0].options.data[1].dataPoints=datapoint_openlong
                            charts[0].options.data[2].dataPoints=datapoint_closelong
                            charts[0].options.data[3].dataPoints=datapoint_openshort
                            charts[0].options.data[4].dataPoints=datapoint_closeshort
                            charts[0].options.data[0].lineThickness=linesize_index
                            charts[0].options.data[1].markerSize=legendsize_index
                            charts[0].options.data[2].markerSize=legendsize_index
                            charts[0].options.data[3].markerSize=legendsize_index
                            charts[0].options.data[4].markerSize=legendsize_index


                            //console.log(dataPoints1.length)
                            //console.log(dataPoints1[dataPoints1.length-1].y)
                            charts[0].options.axisY.stripLines[0].value=dataPoints1[dataPoints1.length-1].y
                            //console.log(charts[0].options.axisY.stripLines[0]["value"])
                            charts[0].options.axisY.stripLines[0].label = charts[0].options.axisY.stripLines[0]["value"];
                            //console.log(charts[0])
                            charts[0].render()
                            charts[1].render()
                        }
                        else{
                            var testData = result.data
                            //console.log(testData)
                            var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
                            var datapoint_openlong = [];
                            var datapoint_closelong = [];
                            var datapoint_openshort = [];
                            var datapoint_closeshort = []
                            for(var i = 0; i < testData.length; i++){
                              dataPoints1.push({label: testData[i].date, y: [Number(testData[i].open), Number(testData[i].high), Number(testData[i].low), Number(testData[i].close)], color: testData[i].open > testData[i].close ? "green" : "red"});;
                              dataPoints2.push({label: testData[i].date, y: Number(testData[i].volume), color: testData[i].open > testData[i].close ? "green" : "red"});
                              dataPoints3.push({label: testData[i].date, y: Number(testData[i].close)});
                              datapoint_openlong.push({label: testData[i].date, y: testData[i].openlong})
                              datapoint_closelong.push({label: testData[i].date, y: testData[i].closelong})
                              datapoint_openshort.push({label: testData[i].date, y: testData[i].openshort})
                              datapoint_closeshort.push({label: testData[i].date, y: testData[i].closeshort})
                            }
                            //console.log(datapoint_openlong)
                            //console.log(datapoint_closelong)
                            stockChart_bar.options.charts[0].data[0].dataPoints=dataPoints1
                            stockChart_bar.options.charts[1].data[0].dataPoints=dataPoints2
                            stockChart_bar.options.navigator.data[0].dataPoints=dataPoints3
                            stockChart_bar.options.charts[0].data[1].dataPoints=datapoint_openlong
                            stockChart_bar.options.charts[0].data[2].dataPoints=datapoint_closelong
                            stockChart_bar.options.charts[0].data[3].dataPoints=datapoint_openshort
                            stockChart_bar.options.charts[0].data[4].dataPoints=datapoint_closeshort
                            //console.log(stockChart_bar)
                            stockChart_bar.render()
                        }
                        timerRunning = false;
                         






                    }

                 ,
                 error: function(XMLHttpRequest, textStatus, errorThrown){
                     timerRunning = false;
                     console.log('error')
				 }






             })
             }

     }






</script>

<div class="container">
	<div class="row clearfix">
        <div class="col-md-3 column">
			<div class="page-header">
				<h1>
					SUMMARY
				</h1>
			</div>
			<ul style="font-size: 1.8rem">
				<li>
					👤 <span>{{ user }}</span>
				</li>
				<li>
					💡 <span>{{mode_title}}</span>
				</li>
				<li>
					💰 <span id="balance">{{ balance }}</span>
				</li>
				<li>
					📌 <span id="status_title">{{status_title}} </span>
				</li>
			</ul>

             <button type="button" class="btn btn-info btn-lg" id="stopall" onclick="stopall(this)">停止程序</button>

		</div>

		<div class="col-md-9 column">
            <div >
                <form>
                    <label>策略:</label>
                    <select name="stg_selection" id="stg_selection"
                            onchange="changestg('stg_selection',inst_selection)">
                        {% for stg_name in stg_name_list %}
                            <option value="{{ stg_name }}"> {{ stg_name }} </option>
                        {% endfor %}
                    </select>
                </form>
            </div>

            <div class="am-u-lg-3 am-u-md-3 am-u-sm-3 am-u-sm-offset-3">
    <form class="am-form">
        <label for="zhekou"> 合约:</label>
        <select name="inst_selection" id="inst_selection" onchange="changeinst('inst_selection')">
             <option> 选择合约 </option>
        </select>
        <br>
    </form>
</div>

            <div id="chartContainer" style="height: 300px; width: 100%;"></div>
            <div id="chartContainer_volume" style="height: 200px; width: 100%;"></div>
            <div id="chartContainer_bar" style="height: 500px; width: 100%;"></div>



        </div>

        <div class="col-md-12 column">
            <div id="tablecontext">
            <div class="headtable">
              <ul>
                <li class="current">成交</li>
                <li>委托</li>
                <li>持仓</li>
                  <li>权益</li>
                  <li>日志</li>
              </ul>
            </div>
            <div class="bodytable">
              <ul>

                <li class="current" id="trade"><table class="table">
              <tr >

             </tr>
            </table>

                </li>

                <li id="order"><table class="table" >
              <tr>

             </tr>
            </table></li>
                <li id="position"><table class="table" >
              <tr>

             </tr>
            </table></li>
              <li id="account"><table class="table">
              <tr>

             </tr>
            </table></li>

                  <li id="log"><table class="table">

            </table></li>
              </ul>

            </div>
            <div class="cd">
                <div class="current"><ul class="pagination" id="page_trade">

                        <script>
                        pagenumber='{{ pagenumber|tojson }}'
                        pagenumber_list1='{{ pagenumberlist|tojson }}'
                        pagenumber_list = eval('(' + pagenumber_list1 + ')')
                        var td1="<li><a >&laquo;</a></li>";
                        var td10="<li><a >&raquo;</a></li>";
                        var tb=$('#page_trade')
                        tb.append(td1)

                            for (var i=0;i<pagenumber_list.length;i++){

                                var td="<li><a id='trade' onclick='page_click(this)'>"+Number(pagenumber_list[i])+"</a></li>";
                                tb.append(td)

                            }
                        tb.append(td10)



                        </script>


                </ul></div>
                <div><ul class="pagination" id="page_order">

                        <script>


                        pagenumber_order='{{ pagenumber_order|tojson }}'
                        pagenumber_list1_order='{{ pagenumberlist_order|tojson }}'
                        pagenumber_list_order = eval('(' + pagenumber_list1_order + ')')
                        var td1="<li><a >&laquo;</a></li>";
                        var td10="<li><a >&raquo;</a></li>";
                        var tb=$('#page_order')
                        tb.append(td1)

                            for (var i=0;i<pagenumber_list_order.length;i++){

                                var td="<li><a id='order'  onclick='page_click(this)'>"+Number(pagenumber_list_order[i])+"</a></li>";
                                tb.append(td)

                            }
                        tb.append(td10)



                        </script>


                </ul></div>

                <div></div>
                <div></div>
                <div></div>
                <div><ul class="pagination" id="page_log">

                        <script>


                        pagenumber_log='{{ pagenumber_log|tojson }}'
                        pagenumber_list1_log='{{ pagenumberlist_log|tojson }}'
                        pagenumber_list_log = eval('(' + pagenumber_list1_log + ')')
                        var td1="<li><a >&laquo;</a></li>";
                        var td10="<li><a >&raquo;</a></li>";
                        var tb=$('#page_log')
                        tb.append(td1)

                            for (var i=0;i<pagenumber_list_log.length;i++){

                                var td="<li><a id='log'  onclick='page_click(this)'>"+Number(pagenumber_list_log[i])+"</a></li>";
                                tb.append(td)

                            }
                        tb.append(td10)



                        </script>


                </ul></div>



            </div>
          </div>
        </div>

    </div>
</div>
<script>
    function changestg(choose, id) {
        var select = document.getElementById(choose);
        $(id).html(""); //每次重新选择当前列表框，就清空下一级列表框。
        for (i = 0; i < select.length; i++) {
            if (select[i].selected) { //判断被选中项
                Name_stg = select[i].text;
                //console.log(Name)
                $.ajax({ //发起ajax请求
                    url: '/changeselectfield',
                    type: "POST",
                    dataType: "JSON",
                    data: {'name':Name_stg,'user':userid,'mode':modeid},
                    success: function (data) {

                        if (data) {
                            $("<option selected='selected' disabled='disabled'  style='display: none' value=''></option> ").appendTo(id);
                            for (i = 0; i < data.length; i++) {
                                $("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(id);
                            }
                        } else {
                            alert('error')
                        }
                    }
                });
            }
        }
    }
    function changeinst(choose) {
        var select = document.getElementById(choose);
        for (i = 0; i < select.length; i++) {
            if (select[i].selected) { //判断被选中项
                Name_inst = select[i].text;
                console.log(modeid)
                $.ajax({ //发起ajax请求
                    url: '/changeinst',
                    type: "POST",
                    dataType: "JSON",
                    data: {'name_inst':Name_inst,'name_stg':Name_stg,'user':userid,'tradingDay':tradingDayid,'freq':freq,'mode':modeid,'token':token},
                    success: function (data) {

                        if (data) {
                            freq=data.freq
                            //console.log(freq)
                            if(freq==0){
                                $("#chartContainer").show()
                                $("#chartContainer_volume").show()
                                $("#chartContainer_bar").hide()
                                testData_old=data.testData1
                                testData=data.testData1
                                //console.log(testData.length)
                                title=data.title
                                starttime=data.starttime
                                //console.log(title)
                                charts[0].options.title.text=title
                                var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
                                var datapoint_openlong = [];
                                var datapoint_closelong = [];
                                var datapoint_openshort = [];
                                var datapoint_closeshort = []
                                for(var i = 0; i < testData.length; i++){
                                  dataPoints1.push({label: testData[i].date, y: Number(testData[i].current)});;
                                  dataPoints2.push({label: testData[i].date, y: Number(testData[i].volume)});
                                  dataPoints3.push({label: testData[i].date, y: Number(testData[i].current)})
                                  datapoint_openlong.push({label: testData[i].date, y: testData[i].openlong})
                                  datapoint_closelong.push({label: testData[i].date, y: testData[i].closelong})
                                  datapoint_openshort.push({label: testData[i].date, y: testData[i].openshort})
                                  datapoint_closeshort.push({label: testData[i].date, y: testData[i].closeshort});

                                }
                                //console.log(dataPoints1)
                                //console.log(charts[0])
                                charts[0].options.data[0].dataPoints=dataPoints1
                                charts[1].options.data[0].dataPoints=dataPoints2
                                //charts[0].options.navigator.data[0].dataPoints=dataPoints3
                                charts[0].options.data[1].dataPoints=datapoint_openlong
                                charts[0].options.data[2].dataPoints=datapoint_closelong
                                charts[0].options.data[3].dataPoints=datapoint_openshort
                                charts[0].options.data[4].dataPoints=datapoint_closeshort
                                charts[0].options.axisY.stripLines[0].value=dataPoints1[dataPoints1.length-1].y
                                charts[0].options.axisY.stripLines[0].label = charts[0].options.axisY.stripLines[0]["value"];
                                //console.log(charts[0])
                                charts[0].render()
                                charts[1].render()
                            }
                            else{
                                $("#chartContainer").hide()
                                $("#chartContainer_volume").hide()
                                $("#chartContainer_bar").show()
                                testData=data.testData1
                                //console.log(testData.length)
                                title=data.title
                                //console.log(title)
                                stockChart_bar.options.title.text=title
                                var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
                                var datapoint_openlong = [];
                                var datapoint_closelong = [];
                                var datapoint_openshort = [];
                                var datapoint_closeshort = []
                                for(var i = 0; i < testData.length; i++){
                                  dataPoints1.push({label: testData[i].date, y: [Number(testData[i].open), Number(testData[i].high), Number(testData[i].low), Number(testData[i].close)], color: testData[i].open > testData[i].close ? "green" : "red"});;
                                  dataPoints2.push({label: testData[i].date, y: Number(testData[i].volume), color: testData[i].open > testData[i].close ? "green" : "red"});
                                  dataPoints3.push({label: testData[i].date, y: Number(testData[i].close)})
                                  datapoint_openlong.push({label: testData[i].date, y: testData[i].openlong})
                                  datapoint_closelong.push({label: testData[i].date, y: testData[i].closelong})
                                  datapoint_openshort.push({label: testData[i].date, y: testData[i].openshort})
                                  datapoint_closeshort.push({label: testData[i].date, y: testData[i].closeshort});

                                }
                                //console.log(dataPoints1)
                                //console.log(stockChart_bar)
                                stockChart_bar.options.charts[0].data[0].dataPoints=dataPoints1
                                stockChart_bar.options.charts[1].data[0].dataPoints=dataPoints2
                                stockChart_bar.options.navigator.data[0].dataPoints=dataPoints3
                                stockChart_bar.options.charts[0].data[1].dataPoints=datapoint_openlong
                                stockChart_bar.options.charts[0].data[2].dataPoints=datapoint_closelong
                                stockChart_bar.options.charts[0].data[3].dataPoints=datapoint_openshort
                                stockChart_bar.options.charts[0].data[4].dataPoints=datapoint_closeshort
                                //console.log(stockChart_bar)
                                stockChart_bar.render()
                            }


                            }
                        else {
                            alert('error')
                        }
                    }
                });
            }
        }
    }
    function page_click(item){
                            {
                               $.ajax(
                              {
                                 type: "POST",
                                 url: "/tablepage_docker",
                                 dataType: "JSON",
                                 data:{'user':user,'password':password,'mode':mode,'pagenumber':item.innerHTML,'pagetab':item.id},
                                 success: function(result)
                                 {
                                     user=JSON.stringify(result.user)
                                     password=JSON.stringify(result.password)
                                     mode=JSON.stringify(result.mode)
                                     //console.log(user)
                                     //console.log(password)
                                     //console.log(mode)
                                     trade=result.tables_trade
                                     pagenumber=JSON.stringify(result.pagenumber)
                                     pagetab=JSON.stringify(result.pagetab)

                                     document.getElementById("trade").innerHTML=trade;
                                     order=result.tables_order
                                     document.getElementById("order").innerHTML=order;
                                     position=result.tables_position
                                     document.getElementById("position").innerHTML=position;
                                     account=result.tables_account
                                     document.getElementById("account").innerHTML=account;
                                     strategy=result.tables_strategy
                                     document.getElementById("strategy").innerHTML=strategy;
                                     log=result.tables_log
                                     document.getElementById("log").innerHTML=log;
                                 },
                              });
                           }
                        }
</script>
<script type="text/javascript" >
            function stopall(aa)
                                       {
                                           $.ajax(
                                          {
                                             type: "POST",
                                             url: "/monitor_stopall",
                                             dataType: "TEXT",
                                             data:{'status':status_json,'user':user,'mode':mode},
                                             success: function(msg)
                                             {
                                                 //console.log(msg);
                                             },
                                          });
                                       }

        </script>
<script type="text/javascript">
function stop(aa) {
                                       $.ajax(
                                      {
                                         type: "POST",
                                         url: "/monitor_clickpost",
                                         dataType: "TEXT",
                                         data:{'stop_signal':aa.id,'user':user,'status':aa.innerHTML,'mode':mode},
                                         success: function(msg)
                                         {
                                             console.log(msg);
                                         },
                                      });
                                   }
function empty(aa) {
                       $.ajax(
                      {
                         type: "POST",
                         url: "/monitor_empty",
                         dataType: "TEXT",
                         data:{'empty_signal':aa.id,'user':user,'mode':mode},
                         success: function(msg)
                         {
                             console.log(msg);
                         },
                      });
                   }
  //console.log(document.getElementsByClassName("hd"))

  //console.log(document.getElementsByClassName("bd"))

  </script>
  <script type="text/javascript">
  var headtable = document.getElementsByClassName("headtable")[0].getElementsByTagName("li");
  var bodytable = document.getElementsByClassName("bodytable")[0].getElementsByTagName("li");
  var cd = document.getElementsByClassName("cd")[0].getElementsByTagName("div");
  //console.log(headtable)
  //console.log(bodytable)
  //console.log(111111)
  //console.log(cd)
  for (var i = 0; i < headtable.length; i++) {
    headtable[i].onclick = function(){
      doTabs_table(this);
    }
  }
  function doTabs_table(obj){
    for (var i = 0; i < headtable.length; i++) {
      if(headtable[i]==obj){
        headtable[i].className = "current";
        //console.log(bodytable[i])
        bodytable[i].className = "current";
        //console.log(obj)
        //console.log(cd)

        cd[i].className = "current";






      }else{
        headtable[i].className = "";
        bodytable[i].className = "";
        cd[i].className = "";
      }
    }
  }
  </script>

    <script>

</script>
{% endblock %}




