{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_modify simpletags %}

{% block extrahead %}{{ block.super }}
    <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
    <script type="text/javascript" src="{% static 'admin/simpleui-x/js/axios.min.js' %}"></script>
    <script type="text/javascript" src="{% static '/echarts.js' %}"></script>

    {{ media }}

{% endblock %}
{% block extrastyle %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>{% endblock %}

<style type="text/css">

</style>

{% block content %}
    <style>
        body, #container {
            background: #FFF;
        }

        .h_i {
            display: flex;
            flex-direction: row;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .h_b {
            width: calc(20% - 10px);
            height: 220px;
            position: relative;
            margin-top: 20px;
            margin-left: 60px;
            align-items: center;
            text-align: center;
            justify-self: center;
        }

        .h_img {
            width: 100%;
            height: 115px;
        }

        .title {
            position: absolute;
            top: 10px;
            left: 80px;
            align-items: center;
            text-align: center;
            justify-self: center;
            font-size: 24px;
            color: white;
        }

        .h_img_e {
            position: absolute;
            top: 30px;
            left: 20px;
            width: 50px;
            height: 50px;
        }

        .value {
            position: absolute;
            top: 50px;
            left: 90px;
            color: white;
            z-index: 100;
            font-size: 28px;
        }

        .chart {
            width: 100%;
            height: 480px;
        }

        .mycanvas{
            {#width: 90%;#}
            border-spacing: inherit;
            {#height: 400px;#}
            align-items: center;
        }

    </style>

    <div id="content-main">
        <h2>| 数据概览</h2>
        <div class="head">
            <el-card>
                <div class="h_i">
                    <div class="h_b">
                        <img src="{% static '/head1.png' %}" class="h_img">
                        <img src="{% static '/site.png' %}" class="h_img_e">
                        <div class="title">站点数量</div>
                        <div class="value">{{ site }}</div>
                    </div>
                    <div class="h_b">
                        <img src="{% static '/head4.png' %}" class="h_img">
                        <img src="{% static '/el_mete.png' %}" class="h_img_e">
                        <div class="title">电表数量</div>
                        <div class="value">{{ eleMeteNum }}</div>
                    </div>
                    <div class="h_b">
                        <img src="{% static '/head2.png' %}" class="h_img">
                        <img src="{% static '/ele-offline.png' %}" class="h_img_e">
                        <div class="title">离线数量</div>
                        <div class="value">{{ offileLine }}</div>
                    </div>
                    <div class="h_b">
                        <img src="{% static '/head3.png' %}" class="h_img">
                        <img src="{% static '/ele-total.png' %}" class="h_img_e">
                        <div class="title">合计电量</div>
                        <div class="value">{{ electricity }}</div>
                    </div>

                </div>
            </el-card>


        </div>

        <h2>| 用电趋势</h2>
        <div class="chart">
            <canvas id="myChart" width="1000" height="400"  class="mycanvas"></canvas>
        </div>
    </div>

    <script type="text/javascript">

        var chartDom = document.getElementById('myChart');
        var myChart = echarts.init(chartDom);
        var months ={{ months|safe }};
        var monthElectricitys ={{ monthElectricity|safe }};
        console.log(months)
        console.log(monthElectricitys)
        var option = {
            title: {
                {#text: '最近六月'#}
            },
            tooltip: {
                trigger: 'axis'
            },

            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                data: months
            },
            yAxis: {
                type: 'value',
                boundaryGap: true,
            },
            series: [
                {
                    data: monthElectricitys,
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'black'
                            }
                        }
                    }
                }
            ],

        };

        option && myChart.setOption(option);
    </script>
{% endblock %}