@{ ViewData["MainNum"] = "4"; ViewData["SubNum"] = "5"; ViewData["Title"] = "AED裝置設定"; } <ol class="breadcrumb page-breadcrumb"> <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li> <li class="breadcrumb-item active">AED裝置設定</li> <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li> </ol> <div class="row"> <div class="col-12"> <div id="panel-5" class="panel"> <div class="panel-container show"> <div class="panel-content"> <div class="subheader"> <h1 class="subheader-title"> <span>AED裝置設定</span> </h1> </div> <div class="row mb-3 d-flex align-items-center px-3 justify-content-between"> <div class="pr-3 "> <div class="btn-group btn-group-md" id="Buildinglist"> @*<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2 mr-2">123</button>*@ </div> </div> </div> <div class="row mb-3 d-flex align-items-center px-3 justify-content-between"> <div class="pr-3 "> <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AllFloor()">全選</button> </div> <div class="pr-3 row col"> <div class="frame-wrap" id="floorlist"> </div> </div> </div> <div class="row mb-3 d-flex align-items-center px-3"> <div class="card border mb-g w-100 mb-5" id="menucard"> <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between"> <div class="card-title font-weight-bold">AED裝置設定</div> <div class="text-right "> <button type="button" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" onclick="ExportExcel()"><span class="fal fa-file-excel mr-1"></span> 匯出Excel</button> </div> </div> <div class="card-body"> <div class="w-100"> <div class="col-12"> <table id="RescueDeviceTable" class="table table-bordered table-hover m-0 text-center"> <thead class="thead-themed"> <tr> <th>樓層</th> <th>設備編號</th> <th>位置</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="FireExtinguisher-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-dialog-centered " role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"> </h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times"></i></span> </button> </div> <div class="modal-body"> <form id="FireExtinguisher-form"> <div class="row"> <div class="form-group col-12"> <label class="form-label" for="FireExtinguisher_location_modal"><span class="text-danger">*</span>位置</label> <input class="form-control" id="FireExtinguisher_location_modal" /> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" onclick="SaveFireExtinguisher()">儲存</button> </div> </div> </div> </div> @section Scripts { <script> var SelectBuild; var SelectFloorList = new Array(0); var AllFloorList = new Array(0); var FireExtinguisherTable; var selectAllFloor = false; var SelectDevice; $(function () { FireExtinguisherTable = $("#RescueDeviceTable").DataTable({ "columns": [ { "data": "floor_name" }, { "data": "rescue_device_id" }, { "data": "location" }, ], 'createdRow': function (row, data, dataIndex) { $(row).attr('guid', data.rescue_device_guid); }, "ajax": { "url": "/api/RescueDevice/RescueDeviceTable", "type": "POST", "data": function (d) { d.build = SelectBuild, d.floors = SelectFloorList, d.kind = 1 }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data.data; if (data == null || data.length == 0) { this.data = []; } return data; } } }); GetBuild(); }); function GetBuild() { var url = "/api/RescueDevice/BuildInfoList"; var send_data = {}; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#Buildinglist').empty(); var buildstr = ""; $.each(rel.data, function (index, val) { if (index == 0) { SelectBuild = val.value; buildstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\' ,this)">' + val.name + '</button>'; } else { buildstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\',this)" >' + val.name + '</button>'; } }); $('#Buildinglist').append(buildstr); $('#Buildinglist').find('.btn-success').trigger('click'); return; } }, 'json'); } function SelectBulid(build, e) { SelectBuild = build; if ($("#Buildinglist").find('.btn').hasClass("btn-success")) { $("#Buildinglist").find('.btn').removeClass("btn-success").addClass("btn-secondary"); } $(e).removeClass("btn-secondary").addClass("btn-success"); //$('#menucard').find('.card-title').html(e.innerText + "-選單"); GetFloorByBuild(SelectBuild); } function GetFloorByBuild(build) { var url = "/api/RescueDevice/GetFloorByBuild"; var send_data = { Building: build }; $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } return; } else { $('#floorlist').empty(); SelectFloorList = []; AllFloorList = []; var floorstr = ""; $.each(rel.data, function (index, val) { AllFloorList.push(val.value); floorstr += '<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2 mr-2" onclick="SelectFloor(\'' + val.value + '\',this)" >' + val.name + '</button>'; }); $('#floorlist').append(floorstr); AllFloor(); //$('#floorlist').find('.btn-success').trigger('click'); return; } }, 'json'); } function SelectFloor(floorguid, e) { if ($(e).hasClass("btn-outline-success")) { $(e).removeClass("btn-outline-success").addClass("btn-success"); SelectFloorList.push(floorguid); } else if ($(e).hasClass("btn-success")) { $(e).removeClass("btn-success").addClass("btn-outline-success"); var a = SelectFloorList.filter(function (n, i) { if (n === floorguid) { SelectFloorList.splice(i, 1); } }); } FireExtinguisherTable.ajax.reload(); } function AllFloor() { if (selectAllFloor) { SelectFloorList = []; $('#floorlist').find('.btn').removeClass('btn-success').addClass("btn-outline-success"); selectAllFloor = false; } else { SelectFloorList = AllFloorList; $('#floorlist').find('.btn').removeClass('btn-outline-success').addClass("btn-success"); selectAllFloor = true; } FireExtinguisherTable.ajax.reload(); } function ExportExcel() { var send_data = { build: SelectBuild, buildname: $('#Buildinglist').find('.btn-success').html(), kind: 1 }; var url = "/RescueDevice/ExportExcel"; window.location = "/RescueDevice/ExportExcel?post=" + JSON.stringify(send_data); return; } </script> }