ibms-dome/Frontend/_graphManagement.html

238 lines
11 KiB
HTML

<main id="js-page-content" role="main" class="page-content">
<div class="row">
<div class="col-sm-12 col-xl-12">
<h1 class="p-2 mb-0">圖資管理</h1>
<div class="row bg-dark p-2">
<div class="col-auto">
<div class="btn-group">
<button type="button" class="btn btn-secondary waves-effect waves-themed">建築</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">電力管線</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">水力管線</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed">控制系統</button>
</div>
</div>
<div class="col-auto">
<div class="form-group">
<input type="text" id="simpleinput" class="form-control" placeholder="關鍵字">
</div>
</div>
<div class="col-auto">
<a href="#" class="btn btn-info">查詢</a>
</div>
<hr>
</div>
<div class="row bg-dark p-2 mb-5 align-items-center">
<div class="col-auto">
<a href="#" class="btn btn-info">全選</a>
</div>
<div class="col-auto">
<div class="frame-wrap">
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="defaultInline1">
<label class="custom-control-label" for="defaultInline1">施工詳圖</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="defaultInline2">
<label class="custom-control-label" for="defaultInline2">設備規範</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="defaultInline3">
<label class="custom-control-label" for="defaultInline3">工程介面圖說</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="defaultInline4">
<label class="custom-control-label" for="defaultInline4">門禁規範</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="defaultInline5">
<label class="custom-control-label" for="defaultInline5">監控平面圖</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="defaultInline6">
<label class="custom-control-label" for="defaultInline6">其它</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="mb-3">
<a href="#" class="btn btn-success" data-toggle="modal" data-target="#uploadPicture">+ 上傳</a>
</div>
<table class="table table-bordered table-striped text-center m-0">
<thead class="thead-themed">
<tr>
<th>圖號</th>
<th>圖名</th>
<th>原設計</th>
<th>竣工圖</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>TEST03</td>
<td>TEST03</td>
<td>A-01.dwg</td>
<td></td>
<td>
<a href="#" class="btn btn-info">編輯</a>
<a href="#" class="btn btn-danger">刪除</a>
</td>
</tr>
<tr>
<td>TEST06</td>
<td>TEST06</td>
<td>A-01.dwg</td>
<td>AS-01.dwg</td>
<td>
<a href="#" class="btn btn-info">編輯</a>
<a href="#" class="btn btn-danger">刪除</a>
</td>
</tr> -->
</tbody>
</table>
</div>
</div>
</div>
</main>
<!-- Upload Picture modal -->
<div class="modal fade" id="uploadPicture" tabindex="-1" role="dialog" aria-hidden="true">
<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>
<form id="uploadForm">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="picNum">圖號</label>
<input type="text" id="picNum" name="picNum" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="inpName">圖名</label>
<input type="text" id="inpName" name="inpName" class="form-control">
</div>
</div>
<div class="col-md-6 mt-3">
<div class="form-group">
<label class="form-label" for="example-select">主要類別</label>
<select class="form-control" id="example-select select2bs4">
<option>建築</option>
<option>電力控制</option>
<option>水力控制</option>
<option>系統控制</option>
</select>
</div>
</div>
<div class="col-md-6 mt-3">
<div class="form-group">
<label class="form-label" for="example-select">子類別</label>
<select class="form-control" id="example-select select2bs4">
<option>施工詳圖</option>
<option>設備規範</option>
<option>工程介面圖說</option>
<option>門禁規範</option>
<option>監控平面圖</option>
<option>其它</option>
</select>
</div>
</div>
<div class="col-md-12 mt-6">
<label>原設計</label>
</div>
<div class="col-md-12">
<input id="myFile" type="file" style="display:none" />
<label for="myFile" type="button" class="file-upload btn btn-info"
style="cursor : pointer ">上傳檔案</label>
<div id='forFile' class="col-sm-12 forimage mt-2 offset-3 p-0"></div>
</div>
<div class="col-md-12 mt-1">
<small>欲上傳之檔案名稱</small>
</div>
<div class="col-md-12 mt-3">
<label>竣工圖</label>
</div>
<div class="col-md-12">
<input id="myFile" type="file" style="display:none" />
<label for="myFile" type="button" class="file-upload btn btn-info"
style="cursor : pointer ">上傳檔案</label>
<div id='forFile' class="col-sm-12 forimage mt-2 offset-3 p-0"></div>
</div>
<div class="col-md-12 mt-1">
<small>欲上傳之檔案名稱</small>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
<button type="submit" class="btn btn-primary" id="accManSendBtn" e-prevent>儲存</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(function () {
initList();
})
function initList() {
let sendData = {
building_tag: pageAct.buiTag
}
objSendData.Data = sendData;
let url = baseApiUrl + "/GraphManage/GraManList";
function success(res) {
console.log(res);
let strHtml = ``;
$.each(res, function (index, val) {
strHtml = `<tr>
<td>${res.code}</td>
<td>${res.code}</td>
<td>${res.code}</td>
<td>${res.code}</td>
<td>
<a href="#" class="btn btn-info">編輯</a>
<a href="#" class="btn btn-danger">刪除</a>
</td>
</tr>`;
});
$('tbody').html(strHtml);
}
ytAjax = new YourTeam.Ajax(url, objSendData, success, null, "POST").send();
}
$("#myFile").on("change", function (e) {
let fileHelper = new YourTeam.Utility.File();
if ($('#forFile').length > 0) {
$("#forFile").html("");
}
console.log(this.files);
});
</script>