ibms-dome/FrontendWebApi/Views/EmergencyRecord/Index.cshtml

@{
    ViewData["MainNum"] = "4";
    ViewData["SubNum"] = "4";
    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="row">
    <div class="col-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="subheader">
                        <h1 class="subheader-title">
                            <span>事件查詢</span>
                        </h1>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3 justify-content-between">
                        <div class="pr-3 ">
                            <div class="btn-group btn-group-md" id="Disasterlist">

                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3 justify-content-between">
                        <div class="pr-3 ">
                            <div class="btn-group btn-group-md" id="buildlist">

                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3">
                        <div class="pr-3 ">
                            <div class="btn-group btn-group-md" id="Typelist">
                                <button type="button" class="btn btn-success waves-effect waves-themed mb-2" onclick="SelectType(2,this)">全選</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="SelectType(1,this)">演習</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="SelectType(0,this)">正式</button>
                            </div>
                        </div>
                        <div class="pr-3">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" 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="">
                            </div>
                        </div>
                    </div>

                    <div class="card border mb-g w-100 mb-5 " id="menucard">
                        <div class="mb-2 card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-end">
                            @*<div class="text-right ">
                                <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" id="addUser-btn" onclick="AddFloor()"> 匯出PDF</a>
                                <a href="javascript:;" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" id="addUser-btn" onclick="AddFloor()"> 匯出Excel</a>
                            </div>*@
                        </div>
                        <div class="card border mb-g mb-2 m-3" id="menucard">
                            <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between">
                                <div class="card-title font-weight-bold">事件列表</div>
                            </div>
                            <div class="card-body">
                                <div class="w-100">
                                    <div class="col-12">
                                        <table id="emergency_event_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>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card border mb-g mb-2 m-3" id="emergencyitem" style="display:none">
                            <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between">
                                <div class="card-title font-weight-bold">事件明細</div>
                            </div>
                            <div class="card-body">
                                <div class="w-100">
                                    <div class="col-12">
                                        <table id="emergency_item_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>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var SelectaDisaster;
        var SelectaBuild;
        var SelectaType = 2;//2:全選 1:演習 0:正式
        var datepicker;
        var EmergencyEventTable;
        var EmergencyItemTable;
        var SelectEvent;
        $(function () {
            //#region Date-Picker
            datepicker = $('#date-range').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY/MM/DD',
                    cancelLabel: '取消',
                    applyLabel:'確定'
                },

                opens: 'left'
            }, function (start, end, label) {
                @* console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));*@
            });

            $('#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
            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);

            EmergencyEventTable = $("#emergency_event_table").DataTable({
                "order": [[5, "desc"]],
                "columns": [
                    {
                        "data": "emergency_event_guid",
                        "render": function (data, type, row, meta) {
                            return meta.row + 1;
                        },
                    },
                    {
                        "data": "building_name"
                    },
                    {
                        "data": "disaster_name"
                    },
                    {
                        "data": "device_name"
                    },
                    {
                        "data": "type"
                    },
                    {
                        "data": "created_at"
                    }
                ],
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('guid', data.emergency_event_guid);
                    $(row).attr('type', data.type);
                    $(row).attr('device', data.device_name);
                },
                "ajax": {
                    "url": "/api/EmergencyRecord/EmergencyRecordTable",
                    "type": "POST",
                    "data": function (d) {
                        d.selectaDisaster = SelectaDisaster,
                        d.selectaBuild = SelectaBuild,
                        d.selectaType = SelectaType,
                        d.dateranger = $('#date-range').val()
                    },
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }
                        data = rel.data;
                        if (data == null || data.length == 0) {

                            this.data = [];
                        }

                        $.each(this.data,function(index, val) {
                            if (val.type == 0) {
                                val.type = "正式";
                            } else {
                                val.type = "演習";
                            }
                        })
                        return data;
                    }
                }
            });

            EmergencyItemTable = $('#emergency_item_table').DataTable({
                "order": [[4, "desc"]],
                "columns": [
                    {
                        "data": "big_setting"
                    },
                    {
                        "data": "step_setting"
                    },
                    {
                        "data": "finished"
                    },
                    {
                        "data": "reason"
                    },
                    {
                        "data": "updated_at",
                        "render": function (data, type, row, meta) {
                            if (data == "0001-01-01 00:00:00") {
                                return "";
                            }
                            return data;
                        },
                    }
                ],
                'createdRow': function (row, data, dataIndex) {
                    $(row).attr('guid', data.emergency_item_guid);
                },
                "ajax": {
                    "url": "/api/EmergencyRecord/EmergencyItemTable",
                    "type": "POST",
                    "data": function (d) {
                        d.event_guid = SelectEvent
                    },
                    "dataSrc": function (rel) {
                        if (rel.code == "9999") {
                            toast_error(rel.msg);
                            return;
                        }
                        data = rel.data;
                        if (data == null || data.length == 0) {

                            this.data = [];
                        }
                        $.each(this.data, function (index, val) {
                            if (val.finished == 0) {
                                val.finished = "未執行";
                            }
                            else if (val.finished == 1)
                            {
                                val.finished = "完成";
                            }
                            else
                            {
                                val.finished = "不執行";
                            }
                        })
                        return data;
                    }
                }
            });

            GetDisasterList();
            GetBuild();
        })

        //取得所有災難別
        function GetDisasterList() {
            var url = "/EmergencyRecord/DisasterList";
            var send_data = {};
            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                    }
                    return;
                }
                else {
                    $('#Disasterlist').empty();
                    var Disasterstr = "";
                    $.each(rel.data, function (index, val) {
                        if (index == 0) {
                            Disasterstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)"> ' + val.name + '</button>';
                        }
                        else {
                            Disasterstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick = "SelectDisaster(' + val.value + ',this)">' + val.name + '</button>';
                        }
                    });
                    $('#Disasterlist').append(Disasterstr);
                    $('#Disasterlist').find('.btn-success').trigger('click');
                    return;
                }
            }, 'json');
        }

        //取得所有棟別
        function GetBuild() {
            var url = "/api/EmergencyRecord/BuildInfoList";
            var send_data = {};
            $.post(url, send_data, function (rel) {
                if (rel.code != "0000") {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                    }
                    return;
                }
                else {
                    $('#buildlist').empty();
                    var buildstr = "";
                    $.each(rel.data, function (index, val) {
                        $('#build_menu_building_modal').append($("<option />").val(val.value).text(val.name));
                        if (index == 0) {
                            SelectBuild = val.value;
                            buildstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\' ,this)">' + val.name + '</button>';
                        }
                        else {
                            buildstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\',this)" >' + val.name + '</button>';
                        }
                    });
                    $('#buildlist').append(buildstr);
                    $('#buildlist').find('.btn-success').trigger('click');

                    //GetMainlistByBuild(SelectBuild);
                    return;
                }
            }, 'json');
        }

        //選擇災難類別
        function SelectDisaster(Disaster, e) {
            SelectaDisaster = Disaster;
            if ($("#Disasterlist").find('.btn').hasClass("btn-success")) {
                $("#Disasterlist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
            }
            $(e).removeClass("btn-secondary").addClass("btn-success");
            reloadeventTable();
        }

        //選擇棟別
        function SelectBulid(build, e) {
            SelectaBuild = build;
            if ($("#buildlist").find('.btn').hasClass("btn-success")) {
                $("#buildlist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
            }
            $(e).removeClass("btn-secondary").addClass("btn-success");
            reloadeventTable();
        }

        //選擇類別(正式 or 演習)
        function SelectType(type, e) {
            SelectaType = type
            if ($("#Typelist").find('.btn').hasClass("btn-success")) {
                $("#Typelist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
            }
            $(e).removeClass("btn-secondary").addClass("btn-success");
            reloadeventTable();
        }

        //查詢近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');
        }

        //改變日期
        $('#date-range').on('change', function () {
            reloadeventTable();
        });

        //點選Event
        $('#emergency_event_table').on("click", "tbody>tr", function () {
            $(this).parents().find('tr').css('background-color', '#fff');
            $(this).css('background-color', '#67B4AC');
            SelectEvent = $(this).attr('guid');
            var title = "事件明細" + "-" + $(this).attr('type')
            if ($(this).attr('device') != undefined) { title += "-" + $(this).attr('device') }
            $('#emergencyitem').find('.card-title').html(title);
            // $('#emergencyitem').find('.card-title').html("事件明細" + "-" + $(this).attr('type') + "-" + $(this).attr('device'));
            EmergencyItemTable.ajax.reload();
            $('#emergencyitem').show();
        })

        //重新執行EventTable
        function reloadeventTable() {
            EmergencyEventTable.ajax.reload();
            $('#emergencyitem').hide();
        }


    </script>
}