FIC_Solar/SolarPower/Views/Operation/Index.cshtml
Kai a94346d77d 1. 修改左邊選單字體大小
2. 電站總覽 基本資料
2021-08-25 11:31:38 +08:00

712 lines
32 KiB
Plaintext

@{
ViewData["MainNum"] = "6";
ViewData["SubNum"] = "2";
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">定期計畫建立</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 class="row">
<div class="col-xl-12">
<div id="panel-5" class="panel">
<div class="panel-container show">
<div class="panel-content">
<div class="row mb-3 px-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(9)" id="button9">全部</button>
<button type="button" class="btn btn-secondary 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>
<div class="row mb-3 d-flex align-items-center px-3">
<div class="pr-3">
<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="Allcity()" id="Allcity">全部縣市</button>
</div>
<div class="pr-3">
<div class="frame-wrap" id="citytest" style="display:none">
<button type="button" class="btn btn-outline-success waves-effect waves-themed">
新北市
<span class="badge bg-success-700 ml-2" id="acount">4</span>
</button>
</div>
<div class="frame-wrap" id="city">
</div>
</div>
</div>
<div class="row mb-5 d-flex align-items-top px-3">
<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 d-flex justify-content-end px-3">
<button type="button" class="btn btn-info waves-effect waves-themed mb-3 mr-2" onClick="saveToExcel();">
<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" data-toggle="modal" data-target="#Operation-modal" onclick="AddOperationPlan()">
<span class="fal fa-plus mr-1"></span>
計劃
</a>
</div>
<div class="frame-wrap">
<table id="OperationPlan_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>email 通知</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>email 通知</th>
<th>建立人</th>
<th>建立時間</th>
</tr>
</thead>
<tbody id="NoViewbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Operation-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">
新增/修改 定期計劃
</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 class="operation-form" id="Operation-form">
<div class="row mb-3">
<div class="col-lg-7">
<div class="form-group">
<label class="form-label" for="operation_powerStationselect_modal">電站名</label>
<select class="form-control" id="operation_powerStationselect_modal">
</select>
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label class="form-label" for="operation_type_modal">項目</label>
<select class="form-control" id="operation_type_modal">
<option value="0">清洗</option>
<option value="1">巡檢</option>
</select>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-7">
<div class="form-group">
<div class="row d-flex justify-content-start align-items-center">
<div class="col-4">自動排程 每</div>
<div class="col">
<input type="number" id="operation_scheduleNum_modal" class="form-control">
</div>
<div class="col">
<select class="form-control" id="operation_scheduleType_modal" width="70" style="width: 70px">
<option value="0">天</option>
<option value="1">週</option>
<option value="2">月</option>
<option value="3">季</option>
<option value="4">年</option>
</select>
</div>
<div class="col">安排一次</div>
</div>
</div>
<div class="form-group">
<div class="row d-flex justify-content-start align-items-center">
<div class="col-3">每次預期</div>
<div class="col">
<input type="number" id="operation_workDay_modal" class="form-control">
</div>
<div class="col">天內完成</div>
</div>
</div>
<div class="form-group">
<div class="row d-flex justify-content-start align-items-center">
<div class="col-3">開始時間</div>
<div class="col-5">
<input type="date" id="operation_startTime_modal" class="form-control" placeholder="2000-01-01">
</div>
@*<div class="col">~<span id="operation_endTime_modal"></span></div>*@
</div>
</div>
</div>
<div class="col-lg-5">
<div class="form-group">
<label class="form-label" for="operation_description_modal">描述</label>
<textarea class="form-control" id="operation_description_modal" rows="5"></textarea>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-7">
<div class="form-group">
<label class="form-label" for="operation_emailType_modal">email提醒</label>
<select class="form-control" id="operation_emailType_modal">
<option value="0">當天</option>
<option value="1">前1天</option>
<option value="2">前2天</option>
<option value="3">前3天</option>
<option value="4">前1週</option>
</select>
</div>
</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="SaveOperationPlan()">確定</button>
</div>
</div>
</div>
</div>
@section Scripts{
<script>
var selected_id = 0;
var type = 9;//全部,清洗,巡檢
var ids = new Array(0);//當前選擇縣市
var powerids = new Array(0);//當前選擇電站
var Allids = new Array(0);//全部縣市
var Allpowerids = new Array(0);//全部電站
var AllpoweridsType = true;
var AllidsType = true;
//#region Array.Remove
Array.prototype.remove = function (val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
//#endregion
$(function () {
//#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));
}
$('#Allcity').trigger("click");
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) {
$("#operation_powerStationselect_modal").empty();
$.each(rel.data, function (index, val) {
$("#operation_powerStationselect_modal").append($("<option />").val(val.id).text(val.name));
});
$('#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>");
powerids.push(String(val.id));
Allpowerids.push(String(val.id));
});
OperationPlanTable.ajax.reload();
})
})
//#endregion
//#region 定時計畫列表 DataTable
OperationPlanTable = $("#OperationPlan_table").DataTable({
"pageLength": 20,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"order": [[8, "desc"]],
"columns": [{
"data": "planId"
}, {
"data": "typeName"
}, {
"data": "powerStationName"
}, {
"data": "schedule"
}, {
"data": "workDay"
}, {
"data": "startTimeString"
}, {
"data": "emailTypeName"
}, {
"data": "createdPerson"
}, {
"data": "createTimeString"
}, {
"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);
},
"ajax": {
"url": "/Operation/OperationPlanTable",
"type": "POST",
"data": function (d) {
d.id = powerids,
/* d.id = [1],*/
d.type = type
},
"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 縣市全選
function Allcity()
{
var Newpowerids = new Array(0);
ids = [];
$.each(Allids, function (index, val) {
var cityid = 'cityID_' + val;
if (AllidsType) {
document.getElementById(cityid).setAttribute("class", 'btn btn-outline-success waves-effect waves-themed ml-2');
ids = [];
powerids = [];
}
else {
document.getElementById(cityid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
ids.push(val);
}
});
if (AllidsType) {
AllidsType = false;
AllpoweridsType = false;
} else {
AllidsType = true;
}
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;
})
OperationPlanTable.ajax.reload();
}
//#endregion
//#region 電站全選
function Allpowerstation() {
if (AllpoweridsType) {
AllpoweridsType = false;
} else {
AllpoweridsType = true;
}
powerids = [];
$.each(Allpowerids, function (index, val) {
if (AllpoweridsType) {
$('#check_' + val).prop("checked", true);
powerids.push(val);
} else {
$('#check_' + val).prop("checked", false);
powerids = [];
}
})
OperationPlanTable.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;
});
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 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;
})
OperationPlanTable.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]);
}
OperationPlanTable.ajax.reload();
})
//#endregion
//#region 更改項目
function ChangeType(Num) {
type = Num;
OperationPlanTable.ajax.reload();
if (Num == 9)
{
document.getElementById("button9").setAttribute("class", "btn btn-success waves-effect waves-themed");
document.getElementById("button1").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
document.getElementById("button0").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
}
else if (Num == 1)
{
document.getElementById("button1").setAttribute("class", "btn btn-success waves-effect waves-themed");
document.getElementById("button9").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
document.getElementById("button0").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
}
else if(Num == 0)
{
document.getElementById("button0").setAttribute("class", "btn btn-success waves-effect waves-themed");
document.getElementById("button1").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
document.getElementById("button9").setAttribute("class", "btn btn-secondary waves-effect waves-themed");
}
}
//#endregion
//#region 新增計畫基本資料
function AddOperationPlan() {
selected_id = 0;
$("#Operation-modal .modal-title").html("定時計劃 - 新增");
$("#Operation-form").trigger("reset");
$("#Operation-modal").modal();
}
//#endregion
//#region 結束時間顯示
//$('#operation_startTime_modal').change(function () {
// var dat = new Date($('#operation_startTime_modal').val());
// var day = new Date(dat.setDate(dat.getDate() + Number($('#operation_workDay_modal').val()) - 1)).toISOString().split("T");
// document.getElementById("operation_endTime_modal").innerHTML = day[0];
//});
//#endregion
//#region 儲存定時計畫資料
function SaveOperationPlan() {
var url = "/Operation/SaveOperationPlan";
var send_data = {
id: selected_id,
PowerStationId: $("#operation_powerStationselect_modal").val(),
Type: $("#operation_type_modal").val(),
ScheduleNum: $("#operation_scheduleNum_modal").val(),
ScheduleType: $("#operation_scheduleType_modal").val(),
WorkDay: $('#operation_workDay_modal').val(),
StartTime: $("#operation_startTime_modal").val(),
//EndTime: document.getElementById("operation_endTime_modal").innerHTML,
Description: $("#operation_description_modal").val(),
EmailType: $('#operation_emailType_modal').val()
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
toast_ok(rel.msg);
OperationPlanTable.ajax.reload();
$('#Operation-modal').modal('hide');
}, 'json');
}
//#endregion
//#region 刪除定時計畫資料
$('#OperationPlan_table').on("click", "button.del-btn", function () {
selected_id = $(this).parents('tr').attr('data-id');
Swal.fire(
{
title: "刪除",
text: "你確定是否刪除此筆資料?",
type: "warning",
icon: 'warning',
showCancelButton: true,
confirmButtonText: "是",
cancelButtonText: "否"
}).then(function (result) {
if (result.value) {
//取得單一系統管理員
var url = "/Operation/DeleteOneOperationPlan/";
var send_data = {
Id: selected_id
}
$.post(url, send_data, function (rel) {
if (rel.code == "9999") {
toast_error(rel.msg);
return;
}
toast_ok(rel.msg);
OperationPlanTable.ajax.reload();
}, 'json');
}
});
});
//#endregion
//#region 取一筆定時計畫
$('#OperationPlan_table').on("click", "button.edit-btn", function () {
$("#Operation-modal .modal-title").html("定時計劃 - 編輯");
selected_id = $(this).parents('tr').attr('data-id');
//取得單一異常設定資料
var url = "/Operation/GetOneOperationPlan/";
var send_data = {
id: selected_id
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
toast_error(rel.msg);
return;
}
$("#operation_powerStationselect_modal").val(rel.data.powerStationId);
$("#operation_type_modal").val(rel.data.type);
$("#operation_scheduleNum_modal").val(rel.data.scheduleNum);
$("#operation_scheduleType_modal").val(rel.data.scheduleType);
$("#operation_workDay_modal").val(rel.data.workDay);
var start = rel.data.startTime.split(' ');
$("#operation_startTime_modal").val(start[0]);
$("#operation_description_modal").val(rel.data.description);
$("#operation_emailType_modal").val(rel.data.emailType);
var dat = new Date(start);
var day = new Date(dat.setDate(dat.getDate() + Number(rel.data.workDay))).toISOString().split("T");
//document.getElementById("operation_endTime_modal").innerHTML = day[0];
$("#Operation-modal").modal();
}, 'json');
});
//#endregion
//#region 儲存Excel
function saveToExcel() {
var url = "/Operation/OperationPlanTable";
var send_data = {
id: powerids,
type: type
};
$.post(url, send_data, function (rel) {
if (rel.data.code != "0000") {
toast_error(rel.msg);
return;
}
$('#NoViewbody').empty();
for (var i = 0; i < rel.data.data.length; i++)
{
var name = "<td>" + String("'" + rel.data.data[i].planId) + "</td>" +
"<td>" + rel.data.data[i].typeName + "</td>" +
"<td>" + rel.data.data[i].powerStationName + "</td>"+
"<td>" + rel.data.data[i].schedule + "</td>" +
"<td>" + rel.data.data[i].workDay + "</td>" +
"<td>" + rel.data.data[i].startTimeString + "</td>" +
"<td>" + rel.data.data[i].emailTypeName + "</td>" +
"<td>" + rel.data.data[i].createdPerson + "</td>" +
"<td>" + rel.data.data[i].createTimeString + "</td>";
$('#NoViewbody').append("<tr>" + name + "</tr>");
}
$("#NoView").table2excel({
// 匯出的Excel文件的名稱
name: "定期計畫建立",
// Excel檔案的名稱
filename: "定期計畫建立",
//檔案字尾名
fileext: ".xlsx",
});
}, 'json');
}
//#endregion
</script>
}