1. 修改交叉分析選單

This commit is contained in:
Kai 2021-08-17 18:37:25 +08:00
parent 6ee70304ca
commit 716a6a2294
2 changed files with 80 additions and 72 deletions

View File

@ -6,7 +6,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row flex-nowrap wrapper"> <div class="row flex-nowrap wrapper">
<div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100"> <div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100 overflow-auto">
<div class="list-group border-0 card text-center text-md-left" id="sidebar"> <div class="list-group border-0 card text-center text-md-left" id="sidebar">
@ -80,35 +80,35 @@
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">選擇比較欄位</button> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">選擇比較欄位</button>
<ul class="dropdown-menu" id="compare-dropdown-menu" style="width:10vw;overflow-x:hidden; max-height:50vh"> <ul class="dropdown-menu" id="compare-dropdown-menu" style="width:10vw;overflow-x:hidden; max-height:50vh">
@*<li><a href="javascript:void(0)" class="dropdown-item" data-value="option1" tabIndex="-1">日照度<input type="checkbox" class="float-right" name="compare_col[]" value="Irradiance" /></a></li> @*<li><a href="javascript:void(0)" class="dropdown-item" data-value="option1" tabIndex="-1">日照度<input type="checkbox" class="float-right" name="compare_col[]" value="Irradiance" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option2" tabIndex="-1">直流功率 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DCKW" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option2" tabIndex="-1">直流功率 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DCKW" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option3" tabIndex="-1">輸出功率 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="ACKW" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option3" tabIndex="-1">輸出功率 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="ACKW" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓1 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓1 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流1 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流1 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率1 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1KW" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率1 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC1KW" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓2 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓2 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流2 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流2 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率2 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2KW" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率2 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC2KW" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓3 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓3 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流3 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流3 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率3 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3KW" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率3 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC3KW" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓4 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓4 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流4 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流4 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率4 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4KW" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率4 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC4KW" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓5 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option4" tabIndex="-1">直流電壓5 (V)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流5 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option5" tabIndex="-1">直流電流5 (A)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率5 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5KW" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">直流功率5 (KW)<input type="checkbox" class="float-right" name="compare_col[]" value="DC5KW" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓A (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC1V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓A (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC1V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓B (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC2V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓B (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC2V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓C (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC3V" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電壓C (V)<input type="checkbox" class="float-right" name="compare_col[]" value="AC3V" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流A (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC1A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流A (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC1A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流B (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC2A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流B (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC2A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流C (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC3A" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">交流電流C (A)<input type="checkbox" class="float-right" name="compare_col[]" value="AC3A" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">PR<input type="checkbox" class="float-right" name="compare_col[]" value="PR" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">PR<input type="checkbox" class="float-right" name="compare_col[]" value="PR" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA1 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA1" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA1 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA1" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA2 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA2" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA2 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA2" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA3 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA3" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA3 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA3" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA4 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA4" /></a></li> <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA4 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA4" /></a></li>
<li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA5 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA5" /></a></li>*@ <li><a href="javascript:void(0)" class="dropdown-item" data-value="option6" tabIndex="-1">RA5 (%)<input type="checkbox" class="float-right" name="compare_col[]" value="RA5" /></a></li>*@
</ul> </ul>
</div> </div>
</div> </div>
@ -446,10 +446,10 @@
var str = ""; var str = "";
Object.keys(inverterCollapse).map(function (key, index) { Object.keys(inverterCollapse).map(function (key, index1) {
str += '<div class="card border-top-left-radius-0 border-top-right-radius-0" id="templateCard">' + str += '<div class="card border-top-left-radius-0 border-top-right-radius-0" id="templateCard">' +
'<div class="card-header">' + '<div class="card-header">' +
'<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-' + index + '" aria-expanded="false" data-filter-tags="settings">' + '<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-' + index1 + '" aria-expanded="false" data-filter-tags="settings">' +
'<i class="fal fa-globe width-2 fs-xl"></i>' + '<i class="fal fa-globe width-2 fs-xl"></i>' +
'<span class="city-name">' + key + '</span>' + '<span class="city-name">' + key + '</span>' +
'<span class="ml-auto">' + '<span class="ml-auto">' +
@ -458,29 +458,33 @@
'</span>' + '</span>' +
'</a>' + '</a>' +
'</div>' + '</div>' +
'<div id="js_list_accordion-' + index + '" class="collapse" data-parent="#js_list_accordion" style="">' + '<div id="js_list_accordion-' + index1 + '" class="collapse" data-parent="#js_list_accordion" style="">';
'<div class="card-body">' + Object.keys(inverterCollapse[key]).map(function (powerStationkey, index2) {
'<ul class="list-group list-group-flush">'; str += '<div id="cp-' + index1 + '-' + index2 + '" class="card py-3 selected_group">' +
Object.keys(inverterCollapse[key]).map(function (powerStationkey, index) { '<div class="card-header pl-4 pr-3 d-flex justify-content-start">' +
str += '<li class="list-group-item">' + '<div class="mr-3">' +
'<div class="d-flex justify-content-between">' + '<input type="checkbox" class="" name="selectedInverterLayer2[]" >' +
'<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ' + powerStationkey + '</h4>' + '</div>' +
'<div class="">' + '<a href="javascript:;" class="" data-toggle="collapse" data-target="#cp-' + index1 + '-' + index2 + ' > .card-body" aria-expanded="true">' +
'<input type="checkbox" class="" name="selectedInverterLayer2[]" >' + '<span class="collapsed-hidden"><h5 class="font-weight-bold mb-0"><i class="fal fa-charging-station"></i>' + powerStationkey + '<i class="fal fa-chevron-down fs-xl"></i></h5></span>' +
'</div>' + '<span class="collapsed-reveal"><h5 class="font-weight-bold mb-0"><i class="fal fa-charging-station"></i>' + powerStationkey + '<i class="fal fa-chevron-up fs-xl"></i></h5></span>' +
'</div>' + '</a>' +
'<ul class="list-group list-group-flush">'; '</div>' +
'<div class="card-body p-0">' +
'<div class="p-0">' +
'<ul class="list-group list-group-flush">';
$.each(inverterCollapse[key][powerStationkey], function (index, inverter) { $.each(inverterCollapse[key][powerStationkey], function (index, inverter) {
str += '<li class="list-group-item pr-0 d-flex justify-content-between">' + str += '<li class="list-group-item pr-0 d-flex justify-content-between">' +
'<a href="#"><i class="fal fa-server"></i>&nbsp;' + inverter.inverterName + '</a>' + '<a href="#"><i class="fal fa-server"></i>&nbsp;' + inverter.inverterName + '</a>' +
'<div class=""><input type="checkbox" class="" name="selectedInverterId[]" data-power-station-id="' + inverter.powerStationId + '" value="' + inverter.inverterId + '">' + '</div>' '<div class=""><input type="checkbox" class="" name="selectedInverterId[]" data-power-station-id="' + inverter.powerStationId + '" value="' + inverter.inverterId + '">' + '</div>'
'</li>'; '</li>';
}); });
str += '</ul>' + str += '</ul>';
'</li>'; str += '</div>';
str += '</div>';
str += '</div>';
}); });
str += '</ul>';
str += '</div>'; str += '</div>';
str += '</div>'; str += '</div>';

View File

@ -6,7 +6,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row flex-nowrap wrapper"> <div class="row flex-nowrap wrapper">
<div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100"> <div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100 overflow-auto">
<div class="list-group border-0 card text-center text-md-left" id="sidebar"> <div class="list-group border-0 card text-center text-md-left" id="sidebar">
@ -418,9 +418,9 @@
$('#js_list_accordion').on("change", 'input[name="selectedDeviceLayer2[]"]', function (event) { $('#js_list_accordion').on("change", 'input[name="selectedDeviceLayer2[]"]', function (event) {
if (this.checked) { if (this.checked) {
$(this).parents(".list-group-item").find('input[name="selectedDeviceId[]"]').prop("checked", true).trigger("change"); $(this).parents(".selected_group").find('input[name="selectedDeviceId[]"]').prop("checked", true).trigger("change");
} else { } else {
$(this).parents(".list-group-item").find('input[name="selectedDeviceId[]"]').prop("checked", false).trigger("change"); $(this).parents(".selected_group").find('input[name="selectedDeviceId[]"]').prop("checked", false).trigger("change");
} }
}); });
@ -461,10 +461,10 @@
var str = ""; var str = "";
Object.keys(deviceCollapse).map(function (key, index) { Object.keys(deviceCollapse).map(function (key, index1) {
str += '<div class="card border-top-left-radius-0 border-top-right-radius-0" id="templateCard">' + str += '<div class="card border-top-left-radius-0 border-top-right-radius-0" id="templateCard">' +
'<div class="card-header">' + '<div class="card-header">' +
'<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-' + index + '" aria-expanded="false" data-filter-tags="settings">' + '<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-' + index1 + '" aria-expanded="false" data-filter-tags="settings">' +
'<i class="fal fa-globe width-2 fs-xl"></i>' + '<i class="fal fa-globe width-2 fs-xl"></i>' +
'<span class="city-name">' + key + '</span>' + '<span class="city-name">' + key + '</span>' +
'<span class="ml-auto">' + '<span class="ml-auto">' +
@ -473,18 +473,21 @@
'</span>' + '</span>' +
'</a>' + '</a>' +
'</div>' + '</div>' +
'<div id="js_list_accordion-' + index + '" class="collapse" data-parent="#js_list_accordion" style="">' + '<div id="js_list_accordion-' + index1 + '" class="collapse" data-parent="#js_list_accordion" style="">';
'<div class="card-body">' + Object.keys(deviceCollapse[key]).map(function (powerStationkey, index2) {
'<ul class="list-group list-group-flush">'; str += '<div id="cp-' + index1 + '-' + index2 + '" class="card py-3 selected_group">' +
Object.keys(deviceCollapse[key]).map(function (powerStationkey, index) { '<div class="card-header pl-4 pr-3 d-flex justify-content-start">' +
str += '<li class="list-group-item">' + '<div class="mr-3">' +
'<div class="d-flex justify-content-between">' + '<input type="checkbox" class="" name="selectedDeviceLayer2[]" >' +
'<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ' + powerStationkey + '</h4>' + '</div>' +
'<div class="">' + '<a href="javascript:;" class="" data-toggle="collapse" data-target="#cp-' + index1 + '-' + index2 + ' > .card-body" aria-expanded="true">' +
'<input type="checkbox" class="" name="selectedDeviceLayer2[]" >' + '<span class="collapsed-hidden"><h5 class="font-weight-bold mb-0"><i class="fal fa-charging-station"></i>' + powerStationkey + '<i class="fal fa-chevron-down fs-xl"></i></h5></span>' +
'</div>' + '<span class="collapsed-reveal"><h5 class="font-weight-bold mb-0"><i class="fal fa-charging-station"></i>' + powerStationkey + '<i class="fal fa-chevron-up fs-xl"></i></h5></span>' +
'</div>' + '</a>' +
'<ul class="list-group list-group-flush">'; '</div>' +
'<div class="card-body p-0">' +
'<div class="p-0">' +
'<ul class="list-group list-group-flush">';
$.each(deviceCollapse[key][powerStationkey], function (index, device) { $.each(deviceCollapse[key][powerStationkey], function (index, device) {
var device_icon = ""; var device_icon = "";
switch (device.deviceType) { switch (device.deviceType) {
@ -513,19 +516,20 @@
device_icon = '<i class="fal fa-tint"></i>'; device_icon = '<i class="fal fa-tint"></i>';
break; break;
} }
str += '<li class="list-group-item pr-0 d-flex justify-content-between">' + str += '<li class="list-group-item pr-0 d-flex justify-content-start">' +
'<div class="mr-3">' +
'<input type="checkbox" class="" name="selectedDeviceId[]" data-power-station-id="' + device.powerStationId + '" data-type="' + device.deviceType + '" value="' + device.deviceId + '">' +
'</div>' +
'<a href="javascript:void(0)">' + device_icon + '&nbsp;' + device.deviceName + '</a>' + '<a href="javascript:void(0)">' + device_icon + '&nbsp;' + device.deviceName + '</a>' +
'<div class=""><input type="checkbox" class="" name="selectedDeviceId[]" data-power-station-id="' + device.powerStationId + '" data-type="' + device.deviceType + '" value="' + device.deviceId + '">' + '</div>' '</li>';
'</li>';
}); });
str += '</ul>' + str += '</ul>';
'</li>'; str += '</div>';
str += '</div>';
str += '</div>';
}); });
str += '</ul>';
str += '</div>'; str += '</div>';
str += '</div>'; str += '</div>';
}); });
$('#js_list_accordion').append(str); $('#js_list_accordion').append(str);