Вьюшка: "Каталог / Типовые серии зданий / Информация по серии" -- готово

This commit is contained in:
2022-12-26 17:19:01 +03:00
parent 74a28470c1
commit 2eea80f557
10 changed files with 928 additions and 39 deletions

View File

@@ -0,0 +1,18 @@
{# Отрисовка больших картинок с проемами и схамаи открывания #}{% load static %}{% if WIN_DIM %}
{% for I_WIN_DIM in FLAP_DIM %}
<div class="win_discr pull-left" id="flap{{ forloop.counter0 }}">
<div><img src="{% static I_WIN_DIM.url2img %}" alt="{{ I_WIN_DIM.sDescription }}. Размер {{ I_WIN_DIM.iWinWidth|stringformat:".0f" }}0x{{ I_WIN_DIM.iWinHight|stringformat:".0f" }}0 (Ш х В, мм.). Типовая схема открывания." title="{{ I_WIN_DIM.sDescription }}. Размер {{ I_WIN_DIM.iWinWidth|stringformat:".0f" }}0x{{ I_WIN_DIM.iWinHight|stringformat:".0f" }}0 (Ш х В, мм.). Типовая схема открывания." itemprop="image" /></div>
<div class="caption" style="width:{{ I_WIN_DIM.W }}px;min-width:13ex;">
<nobr>{{ I_WIN_DIM.iWinWidth|stringformat:".0f" }}0×{{ I_WIN_DIM.iWinHight|stringformat:".0f" }}0&thinsp;мм.</nobr><br />{% if not I_WIN_DIM.iQuantity == 0 %}
<nobr><b>{{ I_WIN_DIM.iQuantity }}&thinsp;шт.</b>{% for I_II in I_WIN_DIM.qStr %}<span class="color-bullet" style="background-image:url('{% static 'img/svg/mark' %}{{ I_II }}.svg');"></span>{% endfor %}</nobr><br />{% endif %}
{{ I_WIN_DIM.sDescription }}{% if not I_WIN_DIM.iQuantity == 0 %}<br />
<a href="/tsena-odnogo-okna/{{ I_WIN_DIM.iWinWidth|stringformat:".0f" }}0x{{ I_WIN_DIM.iWinHight|stringformat:".0f" }}0mm/tip{{ I_WIN_DIM.id }}">цены только этого типового окна</a>{% endif %}
</div>
</div>{% endfor %}{% comment %}
<script type="text/javascript">
$(document).ready(function(){
var maxHeight = 0;
{% for I_WIN_DIM in FLAP_DIM %}if (maxHeight < $('#flap{{ forloop.counter0 }}').height()) maxHeight = $('#flap{{ forloop.counter0 }}').height();
{% endfor %}{% for I_WIN_DIM in FLAP_DIM %}$('#flap{{ forloop.counter0 }}').height(maxHeight-240);{% endfor %}
});
</script>{% endcomment %}{% else %}<h1>Нет данных о проемах и рекомендованных схемах открывания окон</h1>{% endif %}

View File

@@ -0,0 +1,120 @@
{% extends "base.html" %}
{% load static %}
{% load filters %}
{% load humanize %}
{% block Title %}серия {{ THIS_SERIA_NAME }} — типовые проёмы, размеры окон, схемы открывания, планировки, здания на карте, история и статистика{% 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 %}Информация по зданиям серии {{ THIS_SERIA_NAME }} и установке окон в них{% endblock %}
{% block Keywords %}серии {{ THIS_SERIA_NAME }}, серия {{ THIS_SERIA_NAME }}, проект {{ THIS_SERIA_NAME }}, года простойки, размеры окон, размеры проемов, оконные проемы, {{ THIS_SERIA_NAME }} на карте, установка окон, цены на пластиковые окна{% endblock %}
{% block Top_JS1 %}
<script type="text/javascript">
$(window).load(function () {
var 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-11 col-xs-12">
<ol class="breadcrumb">
<li><a href="/">Главная</a></li>
<li><a href="/catalog/">Каталог</a></li>
<li><a href="/catalog/seria/">Типовые серии домов</a></li>
<li>Серия {{ THIS_SERIA_NAME }}</li>
</ol>
<h1>СЕРИЯ {{ THIS_SERIA_NAME }}</h1>
</div>
</div>{# <!--- Хлебные крошки: КОНЕЦ ---> #}
<div class="row">
<div class="col-md-12">{{ THIS_SERIA_DESCRIPTION|safe }}</div>
</div>
<div class="row">
<div class="col-lg-10">
<h2 class="header">Окна <nobr>в серии {{ THIS_SERIA_NAME }}</nobr>: типовые размеры и схемы открывания</h2>
</div>
<div class="col-lg-12" style="padding:1em 0 0 0;margin-left:-1em">
{% include 'report/show_big_flap_pictures.html' %}
</div>
</div>
<div class="row">
<div class="col-lg-8 col-xs-12 col-md-offset-1">
<h3 class="header">Оконные проёмы в типовых квартирах <nobr>серии {{ THIS_SERIA_NAME }}</nobr></h3>
</div>
<div class="col-lg-8 col-xs-12 col-md-offset-1">
<!--- прешаблон начало ---><table style="padding:2px;">{% templatetag openblock %} for row in TABLE_OF_WINDOWS {% templatetag closeblock %}
<tr class="tr2">
<td>{% templatetag openvariable %} row.APART_NAME|safe {% templatetag closevariable %}</td>{% templatetag openblock %} for col in row.WIN_IN_APART {% templatetag closeblock %}
<td class="cntr">{% templatetag openblock %} if col.WIN_ID {% templatetag closeblock %}<nobr title="{% templatetag openvariable %} col.WIN_Q {% templatetag closevariable %} × {% templatetag openvariable %} col.WIN_DESCRIPTION {% templatetag closevariable %}: {% templatetag openvariable %} col.WIN_WIDTH {% templatetag closevariable %}шт.: {% templatetag openvariable %} col.WIN_HEIGHT {% templatetag closevariable %} (Ш×В, см.). Схема открывания: {% templatetag openvariable %} col.WIN_FLAPCFG {% templatetag closevariable %}">{% templatetag openblock %} for I_II in col.WIN_NUM {% templatetag closeblock %}<span style="background-image:url('{% static 'img/svg/mark' %}{% templatetag openvariable %} I_II {% templatetag closevariable %}.svg');">&nbsp;</span>{% templatetag openblock %} endfor {% templatetag closeblock %}</nobr>{% templatetag openblock %} else {% templatetag closeblock %}—{% templatetag openblock %} endif {% templatetag closeblock %}</td>{% templatetag openblock %} endfor {% templatetag closeblock %}
<td style="background:#f9f9f9;"><a href="#{% templatetag openvariable %} row.APART_ID {% templatetag closevariable %}" class="badge" title="Оконных предложений для квартиры: {% templatetag openvariable %} row.NUM_OFFERS {% templatetag closevariable %}"><small class="glyphicon glyphicon-tags" aria-hidden="true"></small>&nbsp;{% templatetag openvariable %} row.NUM_OFFERS {% templatetag closevariable %}</a></td>
</tr>{% templatetag openblock %} endfor {% templatetag closeblock %}
<tr class="trZ">
<td style="font-size: xx-small;vertical-align:text-top">© 2015-{% now "Y" %}, данные: oknardia.ru</td>{% templatetag openblock %} for i in WIN_OFFER_AND_MERCHANT {% templatetag closeblock %}
<td class="cntr" style="background:#f9f9f9;"><a href="/tsena-odnogo-okna/{% templatetag openvariable %} i.WIN_W|floatformat:0 {% templatetag closevariable %}0x{% templatetag openvariable %} i.WIN_H|floatformat:0 {% templatetag closevariable %}0mm/tip{% templatetag openvariable %} i.WIN_ID {% templatetag closevariable %}" class="badge" title="Ценовых предложений для окна: {% templatetag openvariable %} i.WIN_OFFER {% templatetag closevariable %}"><small class="glyphicon glyphicon-tags" aria-hidden="true"></small>&nbsp;{% templatetag openvariable %} i.WIN_OFFER {% templatetag closevariable %}</a></td>{% templatetag openblock %} endfor {% templatetag closeblock %}
<td></td>
</tr>
</table>
<!--- прешаблон конец ---></div>
</div>
<div class="row">
<div class="col-md-9"><a name="s_graph"></a>
<h2 class="header">Серия {{ THIS_SERIA_NAME }}: ввод в эксплуатацию по годам</h2>
</div>
<div class="col-md-9 col-md-offset-1" style="height:300px;font-size:large;">
{% include 'seria_info/yaer_graph.html' %}
</div>
<div class="col-md-9 col-md-offset-1">
<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
</div>
</div>
<div class="row">
<div class="col-md-7"><a name="s_map"></a>
<h2 class="header">Серия {{ THIS_SERIA_NAME }}: жилой фонд проекта на карте</h2>
</div>
<div class="col-md-7 col-lg-offset-1">
<p><small>Чтобы посмотреть цены на&nbsp;установку и&nbsp;замену окон от&nbsp;партнёров &laquo;Окнардия&raquo; в&nbsp;своей квартире: найдите дом на&nbsp;карте; кликните на&nbsp;него; перейдите по&nbsp;ссылке &laquo;Смотреть коммерческие предложения&raquo;. При необходимости смените типовую планировку квартиры (на&nbsp;странице ценовой выдачи, справа от&nbsp;изображения типовых проёмов и&nbsp;схем открывания).</small></p>
<div style="height:350px;">{% include 'seria_info/geo_map.html' %}</div>
<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
</div>
<diV class="col-md-4">
<h3 class="header">Статистика <nobr>серии {{ THIS_SERIA_NAME }}</nobr></h3>
<p>Совокупно во всех зданиях типового проекта:</p>
<ul>
<li><strong>{{ ACCOUNTS|price_format }}</strong> квартир.</li>
<li>Проживает <strong>{{ APARTMENTS|price_format }}</strong> семей <small>(<strong>{{ RESIDENTS|price_format }}</strong> человек)</small>.</li>
<li><strong>{{ RESIDENTIAL_M2|stringformat:".1f"|price_format }} м²</strong> жилых помещений.</li>
<li><strong>{{ MUNICIPAL_M2|stringformat:".1f"|price_format }} м²</strong> — муниципальное жильё.</li>
<li><strong>{{ GOVERNMENT_M2|stringformat:".1f"|price_format }} м²</strong> занимают государственные и городские службы, учреждения бытового обслуживания, магазины, офисы и тому подобное.</li>
<li>Максимальный износ жилого фонда серии {{ THIS_SERIA_NAME }} — <strong>{{ CONDITION_MAX|stringformat:".2f" }}%</strong>. Минимальный — <strong>{{ CONDITION_MIN|stringformat:".2f" }}%</strong>. </li>
</ul>
</diV>
</div>
<div class="row">
<div class="col-md-4 col-lg-offset-8" style="margin-top: 1em;">{# <div class="col-md-4"> #}
<h5>Информация о&nbsp;других, отличных от&nbsp;{{ THIS_SERIA_NAME }}, типовых сериях в&nbsp;базе &laquo;Окнардия&raquo;, типовых планировках квартир и&nbsp;оконных проёмах в&nbsp;них, а также рекомендации по замене окон:</h5>
<div class="href_d">{% include 'seria_info/seria_nav.html' %}</div>
</div>
</div>
<div class="row">
{% templatetag openblock %}include "report/report_last_user_visit.html" {% templatetag closeblock %}
{% templatetag openblock %} include "report/report_log_user_visit.html" {% templatetag closeblock %}
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,56 @@
{# Скрипт Yandex.Chart для отображения клястеров на карте #}{% load static %}
{% block Top_JS5 %}<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
{% if MAP_JS %}<script src="{% static '' %}{{ MAP_JS }}" charset="utf-8" type="text/javascript"></script>{% else %}<script type="text/javascript">
let points = [{% for count in DATA4GEO %}{% if forloop.last %}[{{ count.LONGITUDE|stringformat:"f" }},{{ count.LATITUDE|stringformat:"f" }}]{% else %}[{{ count.LONGITUDE|stringformat:"f" }},{{ count.LATITUDE|stringformat:"f" }}],{% endif %}{% endfor %}];
let forURL = [{% for count in DATA4GEO %}{{ count.ADDR_ID }}{# ,rus: '{{ count.ADDR_RUS }}',lat: '{{ count.ADDR_LAT }}' #}{% if not forloop.last %},{% endif %}{% endfor %}];
ymaps.ready(function () {
var myMap = new ymaps.Map('SeriaMap', {
center: [55.75, 37.57],
zoom: 10,
behaviors: ['default', 'scrollZoom'],
controls: [ 'rulerControl', 'zoomControl', 'geolocationControl', 'fullscreenControl' ]
});
// Создадим кластеризатор, вызвав функцию-конструктор.
clusterer = new ymaps.Clusterer({
preset: 'islands#invertedGrayClusterIcons',
groupByCoordinates: false,
hasHint: false,
viewportMargin: 0,
zoomMargin: 16,
clusterDisableClickZoom: false,
gridSize: 80
});
geoObjects = [];
add_str1 = '<a href="/';
add_str2 = '/0/">Смотреть коммерческие предложения</a>';
add_str3 = '<b>Здание серии {{ THIS_SERIA_NAME }}</b>';
// Данные передаются в конструктор метки.
for(var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark( points[i],
{ // Содержимое иконки, балуна и хинта.
balloonContent: add_str1 + forURL[i] + add_str2,
hintContent: add_str3
},
{ preset:'islands#circleIcon',iconColor: 'silver'} );
geoObjects[i].events
.add('mouseenter', function (e) {
e.get('target').options.set('preset', 'islands#yellowCircleIcon');
})
.add('mouseleave', function (e) {
e.get('target').options.set('preset', 'islands#grayCircleIcon');
});
}
// Добавляем метки в кластеризатор.
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
// позиционирование карты так, чтобы на ней были видны все объекты кластера.
myMap.setBounds(clusterer.getBounds(), { checkZoomRange: true });
});
</script>{% endif %}{% endblock %}
<div id="SeriaMap" style="height:100%;width:100%;">
<noscript>
<p>Для отображения картографических данных по серии {{ THIS_SERIA_NAME }} с&nbsp;помощью &laquo;Яндекс.Карт&raquo; нужно включить поддержку JavaScript.</p>
</noscript>
</div>

View File

@@ -0,0 +1 @@
{# Выводит навигацию по сериям домов #}{% for CountSeria in SERIA_NAV_DIM %}{% if CountSeria.SERIA_L == "" %}<span style="background-color:cornsilk;"><nobr>{{ CountSeria.SERIA_R }}</nobr></span>{% else %}<span><a href="/catalog/seria/{{ CountSeria.SERIA_L }}/all{{ CountSeria.ID2URL }}/"><nobr>{{ CountSeria.SERIA_R }}</nobr></a></span>{% endif %}{% endfor %}

View File

@@ -0,0 +1,58 @@
{# Скрипт Google.Chart для рисования графика #}{% block Top_JS3 %}
<script type="text/javascript" src="https://www.google.com/jsapi" type="text/javascript"></script>{# <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script> #}
<script type="text/javascript">
// google.charts.load('current', {'packages':['bar']});
// google.charts.setOnLoadCallback(drawChart);
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
let data = google.visualization.arrayToDataTable([
["Год", "Введено в эксплуатацию", {role:'style'}],{% for row in DATA4GRAPH %}
["{{ row.YEAR }}",{{ row.NUMS }},"color: #99{{ row.CLRS }}99"]{% if not forloop.last %},{% endif %}{% endfor %}
]);
let view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2
]);
let options = {
animation:{
duration: 1500,
easing: 'in',
startup: true
},
backgroundColor: "#EEEEEE",
bar: {groupWidth: "76.4%"},
chartArea: {left: "2%", top: "5%", width: '96%', height: '85%'},
dataOpacity: 0.76,
explorer:{
maxZoomIn: 0.20,
maxZoomOut: 32 },
vAxis: {
baselineColor:'grey',
gridlines:{color: 'silver', count: 7},
minorGridlines:{color: '#dddddd', count: 3},
textPosition: 'in',
textStyle: {fontSize: 10}
},
hAxis: { textStyle: {fontSize: 10} },
isStacked: true,
tooltip: {
textStyle:{color: 'grey', fontSize: 10 },
trigger: 'selection'
},
annotations: {textStyle: { fontSize: 8, bold: true, color: 'black', opacity: 0.8 }},
legend: { position: "none" }
};
let chart = new google.visualization.ColumnChart(document.getElementById("graph"));
chart.draw(data, options);
}
</script>{% endblock %}
<div id="graph" style="width:100%;height:100%">
<p>Для отображения гистограммы ввода в&nbsp;эксплуатацию зданий серии {{ THIS_SERIA_NAME }} нужна поддержка SVG.</p>
<noscript>
<p>Для визуализации отображения картографической информации с&nbsp;помощью Google.Charts нужно включить поддержку JavaScript.</p>
</noscript></div>