@{ ViewData["MainNum"] = "1"; ViewData["SubNum"] = "2"; ViewData["Title"] = "區域設定"; } <ol class="breadcrumb page-breadcrumb"> <li class="breadcrumb-item"><a href="javascript:void(0);">區域資料管理</a></li> <li class="breadcrumb-item active">區域基本資料</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-xl-12"> <div id="panel-5" class="panel"> <div class="panel-container show"> <div class="panel-content"> @*<div class="subheader"> <h1 class="subheader-title"> <img src="img/asus.png" id="company-logo"><span id="company-name">華碩電腦</span> </h1> </div>*@ <ul class="nav nav-tabs" id="tabs" role="tablist"> <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab-build-info" role="tab"><span class="hidden-sm-down ml-1">區域基本資料</span></a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-build-floor" role="tab"><span class="hidden-sm-down ml-1">樓層設定</span></a></li> </ul> <div class="tab-content p-3"> <div class="tab-pane fade show active" id="tab-build-info" role="tabpanel" aria-labelledby="tab-build-info"> @Html.Partial("_BuildInfo") </div> <div class="tab-pane fade" id="tab-build-floor" role="tabpanel" aria-labelledby="tab-build-floor"> @Html.Partial("_BuildFloor") </div> </div> </div> </div> </div> </div> </div> @section Scripts { <script> var buildInfoTable, buildFloorTable; var selected_build_guid; var selected_build_guid_top = ""; var selected_build_guid_top_name; var selected_floor_guid = ""; let input3Dfile = null; //#region 區域基本資料 document ready $(function () { //#region 區域基本資料 DataTable buildInfoTable = $("#buildInfo_table").DataTable({ "rowReorder": { "dataSrc": "priority" }, "columns": [ { "data": "building_tag", "render": function (data, type, row, meta) { return meta.row + 1; } }, { "data": "priority", "className": "reorder", "visible": false }, { "data": "full_name" }, { "data": "ip_address" }, { "data": "ip_port" }, { "data": "floorNum" }, { "data": "created_at" }, { "data": null, "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>' } ], //"order": [[2, "desc"]], 'createdRow': function (row, data, dataIndex) { $(row).attr('data-guid', data.building_tag); }, "ajax": { "url": "/BuildInfo/BuildInfoList", "type": "POST", "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data; if (data == null || data.length == 0) { this.data = []; } //樓層設定上方選單 $("#BuildList").empty(); $.each(data, function (key, value) { $("#BuildList").append(`<button type="button" class="btn btn-outline-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_tag}" onclick="clickBuilding('${value.building_tag}')">${value.full_name}</button>`); @*if (key == 0) { selected_build_guid_top_name = value.full_name; $("#BuildList").append(`<button type="button" class="btn btn-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_tag}" onclick="clickBuilding('${value.building_tag}')">${value.full_name}</button>`); } else { $("#BuildList").append(`<button type="button" class="btn btn-outline-success waves-effect waves-themed ml-2 mb-2 btn-station" id="${value.building_tag}" onclick="clickBuilding('${value.building_tag}')">${value.full_name}</button>`); }*@ }); return data; } } }); //#endregion buildInfoTable.on("row-reorder", function (e, diff, edit) { var exchangeList = []; for (var i = 0, len = diff.length; i < len; i++) { var rowData = buildInfoTable.row(diff[i].node).data(); var obj = { building_tag: rowData.building_tag, priority: diff[i].newData } exchangeList.push(obj); } var url = "/BuildInfo/ChangeBuildInfoPriority"; var send_data = { BuildInfoPriorities: exchangeList } $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); buildInfoTable.ajax.reload(null, false); } }, "json"); }); //#region 修改區域基本資料 $('#buildInfo_table').on("click", "button.edit-btn", function () { selected_build_guid = $(this).parents('tr').attr('data-guid'); $('#build-modal .modal-title').html("區域基本資料 - 修改"); $('#build_name_tag').val(selected_build_guid); $('#build_name_tag').prop('disabled', true); $("#save-building-btn").attr("onClick", "EditBuild()"); $('#build_name_modal').val($(this).parents('tr')[0].children[1].innerText); $('#ip_address_modal').val($(this).parents('tr')[0].children[2].innerText); $('#ip_port_modal').val($(this).parents('tr')[0].children[3].innerText); $('#build-modal').modal(); }); //#endregion //#region 刪除區域基本資料 $('#buildInfo_table').on("click", "button.del-btn", function () { selected_build_guid = $(this).parents('tr').attr('data-guid'); Swal.fire( { title: "刪除", text: "你確定是否刪除此筆資料?", type: "warning", icon: 'warning', showCancelButton: true, confirmButtonText: "是", cancelButtonText: "否" }).then(function (result) { if (result.value) { var url = "/BuildInfo/DeleteOneBuild/"; var send_data = { tag: selected_build_guid } $.post(url, send_data, function (rel) { if (rel.code == "9999") { toast_error(rel.msg); } else if (rel.code == "9997") { var htnl = rel.msg + "<br>" Swal.fire( { title: "刪除失敗", icon: 'warning', html: htnl, }); } else { toast_ok(rel.msg); buildInfoTable.ajax.reload(null, false); } }, 'json'); } }); }); //#endregion }); //#endregion //#region 新增區域基本資料 function AddBuild() { selected_build_guid = "0"; BuildInfoValidate.resetForm(); $("#save-building-btn").attr("onClick", "SaveBuild()"); $("#build-modal .modal-title").html("區域基本資料 - 新增"); $('#build_name_tag').prop('disabled', false); $("#build-form").trigger("reset"); $("#build-modal").modal(); } //#endregion //驗證是否有上傳 jQuery.validator.addMethod("fileUpload", function (value, element) { var str = value; var result = false; if ($("#3d_file_modal")[0].files.length > 0) { result = true; } else { result = false; } return result; }, "請選擇檔案"); //#region 區域表單驗證 var BuildInfoValidate = $("#build-form").validate({ rules: { build_name_modal: { required: true, maxlength: 50, filterspace: true }, ip_address_modal: { required: true, maxlength: 50, filterspace: true }, ip_port_modal: { required: true, maxlength: 50, filterspace: true }, build_file_3d_modal: { required: true, extension: "nwc|nwd" } }, messages: { build_file_3d_modal: "File must be nwc, nwd" } }); //#region 儲存區域基本資料 function SaveBuild() { if ($("#build-form").valid()) { $("#save-building-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true); if(input3Dfile != undefined && input3Dfile != null) {//上傳3d檔案至forge平台 var file = input3Dfile; var formData = new FormData(); formData.append('fileToUpload', file); formData.append('bucketKey', "ta3hqsffzqbnouxkpldkuksew4sj21w5-bims_models");//forge上傳平台-資料夾 $.ajax({ url: '/api/forge/oss/objects', data: formData, processData: false, contentType: false, type: 'POST', success: function (data) { var datas = data.split(","); var urn = datas[0]; let m3d_names = datas[1].split("."); translateObject(urn);// forge轉換模型 var url = "/BuildInfo/SaveBuildInfo"; var formData2 = new FormData(); formData2.append("building_tag", $('#build_name_tag').val()); formData2.append("Full_name", $('#build_name_modal').val()); formData2.append("Ip_address", $('#ip_address_modal').val()); formData2.append("Ip_port", $('#ip_port_modal').val()); maps = $('#build_file_3d_modal')[0].files; if (maps.length > 0) { var file_names = maps[0].name.split("."); formData2.append("Map3dFile", maps[0]); } formData2.append("urn_3D", urn); formData2.append("orgName_3D", m3d_names[0]); formData2.append("extName_3D", m3d_names[1]); $.ajax({ type: "POST", url: url, data: formData2, cache: false, contentType: false, processData: false, success: function (rel) { $("#save-building-btn").html('確定').attr("disabled", false); if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); buildInfoTable.ajax.reload(null, false); $('#build-modal').modal('hide'); return; } }, fail: function (xhr, status, error) { $("#save-building-btn").html('確定').attr("disabled", false); } }); }, fail: function (xhr, status, error) { toast_error("上傳3d模型檔失敗!"); $("#save-building-btn").html('確定').attr("disabled", false); } }); } else { toast_warning("無3d模型檔案!"); var url = "/BuildInfo/SaveBuildInfo"; var formData = new FormData(); formData.append("building_tag", $('#build_name_tag').val()); formData.append("Full_name", $('#build_name_modal').val()); formData.append("Ip_address", $('#ip_address_modal').val()); formData.append("Ip_port", $('#ip_port_modal').val()); maps = $('#build_file_3d_modal')[0].files; if (maps.length > 0) { var file_names = maps[0].name.split("."); formData.append("Map3dFile", maps[0]); formData.append("orgName_3D", file_names[0]); formData.append("extName_3D", file_names[1]); } $.ajax({ type: "POST", url: url, data: formData, cache: false, contentType: false, processData: false, success: function (rel) { $("#save-building-btn").html('確定').attr("disabled", false); if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); buildInfoTable.ajax.reload(null, false); $('#build-modal').modal('hide'); return; } }, fail: function (xhr, status, error) { $("#save-building-btn").html('確定').attr("disabled", false); } }); } //var url = "/BuildInfo/SaveBuildInfo"; //var formData = new FormData(); //formData.append("building_tag", $('#build_name_tag').val()); //formData.append("Full_name", $('#build_name_modal').val()); //formData.append("Ip_address", $('#ip_address_modal').val()); //formData.append("Ip_port", $('#ip_port_modal').val()); //maps = $('#build_file_3d_modal')[0].files; //if (maps.length > 0) { // var file_names = maps[0].name.split("."); // formData.append("Map3dFile", maps[0]); // formData.append("orgName_3D", file_names[0]); // formData.append("extName_3D", file_names[1]); //} //$.ajax({ // type: "POST", // url: url, // data: formData, // cache: false, // contentType: false, // processData: false, // success: function (rel) { // $("#save-building-btn").html('確定').attr("disabled", false); // if (rel.code != "0000") { // if (rel.code == "9999") { // toast_error(rel.msg); // } // else { // toast_warning(rel.msg); // } // return; // } // else { // toast_ok(rel.msg); // buildInfoTable.ajax.reload(null, false); // $('#build-modal').modal('hide'); // return; // } // }, // fail: function (xhr, status, error) { // $("#save-building-btn").html('確定').attr("disabled", false); // } //}); } } function EditBuild() { if ($("#build-form").valid()) { $("#save-building-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true); if (input3Dfile != undefined && input3Dfile != null) {//上傳3d檔案至forge平台 var file = input3Dfile; var formData = new FormData(); formData.append('fileToUpload', file); formData.append('bucketKey', "ta3hqsffzqbnouxkpldkuksew4sj21w5-bims_models");//forge上傳平台-資料夾 $.ajax({ url: '/api/forge/oss/objects', data: formData, processData: false, contentType: false, type: 'POST', success: function (data) { var datas = data.split(","); var urn = datas[0]; let m3d_names = datas[1].split("."); translateObject(urn);// forge轉換模型 var url = "/BuildInfo/EditBuildInfo"; var formData2 = new FormData(); formData2.append("building_tag", selected_build_guid); formData2.append("Full_name", $('#build_name_modal').val()); formData2.append("Ip_address", $('#ip_address_modal').val()); formData2.append("Ip_port", $('#ip_port_modal').val()); maps = $('#build_file_3d_modal')[0].files; if (maps.length > 0) { var file_names = maps[0].name.split("."); formData2.append("Map3dFile", maps[0]); //formData2.append("orgName_3D", file_names[0]); //formData2.append("extName_3D", file_names[1]); } formData2.append("urn_3D", urn); formData2.append("orgName_3D", m3d_names[0]); formData2.append("extName_3D", m3d_names[1]); $.ajax({ type: "POST", url: url, data: formData2, cache: false, contentType: false, processData: false, success: function (rel) { $("#save-building-btn").html('確定').attr("disabled", false); if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); buildInfoTable.ajax.reload(null, false); $('#build-modal').modal('hide'); return; } }, fail: function (xhr, status, error) { $("#save-building-btn").html('確定').attr("disabled", false); } }); }, fail: function (xhr, status, error) { toast_error("上傳3d模型檔失敗!"); $("#save-building-btn").html('確定').attr("disabled", false); } }); } else { var url = "/BuildInfo/EditBuildInfo"; var formData = new FormData(); formData.append("building_tag", selected_build_guid); formData.append("Full_name", $('#build_name_modal').val()); formData.append("Ip_address", $('#ip_address_modal').val()); formData.append("Ip_port", $('#ip_port_modal').val()); maps = $('#build_file_3d_modal')[0].files; if (maps.length > 0) { var file_names = maps[0].name.split("."); formData.append("Map3dFile", maps[0]); formData.append("orgName_3D", file_names[0]); formData.append("extName_3D", file_names[1]); } $.ajax({ type: "POST", url: url, data: formData, cache: false, contentType: false, processData: false, success: function (rel) { $("#save-building-btn").html('確定').attr("disabled", false); if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); buildInfoTable.ajax.reload(null, false); $('#build-modal').modal('hide'); return; } }, fail: function (xhr, status, error) { $("#save-building-btn").html('確定').attr("disabled", false); } }); } //var url = "/BuildInfo/EditBuildInfo"; //var formData = new FormData(); //formData.append("building_tag", selected_build_guid); //formData.append("Full_name", $('#build_name_modal').val()); //formData.append("Ip_address", $('#ip_address_modal').val()); //formData.append("Ip_port", $('#ip_port_modal').val()); //maps = $('#build_file_3d_modal')[0].files; //if (maps.length > 0) { // var file_names = maps[0].name.split("."); // formData.append("Map3dFile", maps[0]); // formData.append("orgName_3D", file_names[0]); // formData.append("extName_3D", file_names[1]); //} //$.ajax({ // type: "POST", // url: url, // data: formData, // cache: false, // contentType: false, // processData: false, // success: function (rel) { // $("#save-building-btn").html('確定').attr("disabled", false); // if (rel.code != "0000") { // if (rel.code == "9999") { // toast_error(rel.msg); // } // else { // toast_warning(rel.msg); // } // return; // } // else { // toast_ok(rel.msg); // buildInfoTable.ajax.reload(null, false); // $('#build-modal').modal('hide'); // return; // } // }, // fail: function (xhr, status, error) { // $("#save-building-btn").html('確定').attr("disabled", false); // } //}); } } //#endregion //#region 樓層設定 document ready $(function () { $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var target = $(e.target).attr("href") // activated tab if (target == "#tab-build-floor") { $("#BuildList").find("button").first().click(); } }); //#region 樓層設定 DataTable buildFloorTable = $("#buildFloor_table").DataTable({ "rowReorder": { "dataSrc": "priority" }, "pageLength": 50, "columns": [ { "data": null, "render": function (data, type, row, meta) { return meta.row + 1; } }, { "data": "priority", "className": "reorder", "visible": false }, { "data": null, "render": function (data, type, row, meta) { return selected_build_guid_top_name; } }, { "data": "full_name" }, { "data": "initMapName" }, { "data": "created_at" }, { "data": null, "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>' } ], @*"order": [[1, "desc"]],*@ 'createdRow': function (row, data, dataIndex) { $(row).attr('data-guid', data.floor_guid); }, "ajax": { "url": "/BuildInfo/BuildFloorList", "type": "POST", "data": function (d) { d.build_tag = selected_build_guid_top; }, "dataSrc": function (rel) { if (rel.code == "9999") { toast_error(rel.msg); return; } data = rel.data; if (data == null || data.length == 0) { this.data = []; } return data; } } }); //#endregion //#region 修改樓層排序 buildFloorTable.on("row-reorder", function (e, diff, edit) { var exchangeList = []; for (var i = 0, len = diff.length; i < len; i++) { var rowData = buildFloorTable.row(diff[i].node).data(); var obj = { floor_guid: rowData.floor_guid, priority: diff[i].newData } exchangeList.push(obj); } var url = "/BuildInfo/ChangeFloorPriority"; var send_data = { FloorPriorities: exchangeList } $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); buildFloorTable.ajax.reload(null, false); } }, "json"); }); //#endregion //#region 修改樓層設定 $('#buildFloor_table').on("click", "button.edit-btn", function () { selected_floor_guid = $(this).parents('tr').attr('data-guid'); $('#floor-modal .modal-title').html("樓層設定 - 修改"); //取得單一樓層設定 var url = "/BuildInfo/GetOneBuildFloor"; var send_data = { guid: selected_floor_guid } $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { $("#BuildName").html(selected_build_guid_top_name); $("#floor_name_modal").val(rel.data.full_name); @*$("#map_file_preview_modal").attr("data-original", rel.data.mapUrl);*@ $('#floor-modal').modal(); } }, 'json'); }); //#endregion //#region 刪除樓層設定 $('#buildFloor_table').on("click", "button.del-btn", function () { selected_floor_guid = $(this).parents('tr').attr('data-guid'); Swal.fire( { title: "刪除", text: "你確定是否刪除此筆資料?", type: "warning", icon: 'warning', showCancelButton: true, confirmButtonText: "是", cancelButtonText: "否" }).then(function (result) { if (result.value) { //取得單一系統管理員 var url = "/BuildInfo/DeleteOneFloor/"; var send_data = { guid: selected_floor_guid } $.post(url, send_data, function (rel) { if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else if (rel.code == "9997") { var htnl = rel.msg + "<br>" + rel.data Swal.fire( { title: "刪除失敗", icon: 'warning', html: htnl, }); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); floorTableReload(); return; } }, 'json'); } }); }); //#endregion }); //#endregion //#region 樓層DataTable Reload function floorTableReload() { buildFloorTable.ajax.reload(null, false); } //#endregion //#region 樓層設定 - 選擇區域 function clickBuilding(guid) { selected_build_guid_top = guid; selected_build_guid_top_name = $(`#${guid}`).text(); if ($('#BuildList').find('.btn-station').hasClass("btn-success")) { $('#BuildList').find('.btn-station').removeClass("btn-success").addClass("btn-outline-success"); } $(`#${guid}`).removeClass("btn-outline-success").addClass("btn-success"); floorTableReload(); } //#endregion //#region 新增樓層設定 function AddFloor() { selected_floor_guid = ""; FloorValidate.resetForm(); $("#floor-modal .modal-title").html("樓層設定 - 新增"); $("#floor-form").trigger("reset"); $("#BuildName").html(selected_build_guid_top_name); $("#floor-modal").modal(); } //#endregion //#region 樓層設定表單驗證 var FloorValidate = $("#floor-form").validate({ rules: { floor_name_modal: { required: true, maxlength: 50, filterspace: true }, map_file_modal: { accept: "image/svg+xml" }, //file_3d_modal: { // accept: "image/svg+xml" //} } }); //驗證是否有上傳 jQuery.validator.addMethod("fileUpload", function (value, element) { var str = value; var result = false; if ($("#map_file_modal")[0].files.length > 0) { result = true; } else { result = false; } return result; }, "請選擇檔案"); //#endregion //#region 儲存樓層設定 function SaveFloor() { if ($("#floor-form").valid()) { $("#save-floor-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true); var url = "/BuildInfo/SaveBuildFloor"; var formData = new FormData(); maps = $('#floor_map_file_modal')[0].files; //maps3D = $('#floor_file_3d_modal')[0].files; formData.append("Floor_guid", selected_floor_guid); formData.append("building_tag", selected_build_guid_top); formData.append("Full_name", $('#floor_name_modal').val()); if (maps.length > 0) { var file_names = maps[0].name.split(".") formData.append("MapFile", maps[0]) formData.append("InitMapName", maps[0].name.replace("." + file_names[file_names.length - 1], "")); } //if(maps3D.length > 0) { // var file_names = maps3D[0].name.split(".") // formData.append("orgName_3D", file_names[0]); // formData.append("extName_3D", file_names[1]); //} $.ajax({ type: "POST", url: url, data: formData, cache: false, contentType: false, processData: false, success: function (rel) { $("#save-floor-btn").html('確定').attr("disabled", false); if (rel.code != "0000") { if (rel.code == "9999") { toast_error(rel.msg); } else { toast_warning(rel.msg); } return; } else { toast_ok(rel.msg); floorTableReload(); $('#floor-modal').modal('hide'); return; } }, fail: function (jqXHR, textStatus, errorThrown) { $("#save-floor-btn").html('確定').attr("disabled", false); } }); } } //#endregion //#region 變更樓層平面圖 3d模型 function changeImage(input) { $(`#map_file_preview_modal`).attr("data-src", window.URL.createObjectURL(input.files[0])); input3Dfile = input.files[0]; } //#endregion //#region 翻譯模型 function translateObject(urn) { $("#forgeViewer").empty(); //if (node == null) node = $('#appBuckets').jstree(true).get_selected(true)[0]; var bucketKey = "ta3hqsffzqbnouxkpldkuksew4sj21w5-bims_models";//forge上傳平台-資料夾 var objectKey = urn; jQuery.post({ url: '/api/forge/modelderivative/jobs', contentType: 'application/json', data: JSON.stringify({ 'bucketKey': bucketKey, 'objectName': objectKey }), success: function (res) { //$("#forgeViewer").html('Translation started! Please try again in a moment.'); }, }); } //#endregion </script> }