страница "Статистика"

This commit is contained in:
2022-11-12 21:21:46 +03:00
parent a405d50920
commit 40e49a2042
8 changed files with 680 additions and 2 deletions

View File

@@ -0,0 +1,189 @@
{% extends "base.html" %}
{% load static %}
{% load filters %}
{% load humanize %}
{% block Title %} Статистика типового строительства СССР и России.{% endblock %}
{% block Add_Body_Attribute %} style="padding-top:70px;"{% endblock %}
{# block Date4Meta %}{{ META_DATA_PUBLISH|date:"c" }}{% endblock #}
{# block Last4Meta %}{{ META_DATA_PUBLISH|date:"c" }}{% endblock #}
{% block Description %}Статистика типового строительства СССР и России. Географи, график ввода в эксплуатацтяю, метраж. Здания проектов серии: {% for CountSeria in SERIA_NAV_DIM %}{{ CountSeria.SERIA_R }}{% if not forloop.last %}, {% endif %}{% endfor %}.{% endblock %}
{% block Keywords %}типовые проекты зданий, панельное строительство, {% for CountSeria in SERIA_NAV_DIM %}серия {{ CountSeria.SERIA_R }}, {{ CountSeria.SERIA_R }}, {% endfor %}, года простойки, регионы построки, распространенность{% endblock %}
{% block Top_JS1%}
<script type="text/javascript">
$(window).load(function(){let images = $('.half');images.each(function(i){$(this).width($(this).width()/2);});});
</script>
{% endblock %}
{% block Main_Content %}<div class="container-fluid">
<div class="row">
<div class="col-md-9"><h1>Статистика</h1></div>
</div>
<div class="row">
<div class="col-md-10"><a name="s_graph"></a>
<h2 class="header">Распределение типовых серии в жилом фонде<sup><small style="color: darkred;">*</small></sup></h2>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
step = Math.round( Math.pow({{ SERIA_NAV_DIM|length }}, 1./3.)-1);
step_tone = Math.floor(0xF0/step)-1;
DimColor = [];
for (i1=0; i1<=step; i1++ )
for (i2=step; i2>=0; i2-- )
for (i3=0; i3<=step; i3++ ) {
//document.write("&nbsp;<span style='color:#"
// + ("00"+(i1*step_tone).toString(16)).substr(-2)
// + ("00"+(i2*step_tone).toString(16)).substr(-2)
// + ("00"+(i3*step_tone).toString(16)).substr(-2)
// + ";'>█</span> -- ");
//document.write( "#"
// + ("00"+(i1*step_tone).toString(16)).substr(-2)
// + ("00"+(i2*step_tone).toString(16)).substr(-2)
// + ("00"+(i3*step_tone).toString(16)).substr(-2) + "<br>");
DimColor.push("#"
+ ("00"+(i1*step_tone).toString(16)).substr(-2)
+ ("00"+(i2*step_tone).toString(16)).substr(-2)
+ ("00"+(i3*step_tone).toString(16)).substr(-2)
);
}{% for CountSeria in SERIA_NAV_DIM %}
c{{ CountSeria.ID2URL }} = DimColor[{{ forloop.counter0 }}]; s{{ CountSeria.ID2URL }} = "{{ CountSeria.SERIA_R }}"; {% endfor %} sNone = "нет данных";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
let dataNumBuildingPerSeria = google.visualization.arrayToDataTable([
[ 'Проект серии', 'Число зданий (шт.)' ],{% for CountSeria in DATA2PIE %}
[ 'Серия ' + s{{ CountSeria.ID }}, {{ CountSeria.NUM_BUILDING }} ]{% if not forloop.last %},{% endif %}{% endfor %}
]);
let dataM2PerSeria = google.visualization.arrayToDataTable([
[ 'Проект серии', 'Общая площадь помещений в данно серии (м2)' ],{% for CountSeria in DATA2PIE %}
[ 'Серия ' + s{{ CountSeria.ID }}, {{ CountSeria.AREA_M2|stringformat:"f" }} ]{% if not forloop.last %},{% endif %}{% endfor %}
]);
let TotalKnown = {% for CountSeria in DATA2PIE %}{{ CountSeria.NUM_BUILDING }}{% if not forloop.last %}+{% endif %}{% endfor %};
let TotalAddress = 114808;
let dataTotal = google.visualization.arrayToDataTable([
[ 'База «Окнардии»', 'Количество адресов' ],
[ 'Не обработано или нет данных', TotalAddress-TotalKnown ],
[ 'Оцифрованые типовые серии', TotalKnown ]
]);
let options4Pie1 = {
pieHole: 0.386,
//backgroundColor:'#f1fff1',
legend: {position: "none"},
//chartArea: {left:20,top:10,width:'100%',height:'100%'},
chartArea: {width: '95%', height: '95%'},
slices: { {% for CountSeria in DATA2PIE %}
{{ forloop.counter0 }}: { color: c{{ CountSeria.ID }} }{% if not forloop.last %},{% endif %}{% endfor %}
},
//colors: [ {% for CountSeria in DATA2PIE %} c{{ CountSeria.ID }} {% if not forloop.last %},{% endif %}{% endfor %} ],
pieStartAngle: 30,
//is3D: true,
pieSliceTextStyle: {fontSize: 12},
tooltip: {textStyle: {fontSize: 14, color: 'black', opacity: 0.8}, showColorCode: true}
};
let options4Pie2 = {
pieHole: 0.16,
legend: {position: "none"},
chartArea: {width: '90%', height: '95%', top: 8, left:8},
pieStartAngle: 115,
slices: { 1: {offset: 0.04}},
pieSliceTextStyle: {fontSize: 12},
tooltip: {textStyle: {fontSize: 10, color: 'black', opacity: 0.8}, showColorCode: true}
};
let chartNumBuildingPerSeria = new google.visualization.PieChart(document.getElementById('donutchart1'));
let chartM2PerSeria = new google.visualization.PieChart(document.getElementById('donutchart2'));
let chartTotsl = new google.visualization.PieChart(document.getElementById('donutchart3'));
chartNumBuildingPerSeria.draw(dataNumBuildingPerSeria, options4Pie1);
chartM2PerSeria.draw(dataM2PerSeria, options4Pie1);
chartTotsl.draw(dataTotal, options4Pie2);
}
$(window).load(function(){ {% for CountSeria in SERIA_NAV_DIM %}$(".cc{{ CountSeria.ID2URL }}").css("color",c{{ CountSeria.ID2URL }}); {% endfor %}});
</script>
<div class="col-md-4">
<h4 style="text-align:center;">Количество зданий типовых проектов<sup><small style="color: darkred;">*</small></sup></h4>
<div id="donutchart1" style="height:350px;width:100%;"></div>
<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
</div>
<div class="col-md-4">
<h4 style="text-align:center;">Общая площадь (м&sup2;) в типовых сериях<sup><small style="color: darkred;">*</small></sup></h4>
<div id="donutchart2" style="height:350px;width:100%;"></div>
<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
</div>
<div class="col-md-2 col-md-offset-1">
<h4>Адресная база «Окнардия»<sup><small style="color: darkred;">*</small></sup></h4>
<div id="donutchart3" style="height:180px;width:100%;"></div>
</div>
<div class="col-md-4">
<h4>Обозначения:</h4>
<diV style="font-size: small;">{% for CountSeria in SERIA_NAV_DIM %}
<span style="display:inline-flex;width: 22.5%;"><nobr><span class="cc{{ CountSeria.ID2URL }}"></span>&nbsp;<a href="/catalog/seria/{{ CountSeria.SERIA_L }}/all{{ CountSeria.ID2URL }}/">{{ CountSeria.SERIA_R }}</a></nobr></span>{% endfor %}
</diV>
</div>
</div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="{% static 'js/ymaps-pie-chart-clusterer.js' %}" type="text/javascript"></script>
<script src="{% static '' %}{{ MAP_JS }}" charset="utf-8" type="text/javascript"></script>
<div class="row">
<div class="col-md-12"><a name="s_map"></a>
<h2 class="header">Здания типовых проектов на карте:</h2></div>
<div class="col-xs-1" style="font-size: x-small;">
<h6>Обозначения:</h6>
<p style="margin-left:1ex;">{% for CountSeria in SERIA_NAV_DIM %}
<nobr><span class="cc{{ CountSeria.ID2URL }}"></span> <a href="/catalog/seria/{{ CountSeria.SERIA_L }}/all{{ CountSeria.ID2URL }}/">{{ CountSeria.SERIA_R }}</a></nobr><br/>{% endfor %}
</p>
</div>
<div class="col-xs-11">
<div id="SeriaMap" style="height:650px;width:100%;">
<p style="font-size:small;padding-top: 1ex;">Чтобы посмотреть цены на&nbsp;установку и&nbsp;замену окон от&nbsp;партнёров &laquo;Окнардия&raquo; в&nbsp;своей квартире: найдите дом на&nbsp;карте; кликните на&nbsp;него; перейдите по&nbsp;ссылке &laquo;Смотреть цены на установку окон&raquo;. При необходимости смените типовую планировку квартиры (на&nbsp;странице ценовой выдачи, справа от&nbsp;изображения типовых проёмов и&nbsp;схем открывания).</p>
<noscript><p>Для отображения картографических данных с&nbsp;помощью &laquo;Яндекс.Карт&raquo; нужно включить поддержку JavaScript.</p></noscript>
</div>
<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
</div>
</div>
<!-- div class="row col-md-12">
<div class="col-md-8 header"><a name="s_graph"></a>
<h2>Возведение зданий разных серий по годам</h2>
</div>
<div class="col-md-9 col-md-offset-1" style="height:300px;font-size:large;">
{% now "Y" %}<br>
{#% include 'SeriaInfo/yaer_graph.html' %#}
</div>
</div>
<div class="row col-md-12">
<div class="col-md-8 header"><a name="s_graph"></a>
<h2>Метраж в эксплуатации по годам</h2>
</div>
<div class="col-md-9 col-md-offset-1" style="height:300px;font-size:large;">
{#% include 'SeriaInfo/yaer_graph.html' %#}
</div>
</div -->
<div class="row">
<div class="col-md-2 col-md-offset-10" style="margin-top: 4em;"><p style="font-size:xx-small;">время исполнения скрипта: {{ ticks|floatformat:4 }}</p></div>
</div>
</div>
{% endblock %}
{% comment %}
{% block Top_Nav_Bar %}
{# ОТЛАДКА, ГАСИМ ВЕРХНЕЕ МЕНЮ #}
{% endblock %}
{% endcomment %}