SystemDev
/
FCC


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>@ViewData["Title"] - UniversalApi_WebConsole_App</title>
    <link rel="stylesheet" href="~/WebConsole/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/WebConsole/css/site.css" />
    <link rel="stylesheet" href="~/WebConsole/css/commonlayout.css"/>
    <link rel="stylesheet" href="~/WebConsole/css/hint.css" />
    <link rel="stylesheet" href="~/WebConsole/css/index.css"/>
    <style type="text/css">
        .mydiv {
            position: absolute;
            bottom:0%;
            left: 0.8%;
            width: 83%;
            z-index: 9999;
            visibility: hidden;
        }
        .mydivNumber {
            position: absolute;
            z-index: 9999;
            visibility: hidden;
            top: 50%;
            left: 40%;
            width: 30%;
        }
    </style>
</head>

<body id="mainscreen_body">
    <header>
        <div id="common_header" class="commonheader" onclick="AlarmBarClicked(this.id)">
            <img id="common_header_left_normal" v-show="currentAlarmBarItem === undefined ||currentAlarmBarItem.Severity==='Information'"
                 src="~/WebConsole/images/shared/headblueLeft.png" />
            <img id="common_header_left_warning" src="~/WebConsole/images/shared/headYellowLeft.png"
                 v-show="currentAlarmBarItem !== undefined&&currentAlarmBarItem.Severity==='Warning'" />
            <img id="common_header_left_alarm" src="~/WebConsole/images/shared/headRedLeft.png"
                 v-show="currentAlarmBarItem !== undefined&&(currentAlarmBarItem.Severity==='Error'||
                 currentAlarmBarItem.Severity==='Fatal')" />
            <div id="common_header_informations">
                <span id="common_header_left_text" v-if="currentAlarmBarItem !== undefined" style="left: 0%; width: 100%;visibility:hidden;">
                    {{currentAlarmBarItem.Title}}
                </span>
            </div>

            <img id="common_header_right_date_img" src="~/WebConsole/images/shared/headRight.png" />
            <span id="common_header_right_text">
                @DateTime.Now.ToShortDateString()
            </span>
        </div>
    </header>

    <div id="smartfuel_main_view">
        @RenderBody()
        <div id="alarm_information" @*v-show="showAlarmHistoryForm"*@ style="visibility:hidden;">
            <div id="alarm_table">
                <table id="alarm_table_infos" class="alarmTable">
                    <thead class="tableRow">
                        <tr>
                            <th v-for="(h,i) in headers" :key="i" :class="h.class" style="text-align:center;">{{h.text}}</th>
                        </tr>
                    </thead>
                    <tbody class="alarmTableBody">
                        <tr class="tableRow" v-for="(alarm,i) in genericAlarmList" :key="i">
                            @*<td class="tableData2">{{alarm.Severity}}</td>*@
                            <td class="tableDataSeverity">
                                <i :class="(alarm.Severity==='Fatal'||alarm.Severity==='Error')?'redCircle':
                                   (alarm.Severity==='Warning'?'yellowCircle':'blueCircle')"></i>
                            </td>
                            <td class="tableData2Hide" onclick="showDetails(this)">{{alarm.Title}}</td>
                            <td class="tableData2Hide" onclick="showDetails(this)">{{alarm.OriginatorDisplayName}}</td>
                            <td class="tableData2" v-if="alarm.ClosedTimestamp===null">{{formatTime(alarm.OpeningTimestamp)}}</td>
                            <td class="tableData2" v-else>{{formatTime(alarm.OpeningTimestamp)}}({{formatTime(alarm.ClosedTimestamp)}}<a @@click="showCloseReason(alarm)" style="color: #1cd4f8; font-size: 1.2rem; text-decoration: underline; text-decoration-color: #0094ff;">关结</a>)</td>
                            <td class="tableData3" onclick="showDetails(this)">{{alarm.Detail}}</td>
                            <td class="tableData1">
                                <img v-show="alarm.AckedTimestamp === null" class="muteImg" @@click="AckGenericAlarm(alarm)" />
                                <img v-show="alarm.AckedTimestamp !== null" class="alarmImg" @@click="AckGenericAlarm(alarm)" />
                                <img v-show="alarm.ClosedTimestamp===null" class="closeImg" @@click="closeAlarm(alarm)" />
                                <img v-show="alarm.ClosedTimestamp !==null" class="closedImg" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div id="details" style="position:absolute;visibility:hidden;background-color: rgba(0, 0, 0, .4)">
                    <div id="detail_button" class="messageButtonDiv">
                        <input type="button" class="messageButton" value="關閉" onclick="hidenTheDetailsForm()" />
                    </div>

                    <div id="detail_message" class="messageDiv">{{detailMessage}}</div>
                </div>
            </div>
            <div id="alarm_pageInfo">
                <div class="pageStepDiv" onclick="previous()"><img class="pageStepImg" src="~/WebConsole/images/smartFuel/prePage.png"/></div>
                <div class="pageStepDiv" onclick="next()"><img class="pageStepImg" src="~/WebConsole/images/smartFuel/nextPage.png" /></div>
            </div>
            <img id="alarm_closeButton" src="/WebConsole/images/shared/closeButton.png" class="closeAlarmFormButton" onclick="AlarmBarClicked(this.id)" />
            <img id="alarm_query" src="/WebConsole/images/device/filter.png" class="alarmFilter" onclick="showAlarmQuery()" />
            <div id="alarm_query_form" v-show="showFilterForm" class="alarmQueryForm">
                <div id="alarm_query_option1" class="option1Div">
                    <p>篩選條件:</p>
                    <select v-model="option1" @@change="option1Change">
                        <option v-for="(item, i) in options1" :key="i" :value="item.value">{{ item.text }}</option>
                    </select>
                </div>

                <div v-show="option1!==0" id="alarm_query_option2" class="option2Div">
                    @*<p>详细信息:</p>*@
                    <ul class="queryUl">
                        <li v-for="(item, i) in selectedList" :key="i">
                            <p><input type="checkbox" v-model="item.checked" value="item.value" />{{item.value}}</p>
                        </li>
                    </ul>
                </div>
                <div id="alarm_query_search" class="searchDiv">
                    <img id="alarm_query_search_img" src="~/WebConsole/images/onlineMonitor/chartView/table.png" class="searchImg" onclick="showQueryReslut()" />
                </div>
            </div>
        </div>
        <div class="alarmInfoWrap hide">
            <div class="wrap-dialog hide">
                <div class="dialog">
                    <div class="dialog-header">
                        <span class="dialog-title"></span>
                    </div>
                    <div class="dialog-body">
                        <span class="dialog-message"></span>
                    </div>
                    <div class="dialog-footer">
                        <input type="button" class="btn" id="confirm" value="確認" />
                        <input type="button" class="btn ml50" id="cancel" value="取消" />
                    </div>
                </div>
            </div>
        </div>      
    </div>

    <div class="fullScrrenWrap hide">
        <div class="input-dialog" id="input_dialog_wrap">
            <div class="dialog">
                <div class="dialog-header">
                    <span class="input-dialog-title"></span>
                </div>
                <div class="dialog-body">
                    <input class="input-box" id="input_value" type="password"/>
                </div>
                <div class="dialog-footer">
                    <input type="button" class="btn" id="input_confirm" value="確認" />
                    <input type="button" class="btn ml50" id="input_cancel" value="取消" />
                </div>
            </div>
        </div>
    </div>
    <div id="mydiv" class="mydiv"><div id="mydivheader" class="simple-keyboard"></div></div>
    <div id="common_popupMenu">
        <div class="popupMenuItem" v-for="(menuItem, i) in bottomPopupMenuItems " :key="i" @@click="menuItemClicked(menuItem)">
            {{menuItem.dispalyText}}
        </div>
    </div>
    <footer>
        @*<div id="mydiv"><div id="mydivheader" class="simple-keyboard"></div></div>*@
        <div id="common_footer">
            <img id="common_footer_img" draggable="false" src="~/WebConsole/images/shared/smartFuelFooter.png" />
            <div class="menuItemDiv">
                <a class="menuItem" draggable="false" v-for="(item, i) in bottonMenuItems" :key="i" @@click="menuItemClicked(item)" @*:href="item.LinkUrl"*@>
                    <img draggable="false" class="menuItemImg" :src="item.IconUrl" />
                </a>
            </div>


            <!--<a id="common_footer_smartfuel" draggable="false" asp-controller="SmartFuel" asp-action="Index" style="left:40.625%;">
                        <img draggable="false" src="/WebConsole/images/shared/nozzle.png">
                    </a>
                    <a id="common_footer_tank" draggable="false" asp-controller="TankDetails" asp-action="Index" style="left:50.234%;">
                        <img draggable="false" src="/WebConsole/images/shared/tank.png">
                    </a>
                    <a id="common_footer_fairbanks" draggable="false" asp-controller="FairBanks" asp-action="Index" style="left:59.844%;">
                        <img draggable="false" src="/WebConsole/images/shared/fairBanks.png">
                    </a>
                    <a id="common_footer_settings" draggable="false" asp-controller="Config" asp-action="Index" style="left:69.453%;">
                        <img draggable="false" src="/WebConsole/images/shared/settings.png">
                    </a>
                    <a id="common_footer_restart" draggable="false"-->
            @*asp-controller="" asp-action=""*@
            <!--style="left:79.063%;">
                <img draggable="false" src="/WebConsole/images/shared/restart.png">
            </a>
            <a id="common_footer_exist" draggable="false"-->
            @*asp-controller="" asp-action=""*@
            <!--style="left:88.672%;">
                <img draggable="false" src="/WebConsole/images/shared/exit.png">
            </a>-->
        </div>
    </footer>
    <script src="~/WebConsole/js/index.js"></script>
    <script src="~/WebConsole/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/WebConsole/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/WebConsole/js/site.js" asp-append-version="true"></script>
    @*<script src="~/WebConsole/js/signalr/dist/browser/signalr.js"></script>*@
    @*<script src="~/WebConsole/js/alarmBar.js"></script>*@
    <script src="~/WebConsole/js/mqtt.min.js"></script>
    @*<script src="~/WebConsole/js/AlarmBarClient.js"></script>*@
    <script type="text/javascript" src="~/WebConsole/js/vue.min.js"></script>
    <script src="~/WebConsole/js/alarms.js"></script>
    @RenderSection("Scripts", required: false)
    <script>
        // Make the DIV element draggable:
        dragElement(document.getElementById("mydiv"));

        function dragElement(elmnt) {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            if (document.getElementById(elmnt.id + "header")) {
                // if present, the header is where you move the DIV from:
                document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
            } else {
                // otherwise, move the DIV from anywhere inside the DIV:
                elmnt.onmousedown = dragMouseDown;
            }

            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                // get the mouse cursor position at startup:
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                // call a function whenever the cursor moves:
                document.onmousemove = elementDrag;
            }

            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                // calculate the new cursor position:
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                // set the element's new position:
                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
            }

            function closeDragElement() {
                // stop moving when mouse button is released:
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }
    </script>
    <script>
        var alarmsCategoryMap = new Map();
        var alarmsOriginalMap = new Map();
        var layoutvm = new Vue({
            el: '#alarm_information',
            data: {
                page: 1,
                pageCount: 10,
                genericAlarmList: [],
                showAlarmHistoryForm: false,
                showFilterForm: false,
                alarmCount: 0,
                warningCount: 0,
                alarmBarItem: null,
                option1: 0,
                categoryList: [],
                orignialList: [],
                selectedList: [],
                tableDataSource: [],
                detailMessage: "",
                options1: [{ text: "所有", value: 0 }, { text: "來源", value: 1 }, { text: "分類", value: 2 }],
                headers: [{ text: "級別", class: "tableData0" }, { text: "標題", class: "tableData2" }, { text: "來源", class: "tableData2" },
                { text: "發生時間", class: "tableData2" }, { text: "詳情", class: "tableData3" }, { text: "操作", class: "tableData1" }]
            },
            methods: {

            },
            mounted: function () {
                console.log("layout mouted");
            }
        });
        var alarmBarVm = new Vue({
            el: '#common_header',
            data: {
                currentAlarmBarItem: { Title: "", Severity: "Information", PersistId: -1 },
            },
        }
        );//Information Fatal,Error,Warning,

        var hrefTemp = window.location.href;
        var pathTemp = window.location.pathname;
        let basicUrlTemp = href.slice(0, href.indexOf(path));
        var defaultBottomMenu = [{ "IconUrl": "/WebConsole/images/shared/nozzle.png", "LinkUrl": basicUrlTemp + "/SmartFuel", "Action": "" },
        { "IconUrl": "/WebConsole/images/shared/tank.png", "LinkUrl": basicUrlTemp + "/TankDetails", "Action": "" },
        { "IconUrl": "/WebConsole/images/shared/fairBanks.png", "LinkUrl": basicUrlTemp + "/FairBanks", "Action": "" },
        { "IconUrl": "/WebConsole/images/shared/settings.png", "LinkUrl": basicUrlTemp + "/Config", "Action": "" },
        { "IconUrl": "/WebConsole/images/shared/restart.png", "LinkUrl": "", "Action": "" },
        { "IconUrl": "/WebConsole/images/shared/exit.png", "LinkUrl": "", "Action": "" }
        ];
        var bottomMenuVm = new Vue({
            el: '#common_footer',
            data: {
                bottonMenuItems: []
            }
        });
        var bottomPopupMenuVm = new Vue({
            el: '#common_popupMenu',
            data: {
                bottomPopupMenuItems: []
            }
        });

        function getGenericAlarmHistory(initialget, severity, category, originator) {
            var href = window.location.href;
            var path = window.location.pathname;
            let basicUrl = href.slice(0, href.indexOf(path));
            let clientAcceptLanguage = navigator.language;
            let serviceUrl = basicUrl + "/u/?apitype=service&an=GetGenericAlarmHistoryAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
            let parameter = [null, null, severity, originator, category, true, false, layoutvm.page - 1, layoutvm.pageCount, clientAcceptLanguage];
            //[null, null, null, severity,null, true, false, 0, 9999, ""];

            $.ajax({
                url: serviceUrl,
                datatype: "application/json",
                type: 'post',
                contentType: "application/json;charset=utf-8;",
                data: JSON.stringify(parameter),
                beforeSend: function () {
                },
                success: function (data) {
                    console.log(data);
                    layoutvm.genericAlarmList = Array.isArray(data) ? data : [];
                    if (initialget) {
                        if (data.length > 0 && alarmBarVm.currentAlarmBarItem.PersistId === -1)
                            alarmBarVm.currentAlarmBarItem = data[0];
                        var alarmTextSpan = document.getElementById("common_header_left_text");
                        if (alarmTextSpan && alarmTextSpan.style.visibility === 'hidden') {
                            alarmTextSpan.style.visibility = 'visible';
                        }
                    }
                    toAddAlarmAudio();
                },
                error: function (err) {
                    layoutvm.genericAlarmList = [];
                }
            });
        }
        //如果当前页或者顶部栏有报警，需要响警报
        function toAddAlarmAudio() {
            var hasFatalAlarm = false;
            var topBarAlarmInList = false;
            if (layoutvm.genericAlarmList && Array.isArray(layoutvm.genericAlarmList) && layoutvm.genericAlarmList.length > 0) {
                layoutvm.genericAlarmList.forEach(function (alarm) {
                    if ((alarm.Severity === 'Error' || alarm.Severity === "Fatal") &&
                        alarm.AckedTimestamp === null && alarm.ClosedTimestamp === null) {
                        hasFatalAlarm = true;
                    }
                    if (alarmBarVm.currentAlarmBarItem !== undefined &&
                        (alarm.Id === alarmBarVm.currentAlarmBarItem.PersistId ||
                        alarmBarVm.currentAlarmBarItem.Id === alarm.Id)) {
                        topBarAlarmInList = true;
                    }
                });
            }
            if (hasFatalAlarm)
            {
                addAlarmAudio();
            } else if (topBarAlarmInList) {
                removeAlarmAudio();
            }
        
        }

        function getGenericAlarmsSummaryAsync() {
            var href = window.location.href;
            var path = window.location.pathname;
            let basicUrl = href.slice(0, href.indexOf(path));
            let clientAcceptLanguage = navigator.language;
            let serviceUrl = basicUrl + "/u/?apitype=service&an=GetGenericAlarmsSummaryAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
            let parameter = [clientAcceptLanguage];

            $.ajax({
                url: serviceUrl,
                datatype: "application/json",
                type: 'post',
                contentType: "application/json;charset=utf-8;",
                data: JSON.stringify(parameter),
                beforeSend: function () {
                },
                success: function (data) {
                    console.log(data);
                    layoutvm.categoryList = [];
                    layoutvm.orignialList = [];
                    if (data !== null && Array.isArray(data.Categories)) {
                        data.Categories.forEach(function (category, i) {
                            if (category !== null) {
                                layoutvm.categoryList.push({ checked: false, value: category });
                            }
                        });
                    }
                    if (data && Array.isArray(data.Originators)) {
                        data.Originators.forEach(function (originator, i) {
                            if (originator !== null) {
                                layoutvm.orignialList.push({ checked: false, value: originator });
                            }
                        });
                    }
                },
                error: function (err) {
                    layoutvm.categoryList = [];
                    layoutvm.orignialList = [];
                }
            });
        }

        $(document).ready(function () {
            //console.log("Joy layout ready");
            getGenericAlarmHistory(true, null, null, null);

            getWebConsoleAPI(["webapi", ["WebConsole"]], function (apiPath) {
                if (apiPath === null || apiPath === undefined || apiPath === "") {
                    bottomMenuVm.bottonMenuItems = defaultBottomMenu.reverse();
                    return;
                }
                var href = window.location.href;
                var path = window.location.pathname;
                let basicUrl = href.slice(0, href.indexOf(path));
                var serviceUrl = basicUrl + apiPath;

                $.ajax({
                    url: serviceUrl,
                    datatype: "application/json",
                    type: 'post',
                    contentType: "application/json;charset=utf-8;",
                    beforeSend: function () {
                    },
                    success: function (data) {
                        console.log(data);
                        if (data !== null && data.LayoutConfig !== null && data.LayoutConfig !== undefined &&
                            data.LayoutConfig.NaviMenuConfig && data.LayoutConfig.NaviMenuConfig.MenuItemConfigs !== undefined &&
                            Array.isArray(data.LayoutConfig.NaviMenuConfig.MenuItemConfigs) &&
                            data.LayoutConfig.NaviMenuConfig.MenuItemConfigs.length > 0) {
                            var tempItems = [];
                            data.LayoutConfig.NaviMenuConfig.MenuItemConfigs.forEach(function (item, i) {
                                if (item !== null) {
                                    tempItems.push(item);
                                }
                            });
                            bottomMenuVm.bottonMenuItems = tempItems.length > 0 ? tempItems.reverse() : defaultBottomMenu.reverse();
                        } else {
                            bottomMenuVm.bottonMenuItems = defaultBottomMenu.reverse();
                        }
                    },
                    error: function (err) {
                        console.log(err);
                        bottomMenuVm.bottonMenuItems = defaultBottomMenu.reverse();
                    }
                });
            });
        });

        function showDetails(obj) {
            if (obj.offsetWidth < obj.scrollWidth) {
                //var that = this;
                layoutvm.detailMessage = obj.textContent;
                var messageDiv = document.getElementById("details");
                if (messageDiv === null) return;
                messageDiv.style = "position:absolute;width:" + obj.offsetWidth + "px;height:" + 3 * obj.offsetHeight + "px;left:" +
                    obj.offsetLeft + "px;top:" + obj.offsetTop + "px;visibility:visible;border:none;background-color: rgba(0, 0, 0, .4);" +
                    "box-shadow:gainsboro 2px 2px 3px 2px;";
            }
        };
        function showCloseReason(alarm) {
            layoutvm.detailMessage = alarm.ClosedReason;
            //alert(alarm.ClosedReason);
            var messageDiv = document.getElementById("details");
            if (messageDiv === null) return;
            messageDiv.style = "position:absolute;width:20%;height:20%;left:40%;top:30%;visibility:visible;background-image:url('/WebConsole/images/onlineMonitor/chartView/background_query.png');background-repeat:no-repeat;background-size:100% 100%; border:none;" +
                "box-shadow:gainsboro 2px 2px 3px 2px;";
        }
        function hidenTheDetailsForm() {
            layoutvm.detailMessage = "";
            var messageDiv = document.getElementById("details");
            if (messageDiv === null) return;
            messageDiv.style.visibility = "hidden";
        }
        function option1Change() {
            //console.log("Joy option1Change");
            //选择所有时不需要展示其他选项
            layoutvm.selectedList = layoutvm.option1 === 1 ? layoutvm.orignialList :
                (layoutvm.option1 === 2 ? layoutvm.categoryList : []);
        }
        function previous() {
            if (layoutvm.page === 1) { dialogBox("提示信息", "已經是第一頁", null, null); return; }
            layoutvm.page = layoutvm.page - 1;
            if (layoutvm.option1 === 0) {
                getGenericAlarmHistory(true, null, null, null);
                return;
            }
            var temp = [];
            if (layoutvm.selectedList !== null && Array.isArray(layoutvm.selectedList)) {
                layoutvm.selectedList.forEach(function (item, i) {
                    if (item.checked)
                        temp.push(item.value);
                });
            }
            if (layoutvm.option1 === 1) {
                getGenericAlarmHistory(true, null, null, temp);
                return;
            }
            if (layoutvm.option1 === 2) {
                getGenericAlarmHistory(true, null, temp, null);
                return;
            }
            //if (layoutvm.tableDataSource.length === 0) {
            //    layoutvm.genericAlarmList = [];
            //    return;
            //}
            //let dataLength = layoutvm.tableDataSource.length;
            //let startIndex = (layoutvm.page - 1) * layoutvm.pageCount;
            //var count =
            //    (dataLength - layoutvm.pageCount * (layoutvm.page - 1)) > layoutvm.pageCount
            //        ? layoutvm.pageCount
            //        : (dataLength - layoutvm.pageCount * (layoutvm.page - 1));
            //layoutvm.genericAlarmList = layoutvm.tableDataSource.slice(startIndex, startIndex + count);
        }
        function next() {
            //if (layoutvm.option1 !== 0 &&
            //    !(layoutvm.tableDataSource.length > layoutvm.page * layoutvm.pageCount)) {
            //    alert("已是最后一页");
            //    return;
            //}
            if (layoutvm.genericAlarmList.length < layoutvm.pageCount) {
                //alertDialog("已經是最後一頁");
                dialogBox("提示信息", "已經是最後一頁", null, null)
                return;
            }
            layoutvm.page = layoutvm.page + 1;
            if (layoutvm.option1 === 0) {
                getGenericAlarmHistory(true, null, null, null);
                return;
            }

            var temp = [];
            if (layoutvm.selectedList !== null && Array.isArray(layoutvm.selectedList)) {
                layoutvm.selectedList.forEach(function (item, i) {
                    if (item.checked)
                        temp.push(item.value);
                });
            }
            if (layoutvm.option1 === 1) {
                getGenericAlarmHistory(true, null, null, temp);
                return;
            }
            if (layoutvm.option1 === 2) {
                getGenericAlarmHistory(true, null, temp, null);
                return;
            }
            //if (layoutvm.tableDataSource.length === 0) {
            //    layoutvm.genericAlarmList = [];
            //    return;
            //}
            //let dataLength = layoutvm.tableDataSource.length;
            //let startIndex = (layoutvm.page - 1) * layoutvm.pageCount;
            //var count =
            //    (dataLength - layoutvm.pageCount * (layoutvm.page - 1)) > layoutvm.pageCount
            //        ? layoutvm.pageCount
            //        : (dataLength - layoutvm.pageCount * (layoutvm.page - 1));
            //layoutvm.genericAlarmList = layoutvm.tableDataSource.slice(startIndex, startIndex + count);
        }
        function formatTime(timeString) {
            if (timeString === null) {
                return "";
            }
            var currentYear = new Date().getFullYear();

            return (currentYear === new Date(timeString).getFullYear() ? "" : (new Date(timeString).getFullYear() + "-")) + Pad1(new Date(timeString).getMonth()
                + 1, 2) + "-" + Pad1(new Date(timeString).getDate(), 2) + " " + Pad1(new Date(timeString).getHours(), 2) +
                ":" + Pad1(new Date(timeString).getMinutes(), 2);
        }
        function Pad1(num, n) {
            var len = num.toString().length;
            while (len < n) {
                num = "0" + num;
                len++;
            }
            return num;
        }
        function AlarmBarClicked(id) {
            var alarmForm = document.getElementById("alarm_information");
            if (alarmForm === null || alarmForm === undefined) return;
            layoutvm.showAlarmHistoryForm = id === "common_header" ? true : false;
            if (layoutvm.showAlarmHistoryForm) {
                layoutvm.page = 1;
                layoutvm.option1 = 0;
                layoutvm.showFilterForm = false;
                alarmForm.style.visibility = "visible";
                getGenericAlarmHistory(true, null);
            } else {
                alarmForm.style.visibility = "hidden";
            }
        }

        function AckGenericAlarm(alarm) {
            if (alarm === undefined || alarm === null) return;
            var href = window.location.href;
            var path = window.location.pathname;
            let basicUrl = href.slice(0, href.indexOf(path));
            var preAlertMsg = alarm.AckedTimestamp === null ? "靜音" : "解除靜音";

            let serviceUrl = basicUrl + "/u/?apitype=service&an=AckGenericAlarmAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
            let parameter = [alarm.Id, preAlertMsg + "from webconsole", alarm.AckedTimestamp === null ? false : true];
            $.ajax({
                url: serviceUrl,
                datatype: "application/json",
                type: 'post',
                contentType: "application/json;charset=utf-8;",
                data: JSON.stringify(parameter),
                beforeSend: function () {
                },
                success: function (data) {
                    console.log(data);
                    if (data === true) {
                        alarm.AckedTimestamp = alarm.AckedTimestamp === null ? " " : null;

                        toAddAlarmAudio();
                        //alertDialog(preAlertMsg + "成功");
                        dialogBox("提示信息", preAlertMsg + "成功", null, null);
                    }
                },
                error: function (err) {
                    //alertDialog(preAlertMsg + "失敗");
                    dialogBox("提示信息", preAlertMsg + "失敗", null, null);
                }
            });
        }

        function closeAlarm(alarm) {
            if (alarm === undefined || alarm === null) return;
            dialogBox("確定問題已解決?", "標記此问题为已经解决,系统不再追踪此问题( 但如果系统再次检测到问题,则仍会发出通知)", function () {
                var href = window.location.href;
                var path = window.location.pathname;
                let basicUrl = href.slice(0, href.indexOf(path));
                let serviceUrl = basicUrl + "/u/?apitype=service&an=CloseGenericAlarmAsync&pn=ProcessorsDispatcher&en=Edge.Core.Processor.Dispatcher.DefaultDispatcher";
                let parameter = [alarm.Id, "從webconsole關結"];
                $.ajax({
                    url: serviceUrl,
                    datatype: "application/json",
                    type: 'post',
                    contentType: "application/json;charset=utf-8;",
                    data: JSON.stringify(parameter),
                    beforeSend: function () {
                    },
                    success: function (data) {
                        console.log(data);
                        if (data === true) {
                            alarm.ClosedTimestamp = new Date();
                            alarm.ClosedReason = "页面手动关闭";
                            toAddAlarmAudio();
                                //removeAlarmAudio();
                            
                            dialogBox("提示信息", "關閉成功", null, null);
                        }
                    },
                    error: function (err) {
                        dialogBox("提示信息", "關閉失敗", null, null);
                    }
                });
            }, null, true);
        }

        function dialogBox(title, message, yesCallback, noCallback) {
            if (message) {
                $('.dialog-title').html(title);
                $('.dialog-message').html(message);
            }
            // 显示遮罩和对话框
            $('.wrap-dialog').removeClass("hide");
            $('.alarmInfoWrap').removeClass("hide");
            // 确定按钮
            $('#confirm').click(function () {
                $('.wrap-dialog').addClass("hide");
                $('.alarmInfoWrap').addClass("hide");
                noCallback = null;
                if (yesCallback !== null && yesCallback !== undefined) {
                    yesCallback();
                    yesCallback = null;
                }
            });
            // 取消按钮
            $('#cancel').click(function () {
                yesCallback = null;
                $('.wrap-dialog').addClass("hide");
                $('.alarmInfoWrap').addClass("hide");
                if (noCallback !== null && noCallback !== undefined) {
                    noCallback();
                    noCallback = null;
                }

            });
        }
        function inputDialog(title, value, yesCallback, noCallback) {
            if (title) {
                $('.input-dialog-title').html(title);
            }
            // 显示遮罩和对话框
            $('.fullScrrenWrap').removeClass("hide");

            $('#input_value').click(function (e) {
                showKeyboard('number', e.currentTarget);
            });
            // 确定按钮
            $('#input_confirm').click(function () {
                $('.fullScrrenWrap').addClass("hide");
                noCallback = null;
                hideKeyboard();
                if (yesCallback !== null && yesCallback !== undefined) {
                    yesCallback($('#input_value')[0].value);
                    $('#input_value')[0].value = "";
                    //var inputValueItem = document.getElementById("input_value");
                    //inputValueItem.value = "";
                    yesCallback = null;
                }
            });
            // 取消按钮
            $('#input_cancel').click(function () {
                yesCallback = null;
                $('.fullScrrenWrap').addClass("hide");
                $('#input_value')[0].value = "";
                hideKeyboard();
                //var inputValueItem = document.getElementById("input_value");
                //inputValueItem.value = "";
                if (noCallback !== null && noCallback !== undefined) {
                    noCallback();
                    noCallback = null;
                }

            });
        }
        function menuItemClicked(menuItem) {
            var displayPopupMenu = false;
            var action = null;
            if (typeof (menuItem.Action) === "object") {
                action = menuItem.Action;
            } else {
                action = menuItem.Action === undefined || menuItem.Action === null ? null : parsJsonStr(menuItem.Action);
            }
            let popUpMenu = null;
            if (action !== null && action.type === "menu" && action.items) {
                if (!bottomPopupMenuVm) return;
                popUpMenu = document.getElementById("common_popupMenu");
                if (popUpMenu && popUpMenu.style.visibility === "visible") {
                    popUpMenu.style.visibility = "hidden";
                    return;
                }
                bottomPopupMenuVm.bottomPopupMenuItems = action.items;
                displayPopupMenu = true;
            }else if (action !== null && action.type === "input") {
                inputDialog(action.prompt, action.value, function (inputText) {
                    if (inputText !== action.value) {
                        dialogBox("提示信息", "輸入信息錯誤！", null, null);
                        return;
                    }
                    window.location = menuItem.LinkUrl;
                }, null);
            } else {
                window.location = menuItem.LinkUrl;
            }
            
            if (popUpMenu) {
                popUpMenu.style.visibility = displayPopupMenu ? "visible" : "hidden";
            }
        }
        function parsJsonStr(jsonStr) {
            var reslut = null
            try {
                reslut = JSON.parse(jsonStr);
            } catch (e) {
                reslut = null;
            }
            return reslut;
        }
        function showAlarmQuery() {
            //alarmsCategoryMap.clear();
            //alarmsOriginalMap.clear();
            layoutvm.orignialList = [];
            layoutvm.categoryList = [];
            getGenericAlarmsSummaryAsync();
            //if (!layoutvm.showFilterForm)
            //    getGenericAlarmHistory(false, null);
            layoutvm.showFilterForm = !layoutvm.showFilterForm;
        }

        function processAlarms(alarmsList) {
            if (alarmsList === null) {
                layoutvm.categoryList = [];
                layoutvm.orignialList = [];
                return;
            }
            alarmsList.forEach(function (alarm, index) {
                if (alarmsCategoryMap.size > 0 && !alarmsCategoryMap.has(alarm.Category) ||
                    alarmsCategoryMap.size === 0) {
                    if (alarm.Category !== null) {
                        let tempArray = new Array();
                        tempArray.push(alarm);
                        alarmsCategoryMap.set(alarm.Category, tempArray);
                        layoutvm.categoryList.push({ checked: false, value: alarm.Category });
                    }
                } else if (alarmsCategoryMap.has(alarm.Category)) {
                    alarmsCategoryMap.get(alarm.Category).push(alarm);
                }
                if (alarmsOriginalMap.size > 0 && !alarmsOriginalMap.has(alarm.OriginatorDisplayName) ||
                    alarmsOriginalMap.size === 0) {
                    if (alarm.OriginatorDisplayName !== null) {
                        let tempArray = new Array();
                        tempArray.push(alarm);
                        alarmsOriginalMap.set(alarm.OriginatorDisplayName, tempArray);
                        layoutvm.orignialList.push({ checked: true, value: alarm.OriginatorDisplayName });
                    }
                } else if (alarmsOriginalMap.has(alarm.OriginatorDisplayName)) {
                    alarmsOriginalMap.get(alarm.OriginatorDisplayName).push(alarm);
                }
            });
        }

        function showQueryReslut() {
            layoutvm.tableDataSource = [];
            layoutvm.page = 1;
            layoutvm.showFilterForm = false;
            //所有
            if (layoutvm.option1 === 0) {
                getGenericAlarmHistory(true, null, null, null);
                return;
            }
            var temp = [];
            if (layoutvm.selectedList !== null && Array.isArray(layoutvm.selectedList)) {
                layoutvm.selectedList.forEach(function (item, i) {
                    if (item.checked)
                        temp.push(item.value);
                });
            }
            if (layoutvm.option1 === 1) {
                getGenericAlarmHistory(true, null, null, temp);
                return;
            }
            if (layoutvm.option1 === 2) {
                getGenericAlarmHistory(true, null, temp, null);
                return;
            }
            ////来源
            //if (layoutvm.option1 === 1) {
            //    layoutvm.selectedList.forEach(function (item, index) {
            //        if (item.checked && alarmsOriginalMap.has(item.value)) {

            //            layoutvm.tableDataSource = layoutvm.tableDataSource.concat(alarmsOriginalMap.get(item.value));
            //        }
            //    });
            //} else if (layoutvm.option1 === 2) {
            //    layoutvm.selectedList.forEach(function (item, index) {
            //        if (item.checked && alarmsCategoryMap.has(item.value)) {

            //            layoutvm.tableDataSource = layoutvm.tableDataSource.concat(alarmsCategoryMap.get(item.value));
            //        }
            //    });
            //}
            //if (layoutvm.tableDataSource.length > 0) {
            //    let count = layoutvm.tableDataSource.length < layoutvm.pageCount ? layoutvm.tableDataSource.length : layoutvm.pageCount;
            //    layoutvm.genericAlarmList = layoutvm.tableDataSource.slice(0, count);
            //} else
            //    layoutvm.genericAlarmList = [];
        }
        const Keyboard = window.SimpleKeyboard.default;
        var currentElement = null;

        const myKeyboard = new Keyboard({
            onChange: input => onChange(input),
            onKeyPress: button => onKeyPress(button),
            layout: {
                'number': [
                    '1 2 3 {bksp}',
                    '4 5 6 {close}',
                    '7 8 9 0'
                ],
                'default': [
                    '{close} 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
                    '{tab} q w e r t y u i o p [ ] \\',
                    '{lock} a s d f g h j k l ; \' {enter}',
                    '{shift} z x c v b n m , . / `',
                    '.com @@ {space}'
                ],
                'shift': [
                    '{close} ! @@ # $ % ^ & * ( ) _ + {bksp}',
                    '{tab} Q W E R T Y U I O P { } |',
                    '{lock} A S D F G H J K L : " {enter}',
                    '{shift} Z X C V B N M < > ? ~',
                    '.com  {space}'
                ]
            },
            display: {
                '{bksp}': 'Backspace',
                '{tab}': 'Tab',
                '{lock}': 'CapsLock',
                '{enter}': 'Enter',
                '{shift}': 'Shift',
                '{close}': 'Close',
                '{space}': 'Space'
            }
        });

        function onChange(input) {
            if (input === "") return;
            var temp = document.querySelector(".input");
            var keyBoardInput = myKeyboard.input;
            var tmp = myKeyboard.getOptions("theme");
            //document.querySelector(".input").value = input;

            if (currentElement !== null) {
                var currentElementValue = currentElement.value;
                if (currentElementValue !== null && currentElementValue !== "") {
                    var selectStart = currentElement.selectionStart;
                    var startValue = currentElementValue.slice(0, selectStart);
                    var endValue = currentElementValue.slice(selectStart);
                    currentElement.value = startValue + input + endValue;
                    currentElement.selectionEnd = currentElement.selectionStart = selectStart + 1;
                } else {
                    currentElement.value = input;
                }
                currentElement.dispatchEvent(new Event('input'))
            }
            myKeyboard.input.default = "";
            //selectionEnd: 5
            //selectionStart: 5
            console.log("Input changed", input);
        }

        function showKeyboard(layout, element) {
            var mydivel = document.getElementById("mydiv");
            if (mydivel === null || mydivel === undefined) return;

            mydivel.className = layout === "number" ? "mydivNumber" : "mydiv";
            if (layout === "number") {
                myKeyboard.setOptions({ theme: "hg-theme-default hg-layout-numeric numeric-theme" });
            } else {
                myKeyboard.setOptions({ theme: "hg-theme-default"});
            }
            currentElement = element;
            myKeyboard.setOptions({ layoutName: layout });
            mydivel.style.visibility = 'visible'
        }
        function hideKeyboard() {
            var keyboardEl = document.getElementById("mydiv");
            if (keyboardEl && keyboardEl.style.visibility === 'visible') {
                keyboardEl.style.visibility = 'hidden';
            }
        }
        function onKeyPress(button) {
            if (button === "{close}") {
                currentElement = null;
                hideKeyboard();
            }
            else if (button === "{shift}") {
                handleShift();
            } else if (button === "{bksp}") {
                if (currentElement === null || currentElement.selectionStart === 0) {
                    return;
                }
                var tempValue = currentElement.value;
                if (myKeyboard.input.default === "" && tempValue !== null && tempValue !== "") {
                    var selectionStart = currentElement.selectionStart;
                    var startValue = tempValue.slice(0, selectionStart-1);
                    var endValue = tempValue.slice(selectionStart);
                    currentElement.value = startValue + endValue;
                    currentElement.dispatchEvent(new Event('input'));
                    currentElement.selectionEnd = currentElement.selectionStart = selectionStart - 1;
                    //currentElement.value = tempValue.slice(0, tempValue.length - 1);
                }
            }
            else
                console.log("Button pressed", button);
        }

        function handleShift() {
            let currentLayout = myKeyboard.options.layoutName;
            let shiftToggle = currentLayout === "default" ? "shift" : "default";
            myKeyboard.setOptions({ layoutName: shiftToggle });
        }

        setInterval(function () {
            var textspan = document.getElementById("common_header_right_text");
            if (textspan != null) {
                var currentDate = new Date();
                var month = (currentDate.getMonth() + 1).toString().length < 2
                    ? "0" + (currentDate.getMonth() + 1).toString()
                    : (currentDate.getMonth() + 1).toString();
                var date = currentDate.getDate() < 10
                    ? "0" + currentDate.getDate().toString()
                    : currentDate.getDate().toString();
                textspan.innerHTML = currentDate.getFullYear() + "/" + month + "/" + date;
            }

        }, 10 * 60 * 1000);
    </script>
</body>
</html>