384 lines
23 KiB
HTML
384 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en" class="root-text-xl" xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>緊急應變 - 全方位監控系統</title>
|
|
|
|
<meta name="description" content="Page Title">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- Call App Mode on ios devices -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<!-- Remove Tap Highlight on Windows Phone IE -->
|
|
<meta name="msapplication-tap-highlight" content="no">
|
|
|
|
<!-- base css -->
|
|
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="css/vendors.bundle.css">
|
|
<link id="appbundle" rel="stylesheet" media="screen, print" href="css/app.bundle.css">
|
|
<link id="mytheme" rel="stylesheet" media="screen, print" href="css/themes/cust-theme-3.css">
|
|
<link id="myskin" rel="stylesheet" media="screen, print" href="css/skins/skin-master.css">
|
|
<!-- Place favicon.ico in the root directory -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
|
|
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
|
|
|
|
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" /> -->
|
|
|
|
<link rel="stylesheet" href="css/site.css" />
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="page-wrapper">
|
|
<div class="page-inner">
|
|
<!-- BEGIN Left Aside -->
|
|
<aside class="page-sidebar" style="background: #343a40;">
|
|
<div class="page-logo bg-fusion-900">
|
|
<a href="#" class="page-logo-link press-scale-down d-flex align-items-center position-relative"
|
|
data-toggle="modal" data-target="#modal-shortcut">
|
|
<img src="img/dome.png" aria-roledescription="logo" style="width:unset; height: unset">
|
|
<!-- <span class="page-logo-text mr-1">Farglory Dome</span>
|
|
<span class="position-absolute text-white opacity-50 pos-right mr-2 mb-3 mt-n2">IBMS</span> -->
|
|
</a>
|
|
</div>
|
|
<!-- BEGIN PRIMARY NAVIGATION -->
|
|
|
|
<div class="accordion accordion-hover" id="js-side-menu" >
|
|
<div class="card" style="border: 0; border-radius: 0;">
|
|
<div class="card-header" style="background: #B28F01;">
|
|
<a href="javascript:void(0);" class="card-title text-white" data-toggle="collapse" data-target="#main-to-sub" aria-expanded="true">
|
|
緊急應變
|
|
<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="main-to-sub" class="collapse show" data-parent="#js-side-menu">
|
|
<div class="card-body bg-primary-900 px-0 py-0">
|
|
<ul class="nav-menu js-nav-built my-0">
|
|
<li class="py-2" >
|
|
<a href="javascript:void(0);" class="waves-effect waves-themed" onclick="devicemenuiframe()" title="設備總覽" data-filter-tags="utilities disabled item">
|
|
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">設備總覽</span>
|
|
</a>
|
|
</li>
|
|
<li class="py-2" >
|
|
<a href="javascript:void(0);" class="waves-effect waves-themed" onclick="emergencycontactiframe()" title="聯絡清單" data-filter-tags="utilities disabled item">
|
|
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">聯絡清單</span>
|
|
</a>
|
|
</li>
|
|
<li class="py-2" >
|
|
<a href="javascript:void(0);" class="waves-effect waves-themed" onclick="emergencyrecodeiframe()" title="紀錄查詢" data-filter-tags="utilities disabled item">
|
|
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">紀錄查詢</span>
|
|
</a>
|
|
</li>
|
|
<!-- <li class="py-2" >
|
|
<a href="javascript:void(0);" title="緊急應變設定" data-filter-tags="utilities disabled item">
|
|
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">緊急應變設定</span>
|
|
</a>
|
|
</li> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END PRIMARY NAVIGATION -->
|
|
<!-- NAV FOOTER -->
|
|
|
|
</aside>
|
|
<!-- END Left Aside -->
|
|
<div class="page-content-wrapper">
|
|
<!-- BEGIN Page Header -->
|
|
<header class="page-header bg-fusion-900" role="banner">
|
|
<h1 class="font-weight-bold text-gradient mb-0" style="font-size: 1.8rem;">緊急應變系統</h1>
|
|
|
|
</header>
|
|
<!-- END Page Header -->
|
|
<!-- BEGIN Page Content -->
|
|
<!-- the #js-page-content id is needed for some plugins to initialize -->
|
|
<main id="js-page-content" role="main" class="page-content mt-0">
|
|
|
|
</main>
|
|
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
|
|
<p id="js-color-profile" class="d-none">
|
|
<span class="color-primary-50"></span>
|
|
<span class="color-primary-100"></span>
|
|
<span class="color-primary-200"></span>
|
|
<span class="color-primary-300"></span>
|
|
<span class="color-primary-400"></span>
|
|
<span class="color-primary-500"></span>
|
|
<span class="color-primary-600"></span>
|
|
<span class="color-primary-700"></span>
|
|
<span class="color-primary-800"></span>
|
|
<span class="color-primary-900"></span>
|
|
<span class="color-info-50"></span>
|
|
<span class="color-info-100"></span>
|
|
<span class="color-info-200"></span>
|
|
<span class="color-info-300"></span>
|
|
<span class="color-info-400"></span>
|
|
<span class="color-info-500"></span>
|
|
<span class="color-info-600"></span>
|
|
<span class="color-info-700"></span>
|
|
<span class="color-info-800"></span>
|
|
<span class="color-info-900"></span>
|
|
<span class="color-danger-50"></span>
|
|
<span class="color-danger-100"></span>
|
|
<span class="color-danger-200"></span>
|
|
<span class="color-danger-300"></span>
|
|
<span class="color-danger-400"></span>
|
|
<span class="color-danger-500"></span>
|
|
<span class="color-danger-600"></span>
|
|
<span class="color-danger-700"></span>
|
|
<span class="color-danger-800"></span>
|
|
<span class="color-danger-900"></span>
|
|
<span class="color-warning-50"></span>
|
|
<span class="color-warning-100"></span>
|
|
<span class="color-warning-200"></span>
|
|
<span class="color-warning-300"></span>
|
|
<span class="color-warning-400"></span>
|
|
<span class="color-warning-500"></span>
|
|
<span class="color-warning-600"></span>
|
|
<span class="color-warning-700"></span>
|
|
<span class="color-warning-800"></span>
|
|
<span class="color-warning-900"></span>
|
|
<span class="color-success-50"></span>
|
|
<span class="color-success-100"></span>
|
|
<span class="color-success-200"></span>
|
|
<span class="color-success-300"></span>
|
|
<span class="color-success-400"></span>
|
|
<span class="color-success-500"></span>
|
|
<span class="color-success-600"></span>
|
|
<span class="color-success-700"></span>
|
|
<span class="color-success-800"></span>
|
|
<span class="color-success-900"></span>
|
|
<span class="color-fusion-50"></span>
|
|
<span class="color-fusion-100"></span>
|
|
<span class="color-fusion-200"></span>
|
|
<span class="color-fusion-300"></span>
|
|
<span class="color-fusion-400"></span>
|
|
<span class="color-fusion-500"></span>
|
|
<span class="color-fusion-600"></span>
|
|
<span class="color-fusion-700"></span>
|
|
<span class="color-fusion-800"></span>
|
|
<span class="color-fusion-900"></span>
|
|
</p>
|
|
<!-- END Color profile -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="modal fade modal-fullscreen example-modal-fullscreen" id="SimulationExercisemodal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content h-100 border-0 shadow-0 bg-fusion-800">
|
|
<button type="button" class=" position-absolute pos-right mr-sm-3 mt-sm-3 z-index-space btn btn-danger waves-effect waves-themed" disabled id="closemodal" onclick="Closemodal()">關閉流程</button>
|
|
<div class="modal-body bg-white">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 text-center"><h1 class="mb-3">緊急應變措施</h1></div>
|
|
<ul class="nav nav-tabs mb-3 w-100" role="tablist" id="bigsetting">
|
|
<li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">確認與通報</span> </a> </li>
|
|
<li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">通報火災授信總機</span> </a> </li>
|
|
<li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">通報防災中心</span> </a> </li>
|
|
<li class="nav-item"> <a class="nav-link fs-xl py-3 px-5" data-toggle="tab" href="#" role="tab"> <i class="fal fa-check text-success"></i> <span class="hidden-sm-down ml-1 text-secondary">疏導人群</span> </a> </li>
|
|
</ul>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8 tab-content" id="small_setting">
|
|
<div class="tab-pane fade show active" id="export_modal" role="tabpanel" aria-labelledby="16_modal">
|
|
<div class="row">
|
|
<div class="pr-2" style="width:38.5%">
|
|
<div id="panel-1" class="panel">
|
|
<div class="panel-container show">
|
|
<div class="panel-content">
|
|
<ul class="list-group">
|
|
<li class="list-group-item active"> <i class="fal fa-check text-success"></i> 確認與通報</li>
|
|
<li class="list-group-item"> <i class="fal fa-check text-success"></i> 通報火災授信總機</li>
|
|
<li class="list-group-item"> <i class="fal fa-check text-success"></i> 通報防災中心</li>
|
|
<li class="list-group-item"> <i class="fal fa-check text-success"></i> 疏導人群</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="" style="width:61.5%">
|
|
<div id="panel-2" class="panel">
|
|
<div class="panel-hdr">
|
|
<h2>通報火災授信總機</h2>
|
|
</div>
|
|
<div class="panel-container show">
|
|
<div class="panel-content">
|
|
<div class="panel-tag">
|
|
All panels needs to have an unique ID in order to use the panel funtions. <code>.panel</code> is a container with no padding, <code>.panel-hdr</code> has a <code>min-height</code> value and default <code>flexbox</code> properties. The <code>.panel-toolbar</code> is inserted into <code>.panel-hdr</code> for extra elements. The <code>.panel-container</code> wraps <code>.panel-content</code> which has a predefined padding.
|
|
</div>
|
|
<p>
|
|
Default panel text.
|
|
</p>
|
|
</div>
|
|
<div class="panel-content py-2 border-faded border-left-0 border-right-0 border-bottom-0 text-muted d-flex justify-content-between">
|
|
<div class=""><button type="button" class="btn btn-danger waves-effect waves-themed mr-2"> 不通報 </button><input type="text" class=""></div>
|
|
<div><button type="button" class="btn btn-success waves-effect waves-themed"> 下一步 </button></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div id="panel-12" class="panel">
|
|
<div class="panel-hdr border-faded border-top-0 border-right-0 border-left-0 shadow-0">
|
|
<h2></h2>
|
|
<div class="panel-toolbar pr-3 align-self-end">
|
|
<ul id="demo_panel-tabs" class="nav nav-tabs border-bottom-0 nav-tabs-clean" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark active" data-toggle="tab" href="#tab_content" role="tab">緊急聯絡清單</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link text-dark" data-toggle="tab" href="#tab_dohistory" role="tab">操作歷史</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="panel-container show">
|
|
<div class="panel-content tab-content">
|
|
<div class="tab-pane fade show active" id="tab_content" role="tabpanel" aria-labelledby="tab_content">
|
|
<div>
|
|
組別
|
|
<button type="button" class="btn btn-secondary waves-effect waves-themed mb-2 allbtn" onclick="Allgroupingselect()"> 全選 </button>
|
|
</div>
|
|
<h2 id="button_grouping">
|
|
<button type="button" class="btn btn-success waves-effect waves-themed mb-2"> 主防災中心 </button>
|
|
<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 通報聯絡班 </button>
|
|
<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 外部救援引導班 </button>
|
|
<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 滅火班 </button>
|
|
<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 緊急救護班 </button>
|
|
<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2"> 安全防護班 </button>
|
|
</h2>
|
|
<div id="membertablediv">
|
|
<table class="table table-bordered m-0" id="membertable">
|
|
<thead>
|
|
<tr>
|
|
<th>姓名</th>
|
|
<th>部門</th>
|
|
<th>電話</th>
|
|
<th>LineID</th>
|
|
<th>Email</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="tab_dohistory" role="tabpanel" aria-labelledby="tab_dohistory">
|
|
<div id="dohistorytablediv">
|
|
<table class="table table-bordered m-0" id="dohistorytable">
|
|
<thead>
|
|
<tr>
|
|
<th>項目</th>
|
|
<th>步驟</th>
|
|
<th>結果</th>
|
|
<th>時間</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/vendors.bundle.js"></script>
|
|
<script src="js/app.bundle.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
|
|
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
|
|
|
|
<!-- <script src="js/bajascript/bscriptReq.js"></script>
|
|
<script type='text/javascript'
|
|
src='/module/js/com/tridium/js/ext/require/require.min.js?version=1496767636459'></script>
|
|
<script type='text/javascript'>define('niagaraSystemProperties', function () {
|
|
return {
|
|
};
|
|
});
|
|
</script> -->
|
|
<!-- <script src="js/jquery.min.js"></script> -->
|
|
<!-- <script src="js/bajascript/require.config.js"></script> -->
|
|
<!-- <script src="js/bajatest_kai2.js"></script> -->
|
|
|
|
<script src="js/config.js"></script>
|
|
<script src="js/emergencysite.js"></script>
|
|
<script>
|
|
var json;
|
|
$(function () {
|
|
getalarm()
|
|
setInterval(function () { getalarm() }, 3000);
|
|
devicemenuiframe()
|
|
})
|
|
|
|
function getalarm()
|
|
{
|
|
$.ajax({
|
|
url: baseApiUrl + 'api/Device/Getalarm',
|
|
//data: send_data,
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
success: function (rel, statut) {
|
|
if (rel.code == "9999") {
|
|
console.log(rel.msg);
|
|
return;
|
|
}
|
|
json = rel.data;
|
|
}})
|
|
}
|
|
|
|
function emergencycontactiframe() {
|
|
$.get("views/EmergencyContact.html", function (data) {
|
|
$('#js-page-content').html(data);
|
|
});
|
|
}
|
|
|
|
function emergencyrecodeiframe() {
|
|
$.get("views/EmergencyRecord.html", function (data) {
|
|
$('#js-page-content').html(data);
|
|
});
|
|
}
|
|
|
|
function devicemenuiframe()
|
|
{
|
|
$.get("views/Device_menu.html", function (data) {
|
|
$('#js-page-content').html(data);
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|