{% extends "./base.html" %}
{% block pagehead %}
<h1>
  本月数据
  <small>Month Data</small>
</h1>
<ol class="breadcrumb">
  <li class="active"><a href="{% url 'groups_index' %}"><i class="fa fa-dashboard"></i> 主页</a></li>
</ol>
{% endblock %}
{% block content %}
<!-- Info boxes -->
<div class="row">
  <div class="col-lg-2 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-yellow">
      <div class="inner">
        <h3>{{troublenum}}</h3>

        <p>事故隐患</p>
      </div>
      <div class="icon">
        <i class="fa fa-camera"></i>
      </div>
      <a href="{% url 'groups_trouble' %}" class="small-box-footer">更多分析 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
  <div class="col-lg-2 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-green">
      <div class="inner">
        <h3>{{observenum}}
          <!-- <sup style="font-size: 20px">%</sup> -->
        </h3>

        <p>行为观察</p>
      </div>
      <div class="icon">
        <i class="fa fa-eye"></i>
      </div>
      <a href="#" class="small-box-footer">更多分析 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
  <div class="col-lg-2 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-red">
      <div class="inner">
        <h3>{{missnum}}</h3>

        <p>未遂事件</p>
      </div>
      <div class="icon">
        <i class="fa fa-life-ring"></i>
      </div>
      <a href="#" class="small-box-footer">更多分析 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
  <div class="col-lg-2 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-aqua">
      <div class="inner">
        <h3>{{trainnum}}</h3>

        <p>教育培训</p>
      </div>
      <div class="icon">
        <i class="fa fa-graduation-cap"></i>
      </div>
      <a href="#" class="small-box-footer">更多分析 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <!-- ./col -->
  <div class="col-lg-2 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-teal">
      <div class="inner">
        <h3>{{companynum}}</h3>

        <p>下属公司数</p>
      </div>
      <div class="icon">
        <i class="fa fa-industry"></i>
      </div>
      <a href="#" class="small-box-footer">更多分析 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
  <div class="col-lg-2 col-xs-6">
    <!-- small box -->
    <div class="small-box bg-orange">
      <div class="inner">
        <h3>{{usernum}}</h3>

        <p>下属员工总数</p>
      </div>
      <div class="icon">
        <i class="fa fa-users"></i>
      </div>
      <a href="#" class="small-box-footer">更多分析 <i class="fa fa-arrow-circle-right"></i></a>
    </div>
  </div>
</div>
<!-- /.row -->

<div class="row">

  <div class="col-md-12">
      <h3>
          {{group.groupname}}
      </h3>
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">公司分布</h3>

        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
          </button>
          <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <div class="row">
          <div class="col-md-12">
            <!-- <p class="text-center">
              <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
            </p> -->

            <div id="container" style="height: 800px;width:auto">

            </div>
            <!-- /.chart-responsive -->
          </div>
        </div>
        <!-- /.row -->
      </div>
      <!-- ./box-body -->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col -->
</div>
<!-- /.row -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=978fc7c286560aa4cb3f18ef06737f9a"></script>
<script>
  var map = new AMap.Map('container', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom: 6, //初始化地图层级
    center: [116.397428, 39.90923],//初始化地图中心点
    //viewMode:'3D'//使用3D视图
  });
  $.getJSON('/groups/api/positions', function (res) {
    var x=0,y=0,num=0;
    for (var i = 0; i < res.data.length; i++) {
      let podata = res.data[i]
      if(podata.position !=null){
        let arrayposition = podata.position.location.split(',')
        x = x + parseFloat(arrayposition[0])
        y = y + parseFloat(arrayposition[1])
        num = num + 1
        let marker = new AMap.Marker({
        position: podata.position.location.split(','),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        label:{'content':podata.partname,'direction':'bottom'}
        // title: res.data[i].partname,
        // bubble:true,
        // clickable:true
      });
      map.add(marker);
      }
    }
    map.setCenter([x/num,y/num])
  })
</script>
{% endblock %}