152 lines
6.7 KiB
Plaintext
152 lines
6.7 KiB
Plaintext
|
@{
|
||
|
|
ViewData["Title"] = "RiserDiagram";
|
||
|
|
}
|
||
|
|
|
||
|
|
<div class="panel">
|
||
|
|
<div class="panel-heading">
|
||
|
|
</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
<div class="example">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@section Scripts{
|
||
|
|
<script>
|
||
|
|
$(function () {
|
||
|
|
$('li.site-menu-item').mouseenter(function (e) {
|
||
|
|
|
||
|
|
e.stopImmediatePropagation();
|
||
|
|
$(this).addClass('active open');
|
||
|
|
$(this).css('z-index', '10000');
|
||
|
|
});
|
||
|
|
|
||
|
|
$('li.site-menu-item').mouseleave(function (e) {
|
||
|
|
$(this).removeClass('active open');
|
||
|
|
});
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: 'https://localhost:44345/domeechart/meter_source_1_1.json',
|
||
|
|
type: 'GET',
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (code, statut) {
|
||
|
|
console.log(code.reverse());
|
||
|
|
|
||
|
|
$example = $('.example');
|
||
|
|
var html = "";
|
||
|
|
code.forEach(element => {
|
||
|
|
html += `<div class="row mb-5">`;
|
||
|
|
// html += `<div class="col-1 d-flex align-items-end justify-content-center floor-header-wrap">
|
||
|
|
// <h3>${element.floor}F</h3>
|
||
|
|
// </div>`
|
||
|
|
|
||
|
|
html += `<div class="col-1 d-flex align-items-end justify-content-center floor-header-wrap">`
|
||
|
|
switch (element.floor) {
|
||
|
|
case 1:
|
||
|
|
html += `<a target="_parent" href="/dome/demo_system/a-5_demo4.html">
|
||
|
|
<h3 style="color:#000">${element.floor}F</h3>
|
||
|
|
</a>`;
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
html += `<a target="_parent" href="/dome/demo_system/a-5_demo3.html">
|
||
|
|
<h3 style="color:#000">${element.floor}F</h3>
|
||
|
|
</a>`;
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
html += `<a target="_parent" href="/dome/demo_system/a-5_demo2.html">
|
||
|
|
<h3 style="color:#000">${element.floor}F</h3>
|
||
|
|
</a>`;
|
||
|
|
break;
|
||
|
|
case 4:
|
||
|
|
html += `<a target="_parent" href="/dome/demo_system/a-5_demo5.html">
|
||
|
|
<h3 style="color:#000">${element.floor}F</h3>
|
||
|
|
</a>`;
|
||
|
|
break;
|
||
|
|
case 5:
|
||
|
|
html += `<a target="_parent" href="/dome/demo_system/a-5_demo6.html">
|
||
|
|
<h3 style="color:#000">${element.floor}F</h3>
|
||
|
|
</a>`;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
html += `<h3 style="color:#000">${element.floor}F</h3>`;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
html += `</div>`
|
||
|
|
|
||
|
|
html += `<div class="col-11 row floor-body-wrap">`
|
||
|
|
element.meter.forEach(meter => {
|
||
|
|
var color = ['green', 'red', 'gray'];
|
||
|
|
html += `<div class="col-1 text-center meter-wrap" >
|
||
|
|
<div class="meter-header-wrap" style="position: relative;">
|
||
|
|
<div class="ball" style="
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: `+ color[Math.floor(Math.random() * 3)]+`;
|
||
|
|
border-radius: 50%;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
"></div>
|
||
|
|
<img src="${meter.image}" style="width: 100%;">
|
||
|
|
</div>
|
||
|
|
<div class="meter-body-wrap center">
|
||
|
|
<b>${meter.name}</b>
|
||
|
|
</div>
|
||
|
|
</div>`
|
||
|
|
})
|
||
|
|
html += `</div>`;
|
||
|
|
html += `<div class="col-12 floor-footer-wrap">
|
||
|
|
<img src="domeechart/floor.jpg" width="100%" height="50%">
|
||
|
|
</div>`
|
||
|
|
html += `</div>`;
|
||
|
|
});
|
||
|
|
$example.append(html);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
(function (document, window, $) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
var Site = window.Site;
|
||
|
|
$(document).ready(function () {
|
||
|
|
Site;
|
||
|
|
});
|
||
|
|
})(document, window, jQuery);
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
function includeHTML() {
|
||
|
|
var z, i, elmnt, file, xhttp;
|
||
|
|
/*loop through a collection of all HTML elements:*/
|
||
|
|
z = document.getElementsByTagName("*");
|
||
|
|
for (i = 0; i < z.length; i++) {
|
||
|
|
elmnt = z[i];
|
||
|
|
/*search for elements with a certain atrribute:*/
|
||
|
|
file = elmnt.getAttribute("w3-include-html");
|
||
|
|
if (file) {
|
||
|
|
/*make an HTTP request using the attribute value as the file name:*/
|
||
|
|
xhttp = new XMLHttpRequest();
|
||
|
|
xhttp.onreadystatechange = function () {
|
||
|
|
if (this.readyState == 4) {
|
||
|
|
if (this.status == 200) { elmnt.innerHTML = this.responseText; }
|
||
|
|
if (this.status == 404) { elmnt.innerHTML = "Page not found."; }
|
||
|
|
/*remove the attribute, and call this function once more:*/
|
||
|
|
elmnt.removeAttribute("w3-include-html");
|
||
|
|
includeHTML();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
xhttp.open("GET", file, true);
|
||
|
|
xhttp.send();
|
||
|
|
/*exit the function:*/
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
includeHTML();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
}
|