621 lines
26 KiB
Plaintext
621 lines
26 KiB
Plaintext
@{
|
|
ViewData["MainNum"] = "6";
|
|
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="subheader">
|
|
<h1 class="subheader-title">
|
|
<i class="subheader-icon fal fa-globe"></i> 運維作業記錄
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Your main content goes below here: -->
|
|
<div id="panel-5" class="panel">
|
|
<div class="panel-container show">
|
|
<div class="panel-content">
|
|
<div class="row mb-5 d-flex justify-content-start">
|
|
<div class="pr-3">
|
|
<div class="btn-group btn-group-md">
|
|
<button type="button" class="btn btn-success 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="pr-3">
|
|
<button type="button" class="btn btn-secondary waves-effect waves-themed">近30天</button>
|
|
</div>
|
|
<div class="pr-3">
|
|
<div class="form-group">
|
|
<input class="form-control" id="example-date" type="date" name="date" value="2023-07-23">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row d-flex justify-content-end px-3">
|
|
<button type="button" class="btn btn-info waves-effect waves-themed mb-3 mr-2" onclick="ExportExcel()">
|
|
<span class="fal fa-file-excel mr-1"></span>
|
|
匯出
|
|
</button>
|
|
<a href="javascript:;" class="btn btn-success waves-effect waves-themed mb-3 mr-2" onclick="AddRecode()">
|
|
<span class="fal fa-plus mr-1"></span>
|
|
維修單
|
|
</a>
|
|
</div>
|
|
<div class="frame-wrap">
|
|
<table id="operation_recode_table" class="table table-bordered table-hover m-0 text-center">
|
|
<thead class="thead-themed">
|
|
<tr>
|
|
<th>電廠</th>
|
|
<th>表單號</th>
|
|
<th>項目</th>
|
|
<th>維修項目</th>
|
|
<th>狀態</th>
|
|
<th>執行人員</th>
|
|
<th>本次作業預計</th>
|
|
<th>照片</th>
|
|
<th>完成時間</th>
|
|
@*<th>功能</th>*@
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
|
|
<table id="NoView" style="display:none">
|
|
<thead class="thead-themed">
|
|
<tr>
|
|
<th>電廠</th>
|
|
<th>表單號</th>
|
|
<th>項目</th>
|
|
<th>維修項目</th>
|
|
<th>狀態</th>
|
|
<th>執行人員</th>
|
|
<th>本次作業預計</th>
|
|
<th>照片</th>
|
|
<th>完成時間</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="NoViewbody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="recode-form-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
<span class="main-title"></span><span class="sub-title"></span>
|
|
</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="recode-form">
|
|
<div class="row mb-3">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<label class="form-label" for="power_station_select_modal">電站</label>
|
|
<select class="form-control" id="power_station_select_modal">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<label class="form-label" for="work_time_modal">作業日期</label>
|
|
<input class="form-control" id="work_time_modal" type="date" name="work_time_modal" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<label class="form-label" for="example-select">狀態</label>
|
|
<div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input type="radio" class="custom-control-input ml-auto" id="status_none_complete" name="status_modal" value="0" />
|
|
<label class="custom-control-label" for="status_none_complete">未完成</label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline">
|
|
<input type="radio" class="custom-control-input ml-auto" id="status_complete" name="status_modal" value="1" />
|
|
<label class="custom-control-label" for="status_complete">完成</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<label class="form-label" for="work_person_select_modal">執行人員</label>
|
|
<select class="form-control" id="work_person_select_modal">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3 fix-div">
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
<label class="form-label" for="error_code_modal">異常編號</label>
|
|
<input class="form-control" id="error_code_modal" type="text" name="error_code_modal" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="form-group">
|
|
<label class="form-label" for="fix_do_modal">維修項目</label>
|
|
<input class="form-control" id="fix_do_modal" type="text" name="fix_do_modal" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-lg-12">
|
|
<div class="form-group">
|
|
<label class="form-label" for="notice_textarea_modal">巡檢注意事項</label>
|
|
<textarea class="form-control" id="notice_textarea_modal" rows="5"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-lg-12">
|
|
<div class="form-group">
|
|
<label class="form-label" for="description_textarea_modal">結果描述</label>
|
|
<textarea class="form-control" id="description_textarea_modal" rows="5"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="row align-items-center">
|
|
<div class="col-2">
|
|
<p>檔案上傳</p>
|
|
</div>
|
|
<div id="recode_files_div" class="col-10">
|
|
<div class="row align-items-center"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row px-3">
|
|
<form id="recode-file-div" class="dropzone needsclick dz-clickable col-12" style="min-height: 7rem;">
|
|
@*<div class="fallback">
|
|
<input type="file" multiple />
|
|
</div>*@
|
|
<div class="dz-message needsclick">
|
|
<i class="fal fa-cloud-upload text-muted mb-3"></i> <br>
|
|
<span class="text-uppercase">將圖片拖曳至這裡或點擊選擇圖片.</span>
|
|
<br>
|
|
<span class="fs-sm text-muted">僅供預覽，並未實際上傳。</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
|
|
<button type="button" class="btn btn-primary" id="save-recode-btn" onclick="SaveRecode()">確定</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts{
|
|
<script>
|
|
var operationRecodeTable;
|
|
var selected_id = 0; var selected_work_type = -1;
|
|
var recode;
|
|
var countOperationRecodeFile = 0;
|
|
var recodeFileDropzone;
|
|
|
|
|
|
$(function () {
|
|
//#region 預設載入該使用者可以選擇的電站
|
|
GetPowerStation();
|
|
//#endregion
|
|
|
|
//#region 切換電站時，載入該電站運維人員
|
|
$("#power_station_select_modal").change(function () {
|
|
|
|
//查詢該電站的運維人員
|
|
var url_power_station_operation_personnel = "/PowerStation/GetOperationPersonnelSelectOptionList";
|
|
|
|
send_data = {
|
|
PowerStationId: $(this).val()
|
|
}
|
|
|
|
$.post(url_power_station_operation_personnel, send_data, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
$("#work_person_select_modal").empty();
|
|
if (rel.data.length > 0) {
|
|
|
|
$.each(rel.data, function (index, val) {
|
|
$("#work_person_select_modal").append($("<option />").val(val.value).text(val.text));
|
|
});
|
|
|
|
if (recode != null || recode != undefined) {
|
|
$("#work_person_select_modal").val(recode.workPersonId);
|
|
}
|
|
}
|
|
//#endregion
|
|
|
|
});
|
|
});
|
|
//#endregion
|
|
|
|
//#region 運維作業記錄 DataTable
|
|
operationRecodeTable = $("#operation_recode_table").DataTable({
|
|
"pageLength": 20,
|
|
"paging": true,
|
|
"lengthChange": false,
|
|
"searching": false,
|
|
"ordering": false,
|
|
"info": true,
|
|
"autoWidth": false,
|
|
"responsive": true,
|
|
@*"order": [[5, "desc"]],*@
|
|
"columns": [{
|
|
"data": "powerStationName"
|
|
}, {
|
|
"data": "formId"
|
|
}, {
|
|
"data": "workTypeText"
|
|
}, {
|
|
"data": "fixDo"
|
|
}, {
|
|
"data": "statusText"
|
|
}, {
|
|
"data": "workPersonName"
|
|
}, {
|
|
"data": "operationPredict"
|
|
}, {
|
|
"data": "fileList"
|
|
}, {
|
|
"data": "finishTime"
|
|
}],
|
|
"language": {
|
|
"emptyTable": "無資料...",
|
|
"processing": "處理中...",
|
|
"loadingRecords": "載入中...",
|
|
"lengthMenu": "顯示 _MENU_ 項結果",
|
|
"zeroRecords": "沒有符合的結果",
|
|
"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
|
|
"infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
|
|
"infoFiltered": "(從 _MAX_ 項結果中過濾)",
|
|
"infoPostFix": "",
|
|
"search": "搜尋:",
|
|
"paginate": {
|
|
"first": "第一頁",
|
|
"previous": "上一頁",
|
|
"next": "下一頁",
|
|
"last": "最後一頁"
|
|
},
|
|
"aria": {
|
|
"sortAscending": ": 升冪排列",
|
|
"sortDescending": ": 降冪排列"
|
|
}
|
|
},
|
|
'createdRow': function (row, data, dataIndex) {
|
|
$(row).attr('data-id', data.id);
|
|
$(row).attr('data-work-type', data.workType);
|
|
},
|
|
"ajax": {
|
|
"url": "/Operation/OperationRecodeList",
|
|
"type": "POST",
|
|
"data": function (d) {
|
|
d.CityIds = [3];
|
|
d.PowerStationIds = [1];
|
|
d.WorkType = $('#company_phone').val();
|
|
d.Range = $('#company_taxIDNumber').val();
|
|
},
|
|
"dataSrc": function (rel) {
|
|
if (rel.data.code == "9999") {
|
|
toast_error(rel.data.msg);
|
|
return;
|
|
}
|
|
|
|
data = rel.data.data;
|
|
|
|
if (data == null || data.length == 0) {
|
|
this.data = [];
|
|
}
|
|
|
|
return data;
|
|
}
|
|
}
|
|
});
|
|
//#endregion
|
|
});
|
|
|
|
//#region 新增維修單
|
|
function AddRecode() {
|
|
selected_id = 0;
|
|
$("#recode-form-modal .modal-title .main-title").html("維修單");
|
|
$("#recode-form-modal .modal-title .sub-title").html("");
|
|
$("#power_station_select_modal").attr("disabled", false);
|
|
$(".fix-div").show();
|
|
$("#recode-form").trigger("reset");
|
|
GetPowerStation();
|
|
|
|
$("#recode-form-modal").modal();
|
|
}
|
|
//#endregion
|
|
|
|
//#region 編輯表單內容
|
|
$('#operation_recode_table').on("click", "a.edit-btn", function () {
|
|
|
|
work_type = $(this).parents('tr').attr('data-work-type');
|
|
|
|
if (work_type == 0) {
|
|
$("#recode-form-modal .modal-title .main-title").html("清洗單 - ");
|
|
} else if (work_type == 1) {
|
|
$("#recode-form-modal .modal-title .main-title").html("巡檢單 - ");
|
|
} else {
|
|
$("#recode-form-modal .modal-title .main-title").html("維修單 - ");
|
|
}
|
|
|
|
selected_id = $(this).parents('tr').attr('data-id');
|
|
|
|
//取得單一記錄表單
|
|
var url = "/Operation/GetOneOperationRecode/";
|
|
|
|
var send_data = {
|
|
id: selected_id
|
|
}
|
|
|
|
$.post(url, send_data, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
recode = rel.data;
|
|
|
|
countOperationRecodeFile = recode.recodeFiles.length;
|
|
|
|
$("#recode-form-modal .modal-title .sub-title").html(recode.powerStationName);
|
|
|
|
$("#power_station_select_modal").val(recode.powerStationId).trigger('change');
|
|
$("#power_station_select_modal").attr("disabled", true);
|
|
|
|
$("#work_time_modal").val(recode.workTime);
|
|
var status = -1;
|
|
if (recode.status == 0 || recode.status == 2) {
|
|
status = 0;
|
|
} else if (recode.status == 1 || recode.status == 3) {
|
|
status = 1;
|
|
}
|
|
$("input[name=status_modal][value='" + status + "']").prop('checked', true); //狀態
|
|
$('#work_person_select_modal').val(recode.workPersonId);
|
|
if (work_type != 2) {
|
|
$(".fix-div").hide();
|
|
} else {
|
|
$(".fix-div").show();
|
|
$("#error_code_modal").val(recode.errorCode);
|
|
$("#fix_do_modal").val(recode.fixDo);
|
|
}
|
|
$("#notice_textarea_modal").val(recode.notice);
|
|
$("#description_textarea_modal").val(recode.description);
|
|
|
|
var str = "";
|
|
|
|
RecodeFileBox = $("#recode_files_div > .row");
|
|
RecodeFileBox.empty();
|
|
recode.recodeFiles.forEach(function (value, index) {
|
|
CreateRecodeFileBox(RecodeFileBox, value);
|
|
});
|
|
|
|
$("#recode-form-modal").modal();
|
|
}, 'json');
|
|
});
|
|
//#endregion
|
|
|
|
//#region 表單驗證
|
|
$("#recode-form").validate({
|
|
rules: {
|
|
},
|
|
});
|
|
//#endregion
|
|
|
|
//#region 儲存表單資料
|
|
function SaveRecode() {
|
|
|
|
if ($("#recode-form").valid()) {
|
|
var url = "/Operation/SaveOperationRecode";
|
|
|
|
var formData = new FormData();
|
|
|
|
formData.append("Id", selected_id);
|
|
formData.append("PowerStationId", $("#power_station_select_modal").val());
|
|
formData.append("WorkType", selected_work_type);
|
|
formData.append("ErrorCode", $("#error_code_modal").val());
|
|
formData.append("FixDo", $("#fix_do_modal").val());
|
|
formData.append("Status", $("input[name=status_modal]:checked").val());
|
|
formData.append("WorkPersonId", $("#work_person_select_modal").val());
|
|
formData.append("WorkTime", $("#work_time_modal").val());
|
|
formData.append("Notice", $("#notice_textarea_modal").val());
|
|
formData.append("Description", $("#description_textarea_modal").val());
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: url,
|
|
data: formData,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
success: function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
var myDropzone = Dropzone.forElement("#recode-file-div");
|
|
|
|
if (myDropzone.getAcceptedFiles().length > 1) {
|
|
|
|
myDropzone.processQueue();
|
|
|
|
myDropzone.on("successmultiple", function (file, rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
toast_ok(rel.msg);
|
|
$('#recode-form-modal').modal('hide');
|
|
recodeFileDropzone.removeAllFiles();
|
|
|
|
operationRecodeTable.ajax.reload();
|
|
});
|
|
} else {
|
|
$('#recode-form-modal').modal('hide');
|
|
myDropzone.removeAllFiles();
|
|
|
|
operationRecodeTable.ajax.reload();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
//#endregion
|
|
|
|
//#region 取得電站選單資料
|
|
function GetPowerStation() {
|
|
var url_power_station_select_option = "/Operation/GetPowerStationSelectOption";
|
|
$.get(url_power_station_select_option, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
|
|
$("#power_station_select_modal").empty();
|
|
|
|
$.each(rel.data, function (index, val) {
|
|
$("#power_station_select_modal").append($("<option />").val(val.value).text(val.text));
|
|
});
|
|
|
|
//預設查詢第一個
|
|
$("#power_station_select_modal").val($("#power_station_select_modal option:first").val()).trigger('change');
|
|
});
|
|
}
|
|
//#endregion
|
|
|
|
//#region 表單檔案資料
|
|
Dropzone.autoDiscover = false;
|
|
recodeFileDropzone = new Dropzone("#recode-file-div", {
|
|
url: "/Operation/SaveOperationRecodeFile",
|
|
acceptedFiles: "image/*, application/pdf,.doc,.docx,.xls,.xlsx",
|
|
autoProcessQueue: false,
|
|
parallelUploads: 5,
|
|
maxFiles: 5,
|
|
addRemoveLinks: true,
|
|
uploadMultiple: true,
|
|
dictRemoveFile: "移除",
|
|
init: function (e) {
|
|
|
|
var myDropzone = this;
|
|
|
|
myDropzone.on("sendingmultiple", function (file, xhr, data) {
|
|
if ((countOperationRecodeFile + myDropzone.files.length) > 5) {
|
|
toast_warning("檔案總數量不可超過 5 張");
|
|
myDropzone.removeFile(file);
|
|
return;
|
|
} else {
|
|
|
|
data.append("Id", selected_id);
|
|
data.append("RecodeFiles", file);
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
});
|
|
//#endregion
|
|
|
|
//#region 產生檔案html
|
|
function CreateRecodeFileBox(dom, value) {
|
|
var str = "";
|
|
str += '<div class="col-2">';
|
|
var split = value.fileName.split(".");
|
|
var excel_format = ["xls", "xlsx"];
|
|
var word_format = ["doc", "docx"];
|
|
if (split[split.length - 1].toLowerCase() == "pdf") {
|
|
str += '<a href="' + value.fileName + '" class="btn btn-info waves-effect waves-themed mb-3 mr-2" download><i class="fal fa-file-pdf"></i></a>';
|
|
} else if (excel_format.indexOf(split[split.length - 1].toLowerCase()) > -1) {
|
|
str += '<a href="' + value.fileName + '" class="btn btn-info waves-effect waves-themed mb-3 mr-2" download><i class="fal fa-file-excel"></i></a>';
|
|
} else if (word_format.indexOf(split[split.length - 1].toLowerCase()) > -1) {
|
|
str += '<a href="' + value.fileName + '" class="btn btn-info waves-effect waves-themed mb-3 mr-2" download><i class="fal fa-file-word"></i></a>';
|
|
} else {
|
|
str += '<img src="' + value.fileName + '" width="100%"/>';
|
|
}
|
|
str += '</div>';
|
|
dom.append(str);
|
|
}
|
|
//#endregion
|
|
|
|
//#region 匯出excel
|
|
function ExportExcel() {
|
|
var url = "/Operation/ExportOperationRecodeExcel";
|
|
var send_data = {
|
|
CityIds: [3],
|
|
PowerStationIds: [1]
|
|
};
|
|
$.post(url, send_data, function (rel) {
|
|
if (rel.code != "0000") {
|
|
toast_error(rel.msg);
|
|
return;
|
|
}
|
|
$('#NoViewbody').empty();
|
|
|
|
var str = "";
|
|
rel.data.forEach(function (value, index) {
|
|
str += "<tr>" +
|
|
"<td>" + value.powerStationName + "</td>" +
|
|
"<td>" + value.formId + "</td>" +
|
|
"<td>" + value.workTypeText + "</td>" +
|
|
"<td>" + value.fixDo + "</td>" +
|
|
"<td>" + value.statusText + "</td>" +
|
|
"<td>" + value.workPersonName + "</td>" +
|
|
"<td>" + value.operationPredict + "</td>";
|
|
|
|
str += "<td>";
|
|
if (value.hyperLinks != undefined || value.hyperLinks != null) {
|
|
value.hyperLinks.forEach(function (value2, index) {
|
|
str += value2 + "<br>";
|
|
});
|
|
}
|
|
str += "</td>";
|
|
|
|
str += "<td>" + value.finishTime + "</td>" +
|
|
"</tr>";
|
|
});
|
|
|
|
$('#NoViewbody').append(str);
|
|
|
|
$("#NoView").table2excel({
|
|
// 匯出的Excel文件的名稱
|
|
name: "abc",
|
|
// Excel檔案的名稱
|
|
filename: "test",
|
|
//檔案字尾名
|
|
fileext: ".xls",
|
|
});
|
|
}, 'json');
|
|
}
|
|
//#endregion
|
|
</script>
|
|
} |