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="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">
@ -446,10 +446,10 @@
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">' +
'<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>' +
'<span class="city-name">' + key + '</span>' +
'<span class="ml-auto">' +
@ -458,17 +458,20 @@
'</span>' +
'</a>' +
'</div>' +
'<div id="js_list_accordion-' + index + '" class="collapse" data-parent="#js_list_accordion" style="">' +
'<div class="card-body">' +
'<ul class="list-group list-group-flush">';
Object.keys(inverterCollapse[key]).map(function (powerStationkey, index) {
str += '<li class="list-group-item">' +
'<div class="d-flex justify-content-between">' +
'<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ' + powerStationkey + '</h4>' +
'<div class="">' +
'<div id="js_list_accordion-' + index1 + '" class="collapse" data-parent="#js_list_accordion" style="">';
Object.keys(inverterCollapse[key]).map(function (powerStationkey, index2) {
str += '<div id="cp-' + index1 + '-' + index2 + '" class="card py-3 selected_group">' +
'<div class="card-header pl-4 pr-3 d-flex justify-content-start">' +
'<div class="mr-3">' +
'<input type="checkbox" class="" name="selectedInverterLayer2[]" >' +
'</div>' +
'<a href="javascript:;" class="" data-toggle="collapse" data-target="#cp-' + index1 + '-' + index2 + ' > .card-body" aria-expanded="true">' +
'<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>' +
'<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>' +
'</a>' +
'</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) {
str += '<li class="list-group-item pr-0 d-flex justify-content-between">' +
@ -476,11 +479,12 @@
'<div class=""><input type="checkbox" class="" name="selectedInverterId[]" data-power-station-id="' + inverter.powerStationId + '" value="' + inverter.inverterId + '">' + '</div>'
'</li>';
});
str += '</ul>' +
'</li>';
str += '</ul>';
str += '</div>';
str += '</div>';
str += '</div>';
});
str += '</ul>';
str += '</div>';
str += '</div>';

View File

@ -6,7 +6,7 @@
<div class="container-fluid">
<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">
@ -418,9 +418,9 @@
$('#js_list_accordion').on("change", 'input[name="selectedDeviceLayer2[]"]', function (event) {
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 {
$(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 = "";
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">' +
'<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>' +
'<span class="city-name">' + key + '</span>' +
'<span class="ml-auto">' +
@ -473,17 +473,20 @@
'</span>' +
'</a>' +
'</div>' +
'<div id="js_list_accordion-' + index + '" class="collapse" data-parent="#js_list_accordion" style="">' +
'<div class="card-body">' +
'<ul class="list-group list-group-flush">';
Object.keys(deviceCollapse[key]).map(function (powerStationkey, index) {
str += '<li class="list-group-item">' +
'<div class="d-flex justify-content-between">' +
'<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> ' + powerStationkey + '</h4>' +
'<div class="">' +
'<div id="js_list_accordion-' + index1 + '" class="collapse" data-parent="#js_list_accordion" style="">';
Object.keys(deviceCollapse[key]).map(function (powerStationkey, index2) {
str += '<div id="cp-' + index1 + '-' + index2 + '" class="card py-3 selected_group">' +
'<div class="card-header pl-4 pr-3 d-flex justify-content-start">' +
'<div class="mr-3">' +
'<input type="checkbox" class="" name="selectedDeviceLayer2[]" >' +
'</div>' +
'<a href="javascript:;" class="" data-toggle="collapse" data-target="#cp-' + index1 + '-' + index2 + ' > .card-body" aria-expanded="true">' +
'<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>' +
'<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>' +
'</a>' +
'</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) {
var device_icon = "";
@ -513,19 +516,20 @@
device_icon = '<i class="fal fa-tint"></i>';
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>' +
'<div class=""><input type="checkbox" class="" name="selectedDeviceId[]" data-power-station-id="' + device.powerStationId + '" data-type="' + device.deviceType + '" value="' + device.deviceId + '">' + '</div>'
'</li>';
});
str += '</ul>' +
'</li>';
});
str += '</ul>';
str += '</div>';
str += '</div>';
str += '</div>';
});
str += '</div>';
str += '</div>';
});
$('#js_list_accordion').append(str);