FIC_Solar/SolarPower/Views/NoticeSchedule/Index.cshtml
2022-07-25 01:35:52 +08:00

689 lines
36 KiB
Plaintext

@{
ViewData["MainNum"] = "4";
ViewData["SubNum"] = "4";
ViewData["Title"] = "報告發送記錄";
}
@using SolarPower.Models.Role
@model RoleLayerEnum
<link rel="stylesheet" href="~/css/loading.css" />
<div class="loadEffect" id="loading" style="top: 10%;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="container-fluid">
<div class="row flex-nowrap wrapper">
<div class="col-md-2 col-1 pl-0 pr-0 collapse width border-right sidebar vh-100 overflow-auto">
<div class="list-group border-0 card text-center text-md-left" id="sidebar">
<div class="border bg-light rounded-top">
<div class="form-group p-2 m-0 rounded-top">
<input type="text" class="form-control form-control-lg shadow-inset-2 m-0" id="js_list_accordion_filter" placeholder="">
</div>
<div id="js_list_accordion" class="accordion accordion-hover accordion-clean js-list-filter">
<div class="card border-top-left-radius-0 border-top-right-radius-0">
<div class="card-header">
<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-a" aria-expanded="true" data-filter-tags="settings">
<i class="fal fa-globe width-2 fs-xl"></i>
新北市
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-chevron-up fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-chevron-down fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="js_list_accordion-a" class="collapse" data-parent="#js_list_accordion" style="">
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> 新竹交大站</h4>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="#"><i class="fal fa-tachometer-alt-slow"></i> 電錶 R001</a>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</li>
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="#"><i class="fal fa-sun"></i> 日照計 R002</a>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</li>
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="#"><i class="fal fa-thermometer-half"></i> 環境溫度計 R003</a>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</li>
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="#"><i class="fal fa-wind"></i> 風速計 R002</a>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</li>
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="#"><i class="fal fa-sun-dust"></i> 落塵計 R002</a>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</li>
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="#"><i class="fal fa-tint"></i> 濕度計 R002</a>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</li>
<li class="list-group-item pr-0 d-flex justify-content-between">
<a href="#"><i class="fal fa-server"></i> 逆變器 R002</a>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</li>
</ul>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> 新竹動物園站</h4>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</div>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h4 class="font-weight-bold"><i class="fal fa-charging-station"></i> 新竹火車站</h4>
<div class="">
<input type="checkbox" class="" id="defaultUnchecked">
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-b" aria-expanded="false" data-filter-tags="merge">
<i class="fal fa-globe width-2 fs-xl"></i>
台南市
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-chevron-up fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-chevron-down fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="js_list_accordion-b" class="collapse" data-parent="#js_list_accordion">
<div class="card-body">
放台南市list
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-c" aria-expanded="false" data-filter-tags="backup">
<i class="fal fa-globe width-2 fs-xl"></i>
屏東縣
<span class="ml-auto">
<span class="collapsed-reveal">
<i class="fal fa-chevron-up fs-xl"></i>
</span>
<span class="collapsed-hidden">
<i class="fal fa-chevron-down fs-xl"></i>
</span>
</span>
</a>
</div>
<div id="js_list_accordion-c" class="collapse" data-parent="#js_list_accordion">
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<span data-filter-tags="reports file">Reports</span>
</li>
<li class="list-group-item">
<span data-filter-tags="analytics graphs">Analytics</span>
</li>
<li class="list-group-item">
<span data-filter-tags="export download">Export</span>
</li>
<li class="list-group-item">
<span data-filter-tags="storage">Storage</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<span class="filter-message js-filter-message"></span>
</div>
</div>
</div>
<div class="col-auto px-0">
<a href="javascript:;" id="collapse" data-target=".sidebar" data-toggle="collapse" class="btn btn-default btn-xs btn-icon waves-effect waves-themed" style="border-radius: 0;" aria-expanded="true">
<span class="collapsed-reveal"><i class="fal fa-angle-left fa-lg py-3"></i></span>
<span class="collapsed-hidden"><i class="fal fa-angle-right fa-lg py-3"></i></span>
</a>
</div>
<main class="col px-5 pl-md-2 main">
<div class="subheader">
<h1 class="subheader-title">
<i class="subheader-icon fal fa-file-chart-line"></i> @ViewData["Title"]
</h1>
</div>
<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="mb-3 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 btn-change-searchType" id="Group0" onclick="changeType(0,this)">日</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group2" onclick="changeType(2,this)">月</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group3" onclick="changeType(3,this)">年</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-searchType" id="Group1" onclick="changeType(1,this)">自訂區間</button>
</div>
</div>
<div class="pr-3" id="quickSearchOption">
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-quickSearch1" onclick="quickSearch(0)">今天</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-change-quickSearch2" onclick="quickSearch(1)">昨天</button>
</div>
<div class="pr-3">
<div class="btn-group" id="js-demo-nesting" role="group" aria-label="Button group with nested dropdown">
<input type="date" class="form-control" id="DateGet" />
</div>
<div class="btn-group" id="DateGettextdiv" role="group" aria-label="Button group with nested dropdown">
<input type="text" class="form-control" id="DateGettext" />
</div>
</div>
<div class="pr-3">
<button type="button" class="btn btn-primary waves-effect waves-themed" onclick="submit()">查詢</button>
</div>
</div>
<div class="mb-3 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 btn-form-type" onclick="ChangeForm(99, this)">全部</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-form-type" onclick="ChangeForm(0, this)">日報表</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-form-type" onclick="ChangeForm(1, this)">月報表</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-form-type" onclick="ChangeForm(2, this)">綜合報表</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-form-type" onclick="ChangeForm(3, this)">運維通知</button>
</div>
</div>
<div class="pr-3">
<div class="btn-group btn-group-md">
<button type="button" class="btn btn-success waves-effect waves-themed btn-check-type" onclick="ChangeCheck(0, this)">全部</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-check-type" onclick="ChangeCheck(1, this)">成功</button>
<button type="button" class="btn btn-secondary waves-effect waves-themed btn-check-type" onclick="ChangeCheck(2, this)">失敗</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-xl-12">
<div class="card p-3 w-100 overflow-auto">
<table class="table m-0" id="NoticeTable">
<thead>
<tr>
<th>編號</th>
<th>任務建立時間</th>
<th>發送對象</th>
<th>發送內容</th>
<th>發送狀態</th>
<th>發送時間</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
@section Scripts{
<script>
var searchType = 0;//搜尋條件(日,日區間,月,年)
var datepicker;
var timerange;//選取時間
var selecterd_station = [0];
var nowpowerstation = null;//選擇電站
var FormType = 99;//99:全部 0:日報 1:月報 2:綜合 3:運維
var CheckType = 0;//0:全部 1:成功 2:失敗
var NoticeDataTable;
var info;
function showLoading() {
var i = document.getElementById("loading");
i.style.display = "block";
}
function hideLoading() {
var i = document.getElementById("loading");
i.style.display = "none";
}
$(function () {
//#region 預設初始值
var a = $('#collapse').trigger("click");
$('#DateGet').val(new Date().toISOString().substring(0, 10));
$('#DateGet').attr('style', 'width:205px');
$('#DateGettext').attr('style', 'width:205px');
timerange = $('#DateGet').val();
document.getElementById("DateGettextdiv").style.display = "none";//隱藏
//#endregion
//#region 載入左邊選單列表
GetPowerStationCollapse("");
//#endregion
DataTable();
})
//#region 更換搜尋條件(日,日區間,月,年)
function changeType(type, e) {
searchType = type;
if ($(".btn-change-searchType").hasClass("btn-success")) {
$(".btn-change-searchType").removeClass("btn-success").addClass("btn-secondary");
}
document.getElementById("DateGettextdiv").style.display = "none";//隱藏
document.getElementById("DateGet").style.display = "";//隱藏
$(e).removeClass("btn-secondary").addClass("btn-success");
switch (type) {
case 0: $('#DateGet').prop({ 'type': 'date' });
$(".btn-change-quickSearch1").html("今天");
$(".btn-change-quickSearch2").html("昨天");
var today = new Date().toISOString().substring(0, 10);
$('#DateGet').val(today);
break;
case 1:
//#region Date-Picker
datepicker = $('#DateGettext').daterangepicker({
autoUpdateInput: false,
locale: { format: 'YYYY/MM/DD' },
opens: 'left'
});
$('#DateGettext').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('YYYY/MM/DD') + ' - ' + picker.endDate.format('YYYY/MM/DD'));
$(this).trigger('change');
});
$('#DateGettext').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
$(this).trigger('change');
});
//#endregion
$(".btn-change-quickSearch1").html("近7天");
$(".btn-change-quickSearch2").html("近30天");
//#region 預設近7天
var today = new Date();
var dateLimit = new Date(new Date().setDate(today.getDate() - 7));
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);
document.getElementById("DateGettextdiv").style.display = "";//隱藏
document.getElementById("DateGet").style.display = "none";//隱藏
//#endregion
$('#DateGettext').val(dateLimit_format + ' - ' + today_format);
break;
case 2: $('#DateGet').prop({ 'type': 'month' });
$(".btn-change-quickSearch1").html("本月");
$(".btn-change-quickSearch2").html("上個月");
var now_month = new Date().toISOString().substring(0, 7);
$('#DateGet').val(now_month);
break;
case 3:
$(".btn-change-quickSearch1").html("今年");
$(".btn-change-quickSearch2").html("去年");
var now_year = new Date().toISOString().substring(0, 4);
$('#DateGet').prop({ 'type': 'number', 'min': 1900, 'max': now_year, 'step': 1 });
$('#DateGet').val(now_year);
break;
}
if (type == 1) {
timerange = $('#DateGettext').val();
}
else {
timerange = $('#DateGet').val();
}
nowform = null;
}
//#endregion
//#region 快速填入條件(EX.今昨天)
function quickSearch(day) {
switch (searchType) {
case 0:
if (day == 0) {
var today = new Date().toISOString().substring(0, 10);
$('#DateGet').val(today).trigger('change');
} else {
var dateLimit = new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().substring(0, 10);
$('#DateGet').val(dateLimit).trigger('change');
}
break;
case 1:
if (day == 0) {
//#region 預設近7天
var today = new Date();
var dateLimit = new Date(new Date().setDate(today.getDate() - 7));
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);
//#endregion
$('#DateGettext').val(dateLimit_format + ' - ' + today_format).trigger('change');
} else {
//#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);
//#endregion
$('#DateGettext').val(dateLimit_format + ' - ' + today_format).trigger('change');
}
break;
case 2:
if (day == 0) {
var now_month = new Date().toISOString().substring(0, 7);
$('#DateGet').val(now_month).trigger('change');
} else {
var dateLimit = new Date(new Date().setMonth(new Date().getMonth() - 1)).toISOString().substring(0, 7);
$('#DateGet').val(dateLimit).trigger('change');
}
break;
case 3:
if (day == 0) {
var now_year = new Date().toISOString().substring(0, 4);
$('#DateGet').val(now_year).trigger('change');
} else {
var dateLimit = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).toISOString().substring(0, 4);
$('#DateGet').val(dateLimit).trigger('change');
}
break;
}
}
//#endregion
//#region 更換input
$('#DateGet').on('change', function () {
timerange = $('#DateGet').val();
});
//#endregion
//#region 更換inputtext
$('#DateGettext').on('change', function () {
timerange = $('#DateGettext').val();
});
//#endregion
//#region 左邊的搜索欄位
$("#js_list_accordion_filter").change(function (e) {
GetPowerStationCollapse($(this).val());
});
$('#js_list_accordion').on("change", 'input[name="selectedInverterLayer2[]"]', function (event) {
var value = Number(this.value);
if (this.checked) {
selecterd_station.push(value);
} else {
selecterd_station.filter(function (n, i) {
if (n == value) {
selecterd_station.splice(i, 1);
}
});
}
});
function GetPowerStationCollapse(filter) {
showLoading();
var url = "/StationReport/GetPowerStationCollapse"
var send_data = {
Filter: filter
}
$.post(url, send_data, function (rel) {
if (rel.code != "0000") {
hideLoading();
toast_error(rel.msg);
return;
}
var inverterCollapse = rel.data;
$('#js_list_accordion').empty();
if (inverterCollapse.length <= 0) {
$('#js_list_accordion').append("<div>查無結果</div>");
}
var str = "";
Object.keys(inverterCollapse).map(function (key, index) {
str += '<div class="card border-top-left-radius-0 border-top-right-radius-0" id="templateCard">' +
'<div class="card-header">' +
'<a href="javascript:void(0);" class="card-title collapsed" data-toggle="collapse" data-target="#js_list_accordion-' + index + '" aria-expanded="false" data-filter-tags="settings">' +
'<i class="fal fa-globe width-2 fs-xl"></i>' +
'<span class="city-name">' + key + '</span>' +
'<span class="ml-auto">' +
'<span class="collapsed-reveal"><i class="fal fa-chevron-up fs-xl"></i></span>' +
'<span class="collapsed-hidden"><i class="fal fa-chevron-down fs-xl"></i></span>' +
'</span>' +
'</a>' +
'</div>' +
'<div id="js_list_accordion-' + index + '" class="collapse" data-parent="#js_list_accordion-' + index + '" style="">' +
'<div class="card-body">' +
'<ul class="list-group list-group-flush">';
$.each(inverterCollapse[key], function (index, inverter) {
var value = Number(this.value);
var on = false;
var a = selecterd_station.find(function (n, i) {
if (n == value) {
on = true;
}
});
if (on == true) {
str += '<li class="list-group-item">' +
'<div class="d-flex justify-content-start">' +
'<div class="mr-2">' +
'<input type="checkbox" class="" name="selectedInverterLayer2[]" value="' + inverter.id + '" valueName ="' + inverter.name + '" checked>' +
'</div>' +
'<h5 class="font-weight-bold mb-0">' + inverter.name + '</h5>' +
'</div>' +
'</li>';
}
else {
str += '<li class="list-group-item">' +
'<div class="d-flex justify-content-start">' +
'<div class="mr-2">' +
'<input type="checkbox" class="" name="selectedInverterLayer2[]" value="' + inverter.id + '" valueName ="' + inverter.name + '">' +
'</div>' +
'<h5 class="font-weight-bold mb-0">' + inverter.name + '</h5>' +
'</div>' +
'</li>';
}
});
str += '</ul>';
str += '</div>';
str += '</div>';
});
$('#js_list_accordion').append(str);
$('#js_list_accordion').find('.card').first().addClass(" border-top-left-radius-0 border-top-right-radius-0");
$('input[name="selectedInverterLayer2[]"]').each(function () {
if ($.inArray(this, selecterd_station) > -1) {
$(this).prop('checked', true);
}
});
$("#js_list_accordion .collapse").collapse('show');
hideLoading();
}, 'json');
}
//#endregion
//#region 更改查詢表格
function ChangeForm(type, btn) {
FormType = type;
if ($(".btn-form-type").hasClass("btn-success")) {
$(".btn-form-type").removeClass("btn-success").addClass("btn-secondary");
}
$(btn).removeClass("btn-secondary").addClass("btn-success");
}
//#endregion
//#region 更改查詢狀態
function ChangeCheck(type, btn) {
CheckType = type;
if ($(".btn-check-type").hasClass("btn-success")) {
$(".btn-check-type").removeClass("btn-success").addClass("btn-secondary");
}
$(btn).removeClass("btn-secondary").addClass("btn-success");
}
//#endregion
function DataTable()
{
info =
{
timeType : searchType,
timeRange : timerange,
formType : FormType,
checkType : CheckType,
powerstationIds: selecterd_station
};
showLoading();
NoticeDataTable = $("#NoticeTable").DataTable({
"pageLength": 10,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"order": [[5, "desc"]],
"columns": [
{
"data": "id"
}, {
"data": "createdAt"
}, {
"data": "recipientName"
}, {
"data": "emailTypeName"
}, {
"data": "isDeliveryName"
}, {
"data": "deliveryAt"
}],
"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": "/NoticeSchedule/NoticeTable",
"type": "POST",
"data": function (d)
{
d.info = info
},
"dataSrc": function (rel) {
hideLoading();
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) {
hideLoading();
console.log(xhr);
}
});
}
function submit() {
console.log(selecterd_station);
info =
{
timeType: searchType,
timeRange: timerange,
formType: FormType,
checkType: CheckType,
powerstationIds: selecterd_station
};
NoticeDataTable.ajax.reload();
}
</script>
}