[區域選單管理] 左右邊預設頁面程序建置

This commit is contained in:
dev01 2022-10-19 09:41:03 +08:00
parent c480e9ef3d
commit 240dc6ec25
2 changed files with 286 additions and 130 deletions

View File

@ -131,6 +131,11 @@
<select class="form-control" id="build_menu_sub_modal"> <select class="form-control" id="build_menu_sub_modal">
</select> </select>
</div> </div>
<div class="col-12" id="build_menu_position_l_div">
<label class="mb-0 t-gray">左邊區塊</label>
<hr class="mt-1" />
<div class="form-group col-12"> <div class="form-group col-12">
<label class="form-label"><span class="text-danger">*</span>預設頁面</label> <label class="form-label"><span class="text-danger">*</span>預設頁面</label>
<div class="row" id="build_menu_drawing_modal"> <div class="row" id="build_menu_drawing_modal">
@ -149,7 +154,19 @@
<div class="col" id="drawing_1_div" style="display: none;"> <div class="col" id="drawing_1_div" style="display: none;">
<input type="radio" name="drawing" id="drawing_1" value="1"> <input type="radio" name="drawing" id="drawing_1" value="1">
<label for="drawing_1"> <label for="drawing_1">
樓層平面圖 2D
</label>
</div>
<div class="col">
<input type="radio" name="drawing" id="drawing_3" value="3">
<label for="drawing_3">
3D
</label>
</div>
<div class="col">
<input type="radio" name="drawing" id="drawing_5" value="5">
<label for="drawing_5">
彈出URL
</label> </label>
</div> </div>
</div> </div>
@ -164,6 +181,10 @@
<label class="form-label" for="build_menu_systemurl_modal"><span class="text-danger">*</span>系統圖URL</label> <label class="form-label" for="build_menu_systemurl_modal"><span class="text-danger">*</span>系統圖URL</label>
<input type="text" id="build_menu_systemurl_modal" class="form-control" name="build_menu_systemurl_modal"> <input type="text" id="build_menu_systemurl_modal" class="form-control" name="build_menu_systemurl_modal">
</div> </div>
<div class="form-group col-12" id="build_menu_blankurl_modal_div" name="drawing_extend">
<label class="form-label" for="build_menu_blankurl_modal"><span class="text-danger">*</span>彈出URL</label>
<input type="text" id="build_menu_blankurl_modal" class="form-control" name="build_menu_blankurl_modal">
</div>
<div class="form-group col-12" id="build_menu_icon_click_onoff_modal_div" name="drawing_extend"> <div class="form-group col-12" id="build_menu_icon_click_onoff_modal_div" name="drawing_extend">
<label class="form-label">昇位圖 - 詳細資料設定</label> <label class="form-label">昇位圖 - 詳細資料設定</label>
@*<div class="row"> @*<div class="row">
@ -222,12 +243,134 @@
<label class="form-label" for="build_menu_riser_diagram_url_modal">昇位圖 URL</label><br> <label class="form-label" for="build_menu_riser_diagram_url_modal">昇位圖 URL</label><br>
<input type="text" id="build_menu_riser_diagram_url_modal" class="form-control"> <input type="text" id="build_menu_riser_diagram_url_modal" class="form-control">
</div> </div>
<div class="form-group col-6" id="build_menu_planimetric_floor_modal_div"> <div class="form-group col-6" id="build_menu_planimetric_floor_modal_div">
<label class="form-label" for="build_menu_planimetric_floor_modal"><span class="text-danger">*</span>平面圖預設樓層</label> <label class="form-label" for="build_menu_planimetric_floor_modal"><span class="text-danger">*</span>平面圖預設樓層</label>
<select class="form-control" id="build_menu_planimetric_floor_modal"> <select class="form-control" id="build_menu_planimetric_floor_modal">
</select> </select>
</div> </div>
</div>
<div class="col-12 mt-3" id="build_menu_position_r_div">
<label class="mb-0 t-gray">右邊區塊</label>
<hr class="mt-1" />
<div class="form-group col-12">
<label class="form-label"><span class="text-danger">*</span>預設頁面</label>
<div class="row" id="build_menu_drawing_modal_r">
<div class="col">
<input type="radio" name="drawing_r" id="drawing_4_r" value="4" checked>
<label for="drawing_4_r">
昇位圖
</label>
</div>
<div class="col">
<input type="radio" name="drawing_r" id="drawing_2_r" value="2">
<label for="drawing_2_r">
系統圖
</label>
</div>
<div class="col" id="drawing_1_div_r" style="display: none;">
<input type="radio" name="drawing_r" id="drawing_1_r" value="1">
<label for="drawing_1_r">
2D
</label>
</div>
<div class="col">
<input type="radio" name="drawing_r" id="drawing_3_r" value="3">
<label for="drawing_3_r">
3D
</label>
</div>
<div class="col">
<input type="radio" name="drawing_r" id="drawing_5_r" value="5">
<label for="drawing_5_r">
彈出URL
</label>
</div>
</div>
</div>
<div class="form-group col-12" id="" name="drawing_extend_r">
<div class="col-12 mb-2 custom-control custom-checkbox align-content-center">
<input type="checkbox" class="custom-control-input" name="planimetric_click_r" id="planimetric_click_r" value="1" />
<label class="custom-control-label" for="planimetric_click_r">是否顯示平面圖</label>
</div>
</div>
<div class="form-group col-12" id="build_menu_systemurl_modal_div_r" name="drawing_extend">
<label class="form-label" for="build_menu_systemurl_modal_r"><span class="text-danger">*</span>系統圖URL</label>
<input type="text" id="build_menu_systemurl_modal_r" class="form-control" name="build_menu_systemurl_modal_r">
</div>
<div class="form-group col-12" id="build_menu_blankurl_modal_div_r" name="drawing_extend_r">
<label class="form-label" for="build_menu_blankurl_modal_r"><span class="text-danger">*</span>彈出URL</label>
<input type="text" id="build_menu_blankurl_modal_r" class="form-control" name="build_menu_blankurl_modal_r">
</div>
<div class="form-group col-12" id="build_menu_icon_click_onoff_modal_div_r" name="drawing_extend_r">
<label class="form-label">昇位圖 - 詳細資料設定</label>
@*<div class="row">
<div class="col">
<input type="radio" name="icon_click_onoff" id="icon_click_on" value="1">
<label for="icon_click_on">
點擊開關
</label>
</div>
<div class="col">
<input type="radio" name="icon_click_onoff" id="icon_click_off" value="0" checked>
<label for="icon_click_off">
彈出視窗
</label>
</div>
</div>*@
<div class="row">
<div class="col" style="display:none">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="icon_click[]_r" id="icon_click_switch_r" value="2">
<label class="custom-control-label" for="icon_click_switch_r">點擊開關</label>
</div>
</div>
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="icon_click[]_r" id="icon_click_url_r" value="1">
<label class="custom-control-label" for="icon_click_url_r">顯示詳細資料</label>
</div>
</div>
</div>
</div>
<div class="form-group col-12" id="build_menu_icon_click_url_modal_div_r" name="drawing_extend_r">
<label class="form-label" for="build_menu_icon_click_url_modal_r">詳細資料 URL</label><br>
<button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AddTagIntoClickUrl('device_building_tag')">+/[device_building_tag]</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AddTagIntoClickUrl('device_system_tag')">+/[device_system_tag]</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AddTagIntoClickUrl('device_floor_tag')">+/[device_floor_tag]</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AddTagIntoClickUrl('device_name_tag')">+/[device_name_tag]</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AddTagIntoClickUrl('device_serial_tag')">+/[device_serial_tag]</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AddTagIntoClickUrl('tag_name')">+/[tag_name]</button>
<input type="text" id="build_menu_icon_click_url_modal_r" class="form-control">
</div>
<div class="form-group col-12" id="build_menu_icon_click_url_width_height_modal_div_r">
<label class="form-label">詳細資料 顯示視窗設定</label><br>
<div class="row">
<div class="col-6 form-group">
<label class="form-label" for="build_menu_icon_click_url_width_modal_r">寬(單位px)</label>
<input type="number" step="1" id="build_menu_icon_click_url_width_modal_r" class="form-control">
</div>
<div class="col-6 form-group">
<label class="form-label" for="build_menu_icon_click_url_height_modal_r">高(單位px)</label>
<input type="number" step="1" id="build_menu_icon_click_url_height_modal_r" class="form-control">
</div>
</div>
</div>
<div class="form-group col-12" id="build_menu_riser_diagram_url_modal_div_r" style="display: none">
<label class="form-label" for="build_menu_riser_diagram_url_modal_r">昇位圖 URL</label><br>
<input type="text" id="build_menu_riser_diagram_url_modal_r" class="form-control">
</div>
<div class="form-group col-6" id="build_menu_planimetric_floor_modal_div_r">
<label class="form-label" for="build_menu_planimetric_floor_modal_r"><span class="text-danger">*</span>平面圖預設樓層</label>
<select class="form-control" id="build_menu_planimetric_floor_modal_r">
</select>
</div>
</div>
</div> </div>
</form> </form>
</div> </div>
@ -589,16 +732,17 @@
$.each($("input[name='icon_click[]']"), function (index, item) { $.each($("input[name='icon_click[]']"), function (index, item) {
$(this).prop("checked", false); $(this).prop("checked", false);
}); });
$('#drawing_4').trigger('change'); changebuild_menu_drawing_modal();
GetSubList($('#build_menu_main_modal').val()); GetSubList($('#build_menu_main_modal').val());
GetFloorInSubSystem(); GetFloorInSubSystem();
$('#planimetric_click').attr("disabled", false); $('#planimetric_click').attr("disabled", false);
$('#build-menu-modal').modal(); $('#build-menu-modal').modal();
} }
//#endregion //#endregionplanimetric_click
//#region 修改選擇顯示頁面總類 //#region 修改選擇顯示頁面總類
$('#build_menu_drawing_modal').on("change", $("input[name='drawing']"), function () { $('#build-menu-form').on("change", "input[name^=drawing]", function () {
changebuild_menu_drawing_modal(); changebuild_menu_drawing_modal(this);
}); });
//#endregion //#endregion
$('#build_menu_icon_click_onoff_modal_div').on("click", "input[type=checkbox]", function () { $('#build_menu_icon_click_onoff_modal_div').on("click", "input[type=checkbox]", function () {
@ -730,39 +874,40 @@
}, 'json'); }, 'json');
}); });
//#endregion //#endregion
function changebuild_menu_drawing_modal() { function changebuild_menu_drawing_modal(selector = "input[name^='drawing']:checked") {
if ($('input[name="drawing"]:checked').val() == 2) {
$('#planimetric_click').attr("disabled", false);
$('#build_menu_icon_click_onoff_modal_div').hide();
$('#build_menu_icon_click_url_modal_div').hide();
$('#build_menu_systemurl_modal_div').show();
@*$('#build_menu_riser_diagram_url_modal_div').hide();*@
$('#build_menu_icon_click_url_width_height_modal_div').hide();
$('#build_menu_planimetric_floor_modal_div').hide();
} else if ($('input[name="drawing"]:checked').val() == 4) {
$('#planimetric_click').attr("disabled", false);
$('#build_menu_systemurl_modal_div').hide();
$('#build_menu_icon_click_onoff_modal_div').show();
if ($("#icon_click_url").prop('checked')) {
$('#build_menu_icon_click_url_modal_div').show();
$('#build_menu_icon_click_url_width_height_modal_div').show();
}
else {
$('#build_menu_icon_click_url_modal_div').hide();
$('#build_menu_icon_click_url_width_height_modal_div').hide();
}
@*$('#build_menu_riser_diagram_url_modal_div').show();*@
$('#build_menu_planimetric_floor_modal_div').hide(); $(selector).each(function (index, value) {
} else if ($('input[name="drawing"]:checked').val() == 1) { let drawingParent = $(value).parents("[id^=build_menu_position]")
$('#planimetric_click').prop("checked", true).attr("disabled", true); $(drawingParent).find('[id^=build_menu_icon_click_onoff_modal_div]').hide();
$('#build_menu_systemurl_modal_div').hide(); $(drawingParent).find('[id^=build_menu_blankurl_modal_div]').hide();
$('#build_menu_icon_click_onoff_modal_div').hide(); $(drawingParent).find('[id^=build_menu_icon_click_url_modal_div]').hide();
$('#build_menu_icon_click_url_modal_div').hide(); $(drawingParent).find('[id^=build_menu_icon_click_url_width_height_modal_div]').hide();
@*$('#build_menu_riser_diagram_url_modal_div').hide();*@ $(drawingParent).find('[id^=build_menu_planimetric_floor_modal_div]').hide();
$('#build_menu_icon_click_url_width_height_modal_div').hide(); $(drawingParent).find('[id^=build_menu_systemurl_modal_div]').hide();
$('#build_menu_planimetric_floor_modal_div').show();
if ($(value).val() == 2) {
$(drawingParent).find('[id^=planimetric_click]').attr("disabled", false);
$(drawingParent).find('[id^=build_menu_systemurl_modal_div]').show();
} else if ($(value).val() == 4) {
$(drawingParent).find('[id^="planimetric_click"]').attr("disabled", false);
$(drawingParent).find('[id^=build_menu_icon_click_onoff_modal_div]').show();
if ($(drawingParent).find("[id^=icon_click_url]").prop('checked')) {
$(drawingParent).find('[id^=build_menu_icon_click_url_modal_div]').show();
$(drawingParent).find('[id^=build_menu_icon_click_url_width_height_modal_div]').show();
} }
} else if ($(value).val() == 1) {
$(drawingParent).find('[id^=planimetric_click]').prop("checked", true).attr("disabled", true);
$(drawingParent).find('[id^=build_menu_planimetric_floor_modal_div]').show();
} else if ($(value).val() == 5) {
$(drawingParent).find('[id^=planimetric_click]').prop("checked", false);
$(drawingParent).find('[id^=build_menu_blankurl_modal_div]').show();
} else if ($(value).val() == 3) {
$(drawingParent).find('[id^=planimetric_click]').prop("checked", false).attr("disabled", true);
}
})
} }
$('#buildMenu_table').on("click", "button.del-btn", function () { $('#buildMenu_table').on("click", "button.del-btn", function () {
var send_data = { var send_data = {
@ -969,19 +1114,21 @@
} }
else { else {
if (rel.data.length == 0) { if (rel.data.length == 0) {
$('#drawing_1_div').hide(); $('[id^=drawing_1_div]').hide();
$('#build_menu_planimetric_floor_modal_div').hide(); $('[id^=build_menu_planimetric_floor_modal_div]').hide();
} }
else { else {
$('#build_menu_planimetric_floor_modal').empty(); $('#build_menu_planimetric_floor_modal,#build_menu_planimetric_floor_modal_r').empty();
$.each(rel.data, function (index, val) { $.each(rel.data, function (index, val) {
$('#build_menu_planimetric_floor_modal').append($("<option />").val(val.value).text(val.name)); $('#build_menu_planimetric_floor_modal').append($("<option />").val(val.value).text(val.name));
$('#build_menu_planimetric_floor_modal_r').append($("<option />").val(val.value).text(val.name));
}); });
if (floor != null) { if (floor != null) {
$('#build_menu_planimetric_floor_modal').val(floor); $('#build_menu_planimetric_floor_modal').val(floor);
$('#build_menu_planimetric_floor_modal_r').val(floor);
} }
$('#drawing_1_div').show(); $('[id^=drawing_1_div]').show();
$('#build_menu_planimetric_floor_modal_div').show(); $('[id^=build_menu_planimetric_floor_modal_div]').show();
changebuild_menu_drawing_modal(); changebuild_menu_drawing_modal();
} }

View File

@ -3,6 +3,11 @@ for details on configuring this project to bundle and minify static web assets.
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
:root {
--bims-gray:#c3c3c3;
}
html { html {
font-size: 16px; font-size: 16px;
} }
@ -38,3 +43,7 @@ label.error {
.highcharts-credits { .highcharts-credits {
display: none; display: none;
} }
.t-gray {
color:var(--bims-gray) !important;
}