1

{% extends 'base.html' %}

{% block title %}chart{% endblock title %}
{% block extracss %}
{% load staticfiles %}









{% endblock extracss %}
{% block content %}

环境监控画面

    </div>
</div>
<div class="row-fluid">
    <div class="col-md-12">

        <form action="" method="post" id="myform">
            {% csrf_token %}
            <div class="col-md-5">
                <table class="table ">
                    <tr>
                        <th>检索</th>
                    </tr>
                    <tr>
                        <td>区域</td>
                        <td>
                            <select name="area_id" id="area_id">

                                {% for foo in result_area %}
                                    {% ifequal foo.area_id area_id %}
                                        <option value={{ foo.area_id }} selected>{{ foo.area_id }}号区域</option>
                                    {% else %}
                                        <option value="{{ foo.area_id }}">{{ foo.area_id }}号区域</option>
                                    {% endifequal %}
                                {% endfor %}

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>地块</td>
                        <td>
                            <select name="section_id" id="section_id">
                                {% for my in result_section %}
                                    {% ifequal my.section_id  section %}
                                        <option value={{ my.section_id }} selected>{{ my.section_id }}号地块</option>
                                    {% else %}
                                        <option value="{{ my.section_id }}">{{ my.section_id }}号地块</option>
                                    {% endifequal %}
                                {% endfor %}

                            </select>
                        </td>
                    </tr>
                    <tr>

                        <td>采集器</td>
                        <td>
                            <select name="collector_id" id="collector_id">
                                {% for my in result_collector %}
                                    {% ifequal my.collector_id collector %}
                                        <option value={{ my.collector_id }} selected>{{ my.collector_id }}采集器</option>
                                    {% else %}

                                        <option value="{{ my.collector_id }}">{{ my.collector_id }}采集器</option>
                                    {% endifequal %}
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>种植区域</td>
                        <td>

                        </td>
                    </tr>
                    <tr>

                    </tr>

                </table>
            </div>
            <div class="col-md-3">
                <table class="table">
                    <tr>
                        <th>表示期间</th>
                    </tr>
                    <tr>
                        <td>
                            <select name="time" id="">
                                {% for my in select_time %}
                                    {% ifequal my choose_time %}
                                        <option value={{ choose_time }} selected>{{ choose_time }}内</option>
                                    {% else %}
                                        <option value="{{ my }}">{{ my }}内</option>
                                    {% endifequal %}
                                {% endfor %}
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-md-2">
                <table>
                    <tr>
                        <h4> 图像切换</h4>
                    </tr>
                    <tr>
                        <button class="btn " id="refresh-button" style="background-color: #28a4c9">图像</button>
                    </tr>
                    <tr>
                        <button class="btn " id="btn" style="background-color: #761c19">表格</button>
                        <select name="myselect" id="myselect">
                            <option value="">表格数据查看</option>
                            <option value="土壤湿度">土壤湿度</option>
                            <option value="土壤温度">土壤温度</option>
                            <option value="环境湿度">环境湿度</option>
                            <option value="环境温度">环境温度</option>
                            <option value="C02浓度">C02浓度</option>
                            <option value="PH值">PH值</option>
                        </select>
                    </tr>
                </table>
            </div>
            <div class="col-md-2">
                <table>
                    <tr>
                        <h4>异常值设定</h4>
                    </tr>
                    <tr>
                        <button class="btn " style="background-color: #255625" id="test">ON</button>
                    </tr>
                    <tr>
                        <button class="btn " style="background-color: #003399">OFF</button>
                    </tr>
                </table>
            </div>
        </form>
        <td colspan="2">
            <button type="submit" class="btn btn-default btn-block" id="btn_submit">确定</button>


    </div>
</div>
<div class="row-fluid" id="chart">
    <div class="col-md-12">
        <div id="my_container" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
    </div>
</div>

<div class="row-fluid" id="chart">
    <div class="col-md-12">
        <div id="my_container1" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
    </div>
</div>


<script type="text/javascript">
    //x轴值
    var categories = []
    var data = [];
    var data_x = [];
    var data_y = [];
    //创建图表
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'my_container',
                type: 'spline',
                events: {
                    load: st// 定时器
                }
            },
            title: {
                text: '动物数量统计'
            },
            xAxis: {
                categories: categories,
                title: {
                    text: 'name'
                }

            },
            yAxis: {
                min: 0,
                title: {
                    text: 'number'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function () {
                    return '' + this.series.name + ': ' + this.y + '';
                }
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            series: [{
                name: '个',
                data: data
            }]
        });


    });

    //10秒钟刷新一次数据
    function st() {
        setInterval(getData(), 1000);
    }
    //动态更新图表数据
    function getData() {

        var categories = [];
        $.post("{% url 'ajax_return' %}", $("form").serialize(), function (ret) {
                    for (var i = 0; i < ret.mydtaX.length; i++) {
                        var str = ret.mydtaX[i].toString();
                        var date = new Date(str);
                        var str1 = date.getUTCFullYear() + '年' +
                                (date.getMonth() * 1 + 1) + '月' +
                                date.getUTCDate() + '日' +
                                date.getUTCHours() + '时' +
                                date.getUTCMinutes() + '分' +
                                date.getUTCSeconds() + '秒';
                        data_x.push(str1);
                    }
                    for (var i = 0; i < ret.mydataY.length; i++) {
                        data_y.push(ret.mydataY[i])
                    }

                    categories = data_x;
                    data = data_y;
                    chart.series[0].setData(data);
                    chart.xAxis[0].setCategories(categories);
                    alert('ok');
                }
                ,
                "json"
        )
    }
</script>

{% endblock content %}