{% extends "admin/base_site.html" %}
{% load static %}
{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-datetimepicker.css' %}">
<script src="{% static 'js/jquery-2.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'js/echarts.min.js' %}"></script>
{% endblock %}
{% block content %}
<style>
    .lst{
        padding-left: 0;
        list-style: none;
    }
</style>
<div>
    <label><h2>统计图表</h2></label>
    </br>
    <form action="." method="POST" id="chartform" onsubmit="return check_form()">
        {% csrf_token %}
        <table class="table" table-layout="fixed" width="90%">
            <tbody>
            <tr>
                <td width="320px">
                    <span class="dropdown" id="topic">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" id="topicbtn">
                            {% if topicname %}
                                {{ topicname }}
                            {% else %}
                                主题选择
                            {% endif %}
                        </button>
                        <ul class="dropdown-menu">
                            <li class="lst"><a href="#" onclick="change_topic(this)">采集统计</a></li>
                            <li class="lst"><a href="#" onclick="change_topic(this)">报警统计</a></li>
                            <li class="lst"><a href="#" onclick="change_topic(this)">综合统计</a></li>
                        </ul>
                    </span>
                    <input type="hidden" name="topicval" id="topicval" value="{{ topicname }}">
                    <span style="padding-left:10px"></span>
                    <span class="dropdown hidden" id="tp">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" id="tpbtn">
                            {% if tpname %}
                                {{ tpname }}
                            {% else %}
                                采集数据
                            {% endif %}
                        </button>
                        <ul class="dropdown-menu">
                            <li class="lst"><a href="#" onclick="change_tp(this)">温度数据</a></li>
                            <li class="lst"><a href="#" onclick="change_tp(this)">湿度数据</a></li>
                            <li class="lst"><a href="#" onclick="change_tp(this)">火情数据</a></li>
                            <li class="lst"><a href="#" onclick="change_tp(this)">漏水数据</a></li>
                            <li class="lst"><a href="#" onclick="change_tp(this)">断电数据</a></li>
                        </ul>
                    </span>
                    <input type="hidden" name="tpval" id="tpval" value="{{ tpname }}">
                    <span class="dropdown hidden" id="spot">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" id="spotbtn">
                            {% if spot %}
                                {{ spot }}
                            {% else %}
                                选择地点
                            {% endif %}
                        </button>
                        <ul class="dropdown-menu">
                            {% for spt in spots %}
                            <li class="lst"><a href="#" onclick="change_spot(this)">{{ spt }}</a></li>
                            {% endfor %}
                        </ul>
                    </span>
                    <input type="hidden" name="spotval" id="spotval" value="{{ spot }}">
                </td>
                <td width="180px">
                    <input type="text" class="form-control" name="startdate" placeholder="起始时间" id="startdate" value="{{ startdate }}" readonly>
                </td>
                <td width="180px">
                    <input type="text" class="form-control" name="enddate" placeholder="结束时间" id="enddate" value="{{ enddate }}" readonly>
                </td>
                <td>
                    <input type="submit" value="确定" class="btn-primary">
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
<script src="{% static 'js/chartpage.js' %}"></script>
<div id="mainchart" style="width: 800px;height:600px;"></div>
    <script src="{% static 'js/alarmchart.js' %}"></script>
    <script src="{% static 'js/envchart.js' %}"></script>
    <script src="{% static 'js/comprechart.js' %}"></script>
    <script type="text/javascript">
        {% ifequal topicname '报警统计' %}
            alarmchart('{{ startdate }}','{{ enddate }}',{{ statics_data|safe }});
        {% endifequal %}
        {% ifequal topicname '采集统计' %}
            tpdict = {'温度数据':'temperature', '湿度数据':'humidity', '火情数据':'fire', '漏水数据':'water', '断电数据':'electricity'};
            envchart('{{ tpname }}',tpdict['{{ tpname }}'],{{ statics_data|safe }});
        {% endifequal %}
        {% ifequal topicname '综合统计' %}
            comprechart({{ spots|safe }},{{ statics_data|safe }});
        {% endifequal %}
    </script>
{% endblock %}