FIC_Solar/SolarPower/Views/ExceptionRecord/Index.cshtml
2021-08-27 09:54:00 +08:00

802 lines
37 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@{
ViewData["MainNum"] = "5";
ViewData["SubNum"] = "1";
ViewData["Title"] = "異常記錄查詢";
}
@using SolarPower.Models.Role
@model RoleLayerEnum
<ol class="breadcrumb page-breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0);">即時告警</a></li>
<li class="breadcrumb-item active">@ViewData["Title"]</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">
<i class="subheader-icon fal fa-alarm-snooze"></i> 即時告警管理
</h1>
</div>
<div class="tab-content p-3">
<div class="tab-pane fade show active" id="tab-001" role="tabpanel" aria-labelledby="tab-001">
<div class="row mb-3 ">
<div class="pr-3">
<div class="btn-group btn-group-md">
<button type="button" class="btn btn-success waves-effect waves-themed" onclick="ChangeType(1)" id="button1">未解決</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(0)" id="button0">已解決</button>
</div>
</div>
<div class="pr-3">
<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeDate30()">近30天</button>
</div>
<div class="pr-3">
<div class="form-group">
<input class="form-control" id="date-range" type="text" name="date" value="" style="width: 205px;">
</div>
</div>
</div>
<div class="row mb-3 d-flex align-items-center">
<div class="pr-3">
<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="Allcity()">全部縣市</button>
</div>
<div class="pr-3">
<div class="frame-wrap" id="city">
</div>
</div>
</div>
<div class="row mb-5 d-flex align-items-top ">
<div class="col-1 p-0">
<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="Allpowerstation()">全選</button>
</div>
<div class="col-11">
<div class="row frame-wrap" id="CheckPowerStation">
</div>
</div>
</div>
<div class="row mb-5">
<div class="w-100">
<table class="table table-bordered table-hover m-0 text-center" id="Exception_Table">
<thead class="thead-themed">
<tr>
<th>電站名稱</th>
<th>異常ID號</th>
<th>發生時間</th>
<th>復歸時間</th>
<th>異常類別</th>
<th>設備編號</th>
<th>異常訊息</th>
<th>派工/維運單</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exception-form-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<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="record-form-exc">
<div class="row mb-3">
<div class="col-lg-6">
<div class="form-group">
<label class="form-label" for="power_station_select_modal_exc">電站</label>
<input class="form-control" id="power_station_select_modal_exc" type="text" name="power_station_select_modal_exc" />
@*<select class="form-control" id="power_station_select_modal_exc">
</select>*@
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-label" for="work_time_modal_exc">作業日期</label>
<input class="form-control" id="work_time_modal_exc" type="date" name="work_time_modal_exc" />
</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_exc" name="status_modal" value="0" />
<label class="custom-control-label" for="status_none_complete_exc">未完成</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input ml-auto" id="status_complete_exc" name="status_modal" value="1" />
<label class="custom-control-label" for="status_complete_exc">完成</label>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-label" for="work_person_select_modal_exc">執行人員</label>
<select class="form-control" id="work_person_select_modal_exc">
</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_exc">異常編號</label>
<input class="form-control" id="error_code_modal_exc" type="text" name="error_code_modal_exc" />
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-label" for="fix_do_modal_exc">維修項目</label>
<input class="form-control" id="fix_do_modal_exc" type="text" name="fix_do_modal_exc" />
</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_exc">巡檢注意事項</label>
<textarea class="form-control" id="notice_textarea_modal_exc" 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_exc">結果描述</label>
<textarea class="form-control" id="description_textarea_modal_exc" rows="5"></textarea>
</div>
</div>
</div>
</form>
<div class="row align-items-center">
<div class="col-2">
<p>檔案上傳</p>
</div>
<div id="record_files_div_exc" class="col-10">
<div class="row px-3 mb-3 d-flex justify-content-start align-items-center img-zoom-div">
</div>
</div>
</div>
<div class="row px-3">
<form id="record-file-form_exc" 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-record-btn" onclick="SaveException()">確定</button>
</div>
</div>
</div>
</div>
@section Scripts{
<script>
var ids = new Array(0);//當前選擇縣市
var powerids = new Array(0);//當前選擇電站
var Allids = new Array(0);//全部縣市
var Allpowerids = new Array(0);//全部電站
var Type = 1; // 項目
var datepicker;
var ExceptionTable;
var err_status = 1;//異常紀錄1:未解決 0:已解決
var errortoID;
var selected_id;
var powerStationData_name;
var record;
var psids;
var countOperationRecordFile = 0;
//#region Array.Remove
Array.prototype.remove = function (val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
//#endregion
$(function () {
//#region Date-Picker
datepicker = $('#date-range').daterangepicker({
autoUpdateInput: false,
locale: { format: 'YYYY/MM/DD' },
opens: 'left'
}, function (start, end, label) {
});
$('#date-range').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
$(this).trigger('change');
});
$('#date-range').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
$(this).trigger('change');
});
//#endregion
//#region 預設近30天
var today = new Date();
var dateLimit = new Date(new Date().setDate(today.getDate() - 30));
var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
datepicker.data('daterangepicker').setStartDate(dateLimit_format);
datepicker.data('daterangepicker').setEndDate(today_format);
$('#date-range').val(dateLimit_format + ' - ' + today_format);
//#endregion
//#region 預設載入該使用者可以選擇的電站
var Nurl = "/PowerStation/GetSolarCitySummary";
$.post(Nurl, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
for (var i = 0; i < rel.data.length; i++) {
$('#city').append("<button type='button' class='btn btn-success waves-effect waves-themed ml-2' id='" + 'cityID_' + rel.data[i].cityId + "'>" +
rel.data[i].city +
"<span class= 'badge bg-success-700 ml-2' >" + rel.data[i].amount + "</span >" +
"</button >");
ids.push(String(rel.data[i].cityId));
Allids.push(String(rel.data[i].cityId));
}
var send_data = {
cityid: ids
}
ids.sort();
var Nurl = "/PowerStation/GetSolarByCity";
$.post(Nurl, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$('#CheckPowerStation').empty();
$.each(rel.data, function (index, val) {
$('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' ></div>");
$('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "' checked>");
$('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
powerids.push(String(val.id));
Allpowerids.push(String(val.id));
});
datatable();
//operationRecordTable.ajax.reload();
})
})
//#endregion
})
//#region 改變項目
function ChangeType(type) {
Type = type;
for (var i = 0; i < 2; i++) {
var name = "button" + i;
document.getElementById(name).setAttribute("class", "btn btn-secondary waves-effect waves-themed");
}
document.getElementById("button" + type).setAttribute("class", "btn btn-success waves-effect waves-themed");
ExceptionTable.ajax.reload();
}
//#endregion
//#region 改變日期
$('#date-range').on('change', function () {
ExceptionTable.ajax.reload();
});
//#endregion
//#region 縣市全選
function Allcity() {
var Newpowerids = new Array(0);
ids = [];
$.each(Allids, function (index, val) {
var cityid = 'cityID_' + val;
document.getElementById(cityid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
ids.push(val);
});
var send_data = {
cityid: ids
}
var Nurl = "/PowerStation/GetSolarByCity";
$.post(Nurl, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$('#CheckPowerStation').empty();
Allpowerids = [];
$.each(rel.data, function (index, val) {
if (powerids.includes(String(val.id))) {
$('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
$('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "' checked>");
$('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
Newpowerids.push(String(val.id));
}
else {
$('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
$('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "'>");
$('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
}
Allpowerids.push(String(val.id));
});
powerids = [];
powerids = Newpowerids;
})
ExceptionTable.ajax.reload();
}
//#endregion
//#region 查詢近30天
function ChangeDate30() {
var today = new Date();
var dateLimit = new Date(new Date().setDate(today.getDate() - 30));
var today_format = today.toISOString().slice(0, 10).replace(/-/g, "/");
var dateLimit_format = dateLimit.toISOString().slice(0, 10).replace(/-/g, "/");
datepicker.data('daterangepicker').setStartDate(dateLimit_format);
datepicker.data('daterangepicker').setEndDate(today_format);
$('#date-range').val(dateLimit_format + ' - ' + today_format);
$('#date-range').trigger('change');
}
//#endregion
//#region 電站全選
function Allpowerstation() {
powerids = [];
$.each(Allpowerids, function (index, val) {
$('#check_' + val).prop("checked", true);
powerids.push(val);
})
ExceptionTable.ajax.reload();
}
//#endregion
//#region 選擇縣市
$('#city').on("click", "button", function () {
var clickid = $(this).attr('id');
var classid = clickid.split("_");
var Newpowerids = new Array(0);
var value = document.getElementById(clickid).className;
ids.sort(function (a, b) {
return a - b;
});
var send_data = {
cityid: ids
}
if (value == 'btn btn-outline-success waves-effect waves-themed ml-2') { //選擇
document.getElementById(clickid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
ids.push(classid[1]);
}
else { //取消
document.getElementById(clickid).setAttribute("class", 'btn btn-outline-success waves-effect waves-themed ml-2');
ids.remove(classid[1]);
}
ids.sort();
var Nurl = "/PowerStation/GetSolarByCity";
$.post(Nurl, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$('#CheckPowerStation').empty();
Allpowerids = [];
$.each(rel.data, function (index, val) {
if (powerids.includes(String(val.id))) {
$('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
$('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "' checked>");
$('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
Newpowerids.push(String(val.id));
}
else {
$('#CheckPowerStation').append("<div class='col-2 mb-2 custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
$('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "'>");
$('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
}
Allpowerids.push(String(val.id));
});
powerids = [];
powerids = Newpowerids;
})
ExceptionTable.ajax.reload();
})
//#endregion
//#region 選擇電站checkbox
$('#CheckPowerStation').on("click", "input", function () {
var clickid = $(this).attr('id');
var classid = clickid.split("_");
var job = document.getElementById(clickid);
if (job.checked == true) {
powerids.push(classid[1]);
}
else {
powerids.remove(classid[1]);
}
ExceptionTable.ajax.reload();
})
//#endregion
//#region DataTable
function datatable() {
ExceptionTable = $("#Exception_Table").DataTable({
"pageLength": 20,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"order": [[7, "desc"]],
"columns": [{
"data": "powerStationName"
}, {
"data": "id"
}, {
"data": "dev_time"
}, {
"data": "normalTime"
}, {
"data": "alarmClassName"
}, {
"data": "errDevice"
}, {
"data": "errMsg"
}, {
"data": "function"
}],
"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-error', data.errorID);
$(row).attr('data-name', data.powerStationName);
$(row).attr('data-psid', data.powerStationId);
},
"ajax": {
"url": "/StationOverview/GetExceptionTable2",
"type": "POST",
"data": function (d) {
d.id = powerids,
d.status = Type,
d.range = $('#date-range').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;
}
},
"error": function (xhr, error, thrown) {
console.log(xhr);
}
});
}
//#endregion
//#region 派工新增表單(異常)
$('#Exception_Table').on("click", "a.add-btn", function () {
powerStationData_name = $(this).parents('tr').attr('data-name');
$("#exception-form-modal .modal-title .main-title").html("維修單 - ");
$("#exception-form-modal .modal-title .sub-title").html(powerStationData_name);
$("#record-form-exc").trigger("reset");
$("#power_station_select_modal_exc").val(powerStationData_name);
$("#power_station_select_modal_exc").attr("disabled", true);
selected_id = $(this).parents('tr').attr('data-id');
errortoID = $(this).parents('tr').attr('data-error');
$("input[name=status_modal][value='" + 0 + "']").prop('checked', true); //狀態
$("#error_code_modal_exc").val(selected_id);
$("#error_code_modal_exc").attr("disabled", true);
psids = selected_id = $(this).parents('tr').attr('data-psid');
//#region 維修單運維人員(異常紀錄)
var url_power_station_operation_personnel = "/PowerStation/GetOperationPersonnelSelectOptionList";
send_data = {
PowerStationId: parseInt(psids)
}
$.post(url_power_station_operation_personnel, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$("#work_person_select_modal_exc").empty();
if (rel.data.length > 0) {
$.each(rel.data, function (index, val) {
$("#work_person_select_modal_exc").append($("<option />").val(val.value).text(val.text));
});
if (record != null || record != undefined) {
$("#work_person_select_modal_exc").val(record.workPersonId);
}
}
$("#exception-form-modal").modal();
});
//#endregion
});
//#endregion
//#region 編輯異常表單內容(異常)
$('#Exception_Table').on("click", "a.edit-btn", function () {
psids = selected_id = $(this).parents('tr').attr('data-psid');
$("#exception-form-modal .modal-title .main-title").html("維修單 - ");
selected_id = $(this).parents('tr').attr('data-id');
powerStationData_name = $(this).parents('tr').attr('data-name');
errortoID = $(this).parents('tr').attr('data-error');
//取得單一記錄表單
var url = "/Operation/GetOneOperationRecord/";
var send_data = {
id: errortoID
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
record = rel.data;
countOperationRecordFile = record.recordFiles.length;
$("#exception-form-modal .modal-title .sub-title").html(powerStationData_name);
$("#power_station_select_modal_exc").val(powerStationData_name);
$("#power_station_select_modal_exc").attr("disabled", true);
$("#work_time_modal").val(record.workTime);
var status = -1;
if (record.status == 0 || record.status == 2) {
status = 0;
} else if (record.status == 1 || record.status == 3) {
status = 1;
}
$("input[name=status_modal][value='" + status + "']").prop('checked', true); //狀態
$('#work_person_select_modal_exc').val(record.workPersonId);
$(".fix-div").show();
$("#error_code_modal_exc").val(record.errorCode);
$("#error_code_modal_exc").attr("disabled", true);
$("#fix_do_modal_exc").val(record.fixDo);
$("#notice_textarea_modal_exc").val(record.notice);
$("#description_textarea_modal_exc").val(record.description);
var str = "";
RecordFileBox = $("#record_files_div_exc > .row");
RecordFileBox.empty();
record.recordFiles.forEach(function (value, index) {
CreateRecordFileBox(RecordFileBox, value, true);
});
//#region 維修單運維人員(異常紀錄)
var url_power_station_operation_personnel = "/PowerStation/GetOperationPersonnelSelectOptionList";
send_data = {
PowerStationId: parseInt(psids)
}
$.post(url_power_station_operation_personnel, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$("#work_person_select_modal_exc").empty();
if (rel.data.length > 0) {
$.each(rel.data, function (index, val) {
$("#work_person_select_modal_exc").append($("<option />").val(val.value).text(val.text));
});
if (record != null || record != undefined) {
$("#work_person_select_modal_exc").val(record.workPersonId);
}
}
$("#exception-form-modal").modal();
});
//#endregion
}, 'json');
});
//#endregion
//#region 儲存表單資料(異常)
function SaveException() {
if ($("#record-form-exc").valid()) {
var url = "/Operation/SaveOperationRecord";
var formData = new FormData();
formData.append("Id", errortoID);
formData.append("PowerStationId", parseInt(psids));
formData.append("WorkType", 2);
formData.append("ErrorCode", $("#error_code_modal_exc").val());
formData.append("FixDo", $("#fix_do_modal_exc").val());
formData.append("Status", $("input[name=status_modal]:checked").val());
formData.append("WorkPersonId", $("#work_person_select_modal_exc").val());
formData.append("WorkTime", $("#work_time_modal_exc").val());
formData.append("Notice", $("#notice_textarea_modal_exc").val());
formData.append("Description", $("#description_textarea_modal_exc").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("#record-file-form_exc");
if (myDropzone.files.length > 0) {
selected_id = rel.data;
myDropzone.processQueue();
myDropzone.on("successmultiple", function (file, rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
toast_ok(rel.msg);
$('#exception-form-modal').modal('hide');
recordFileDropzone.removeAllFiles();
ExceptionTable.ajax.reload();
});
} else {
$('#exception-form-modal').modal('hide');
myDropzone.removeAllFiles();
ExceptionTable.ajax.reload();
}
}
});
}
}
//#endregion
//#region 表單檔案資料(異常)
Dropzone.autoDiscover = false;
recordFileDropzone = new Dropzone("#record-file-form_exc", {
url: "/Operation/SaveOperationRecordFile",
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("sending", function (file, xhr, data) {
if ((countOperationRecordFile + myDropzone.files.length) > 5) {
toast_warning("檔案總數量不可超過 5 張");
myDropzone.removeFile(file);
return;
} else {
data.append("Id", selected_id);
data.append("RecordFiles", file);
}
});
}
});
//#endregion
//#region 產生檔案html
function CreateRecordFileBox(dom, value, show_del_btn) {
var str = "";
str += '<div class="col-auto px-0 py-2 mx-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" style="font-size: 1.5em; line-height: 2;"></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" style="font-size: 1.5em; line-height: 2;"></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" style="font-size: 1.5em; line-height: 2;"></i></a>';
} else {
str += '<img src="' + value.fileName + '" class="img-zoom" width="100%" />';
}
if (show_del_btn) {
str += '<a href="javascript:;" class="del-operation-record-file-btn" data-id="' + value.id + '">';
str += '<span class="badge border border-light rounded-pill bg-danger-500 position-absolute pos-top pos-right"><i class="fal fa-times"></i></span>';
str += '</a>';
}
str += '</div>';
dom.append(str);
}
//#endregion
</script>
}