1496 lines
77 KiB
HTML
1496 lines
77 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
Template Name: SmartAdmin Responsive WebApp - Template build with Twitter Bootstrap 4
|
||
Version: 4.5.1
|
||
Author: Sunnyat A.
|
||
Website: http://gootbootstrap.com
|
||
Purchase: https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0?ref=myorange
|
||
License: You must have a valid license purchased only from wrapbootstrap.com (link above) in order to legally use this theme for your project.
|
||
-->
|
||
<html lang="zh-hant-TW" class="root-text-lg">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>
|
||
Marketing Dashboard - Application Intel - SmartAdmin v4.5.1
|
||
</title>
|
||
<meta name="description" content="Marketing Dashboard">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
|
||
<!-- 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="lib/vendors.bundle.css">
|
||
<link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
|
||
<link id="mytheme" rel="stylesheet" media="screen, print" href="#">
|
||
<link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
|
||
<link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
|
||
<link rel="stylesheet" href="lib/dropzone/dropzone.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">
|
||
<!-- Font Awesome -->
|
||
<link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
|
||
<link href="lib/chart.js/Chart.min.css" rel="stylesheet" />
|
||
<link href="lib/jstree-master/themes/default/style.min.css" rel="stylesheet" />
|
||
<link href="lib/jstree-master/themes/default-dark/style.min.css" rel="stylesheet" />
|
||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
<!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
|
||
<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
|
||
<link rel="stylesheet" href="css/site.css" />
|
||
<link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
|
||
<link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
|
||
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
|
||
</head>
|
||
<!-- BEGIN Body -->
|
||
<!-- Possible Classes
|
||
|
||
* 'header-function-fixed' - header is in a fixed at all times
|
||
* 'nav-function-fixed' - left panel is fixed
|
||
* 'nav-function-minify' - skew nav to maximize space
|
||
* 'nav-function-hidden' - roll mouse on edge to reveal
|
||
* 'nav-function-top' - relocate left pane to top
|
||
* 'mod-main-boxed' - encapsulates to a container
|
||
* 'nav-mobile-push' - content pushed on menu reveal
|
||
* 'nav-mobile-no-overlay' - removes mesh on menu reveal
|
||
* 'nav-mobile-slide-out' - content overlaps menu
|
||
* 'mod-bigger-font' - content fonts are bigger for readability
|
||
* 'mod-high-contrast' - 4.5:1 text contrast ratio
|
||
* 'mod-color-blind' - color vision deficiency
|
||
* 'mod-pace-custom' - preloader will be inside content
|
||
* 'mod-clean-page-bg' - adds more whitespace
|
||
* 'mod-hide-nav-icons' - invisible navigation icons
|
||
* 'mod-disable-animation' - disables css based animations
|
||
* 'mod-hide-info-card' - hides info card from left panel
|
||
* 'mod-lean-subheader' - distinguished page header
|
||
* 'mod-nav-link' - clear breakdown of nav links
|
||
|
||
>>> more settings are described inside documentation page >>>
|
||
-->
|
||
|
||
<body class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">
|
||
<!-- DOC: script to save and load page settings -->
|
||
<script>
|
||
/**
|
||
* This script should be placed right after the body tag for fast execution
|
||
* Note: the script is written in pure javascript and does not depend on thirdparty library
|
||
**/
|
||
'use strict';
|
||
|
||
var classHolder = document.getElementsByTagName("BODY")[0],
|
||
/**
|
||
* Load from localstorage
|
||
**/
|
||
themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
|
||
{},
|
||
themeURL = themeSettings.themeURL || '',
|
||
themeOptions = themeSettings.themeOptions || '';
|
||
/**
|
||
* Load theme options
|
||
**/
|
||
if (themeSettings.themeOptions) {
|
||
classHolder.className = themeSettings.themeOptions;
|
||
console.log("%c✔ Theme settings loaded", "color: #148f32");
|
||
}
|
||
else {
|
||
console.log("%c✔ Heads up! Theme settings is empty or does not exist, loading default settings...", "color: #ed1c24");
|
||
}
|
||
if (themeSettings.themeURL && !document.getElementById('mytheme')) {
|
||
var cssfile = document.createElement('link');
|
||
cssfile.id = 'mytheme';
|
||
cssfile.rel = 'stylesheet';
|
||
cssfile.href = themeURL;
|
||
document.getElementsByTagName('head')[0].appendChild(cssfile);
|
||
|
||
}
|
||
else if (themeSettings.themeURL && document.getElementById('mytheme')) {
|
||
document.getElementById('mytheme').href = themeSettings.themeURL;
|
||
}
|
||
/**
|
||
* Save to localstorage
|
||
**/
|
||
var saveSettings = function () {
|
||
themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
|
||
return /^(nav|header|footer|mod|display)-/i.test(item);
|
||
}).join(' ');
|
||
if (document.getElementById('mytheme')) {
|
||
themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
|
||
};
|
||
localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
|
||
}
|
||
/**
|
||
* Reset settings
|
||
**/
|
||
var resetSettings = function () {
|
||
localStorage.setItem("themeSettings", "");
|
||
}
|
||
|
||
</script>
|
||
<!-- BEGIN Page Wrapper -->
|
||
<div class="page-wrapper">
|
||
<div class="page-inner">
|
||
<!-- BEGIN Left Aside -->
|
||
<!-- END Left Aside -->
|
||
<div class="page-content-wrapper">
|
||
<!-- BEGIN Page Header -->
|
||
<header class="page-header" role="banner">
|
||
<!--we need this logo when user switches to nav-function-top-->
|
||
<div class="page-logo">
|
||
<a href="javascript:;" name="topFunBtn" data-page="dashboard" class="page-logo-link press-scale-down d-flex align-items-center position-relative">
|
||
<img name="webLogo" src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
|
||
|
||
<!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
|
||
<!--<span class="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
|
||
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>-->
|
||
</a>
|
||
|
||
</div>
|
||
<!--DOC: nav menu layout change shortcut-->
|
||
<div class="hidden-md-down dropdown-icon-menu position-relative">
|
||
<a href="#" class="header-btn btn js-waves-off" data-action="toggle"
|
||
data-class="nav-function-hidden" title="Hide Navigation">
|
||
<i class="ni ni-menu"></i>
|
||
</a>
|
||
<ul>
|
||
<li>
|
||
<a href="#" class="btn js-waves-off" data-action="toggle"
|
||
data-class="nav-function-minify" title="Minify Navigation">
|
||
<i class="ni ni-minify-nav"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="btn js-waves-off" data-action="toggle"
|
||
data-class="nav-function-fixed" title="Lock Navigation">
|
||
<i class="ni ni-lock-nav"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!--DOC: mobile button appears during mobile width-->
|
||
<div class="hidden-lg-up">
|
||
<a href="#" class="header-btn btn press-scale-down" data-action="toggle"
|
||
data-class="mobile-nav-on">
|
||
<i class="ni ni-menu"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="dropdown">
|
||
<a class="dropdown-toggle" href="javascript:;" role="button" id="buiActDrop"
|
||
data-target="buiList" data-toggle="dropdown" aria-haspopup="true">
|
||
|
||
</a>
|
||
<div id="buiList" class="dropdown-menu dropdown-select-menu js-auto-close">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ml-auto d-flex" id="froLisPage">
|
||
|
||
</div>
|
||
<div class="ml-auto d-flex mr-3">
|
||
<!--app user menu-->
|
||
<div class="dropdown">
|
||
<a href="#" data-toggle="dropdown" data-target="logoutList" class="d-flex align-items-center justify-content-center ml-2">
|
||
<!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
|
||
alt="Dr. Codex Lantern">-->
|
||
<!--you can also add username next to the avatar with the codes below:-->
|
||
<span id="usrName" class="ml-1 mr-2 text-truncate text-truncate-header hidden-xs-down"></span>
|
||
<i class="ni ni-chevron-down hidden-xs-down"></i>
|
||
</a>
|
||
<div id="logoutList" class="dropdown-menu dropdown-menu-right dropdown-lg">
|
||
|
||
<a id="logout" href="javascript:;" class="dropdown-item fw-500 pt-3 pb-3">
|
||
<span>登出</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ml-2 text-center">
|
||
<label class="mb-0 fs-1-2">Diamond Controls<span class="fs-09 position-absolute">®</span></label><br>
|
||
<label class="mb-0 fs-1-1">智慧大樓管理平台</label>
|
||
</div>
|
||
</header>
|
||
<!-- END Page Header -->
|
||
<!-- BEGIN Page Content -->
|
||
<!-- the #js-page-content id is needed for some plugins to initialize -->
|
||
<!--@RenderBody()-->
|
||
<div id="app">
|
||
|
||
</div>
|
||
|
||
<!-- this overlay is activated only when mobile menu is triggered -->
|
||
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
|
||
|
||
<div id="sysMonNavbar" class="yt-navbar yt-left-navbar">
|
||
<div class="yt-navbar-content">
|
||
<ul id="sysMonBtnList">
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- END Page Content -->
|
||
<!-- BEGIN Page Footer -->
|
||
<!--<footer class="page-footer" role="contentinfo">
|
||
<div class="d-flex align-items-center flex-1 text-muted">
|
||
<span class="hidden-md-down fw-700">2022 © SmartAdmin by <a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
|
||
</div>
|
||
<div>
|
||
<ul class="list-table m-0">
|
||
<li><a href="intel_introduction.html" class="text-secondary fw-700">About</a></li>
|
||
<li class="pl-3"><a href="info_app_licensing.html" class="text-secondary fw-700">License</a></li>
|
||
<li class="pl-3"><a href="info_app_docs.html" class="text-secondary fw-700">Documentation</a></li>
|
||
<li class="pl-3 fs-xl"><a href="https://wrapbootstrap.com/user/MyOrange" class="text-secondary" target="_blank"><i class="fal fa-question-circle" aria-hidden="true"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</footer>-->
|
||
<!-- END Page Footer -->
|
||
<!-- BEGIN Shortcuts -->
|
||
<!-- END Shortcuts -->
|
||
<!-- BEGIN Color profile -->
|
||
<!-- this area is hidden and will not be seen on screens or screen readers -->
|
||
<!-- we use this only for CSS color refernce for JS stuff -->
|
||
<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>
|
||
<!-- END Page Wrapper -->
|
||
<!-- BEGIN Messenger -->
|
||
<div class="modal fade js-modal-messenger modal-backdrop-transparent" tabindex="-1" role="dialog"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-right">
|
||
<div class="modal-content h-100">
|
||
<div class="dropdown-header bg-trans-gradient d-flex align-items-center w-100">
|
||
<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
|
||
<span class="mr-2">
|
||
<span class="rounded-circle profile-image d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
|
||
</span>
|
||
<div class="info-card-text">
|
||
<a href="javascript:void(0);" class="fs-lg text-truncate text-truncate-lg text-white"
|
||
data-toggle="dropdown" aria-expanded="false">
|
||
Tracey Chang
|
||
<i class="fal fa-angle-down d-inline-block ml-1 text-white fs-md"></i>
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Send Email</a>
|
||
<a class="dropdown-item" href="#">Create Appointment</a>
|
||
<a class="dropdown-item" href="#">Block User</a>
|
||
</div>
|
||
<span class="text-truncate text-truncate-md opacity-80">IT Director</span>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
|
||
data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true"><i class="fal fa-times"></i></span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body p-0 h-100 d-flex">
|
||
<!-- BEGIN msgr-list -->
|
||
<div class="msgr-list d-flex flex-column bg-faded border-faded border-top-0 border-right-0 border-bottom-0 position-absolute pos-top pos-bottom">
|
||
<div>
|
||
<div class="height-4 width-3 h3 m-0 d-flex justify-content-center flex-column color-primary-500 pl-3 mt-2">
|
||
<i class="fal fa-search"></i>
|
||
</div>
|
||
<input type="text" class="form-control bg-white" id="msgr_listfilter_input"
|
||
placeholder="Filter contacts" aria-label="FriendSearch"
|
||
data-listfilter="#js-msgr-listfilter">
|
||
</div>
|
||
<div class="flex-1 h-100 custom-scroll">
|
||
<div class="w-100">
|
||
<ul id="js-msgr-listfilter" class="list-unstyled m-0">
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="tracey chang online">
|
||
<div class="d-table-cell align-middle status status-success status-sm ">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-d.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
Tracey Chang
|
||
<small class="d-block font-italic text-success fs-xs">
|
||
Online
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="oliver kopyuv online">
|
||
<div class="d-table-cell align-middle status status-success status-sm ">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
Oliver Kopyuv
|
||
<small class="d-block font-italic text-success fs-xs">
|
||
Online
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="dr john cook phd away">
|
||
<div class="d-table-cell align-middle status status-warning status-sm ">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
Dr. John Cook PhD
|
||
<small class="d-block font-italic fs-xs">
|
||
Away
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="ali amdaney online">
|
||
<div class="d-table-cell align-middle status status-success status-sm ">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
Ali Amdaney
|
||
<small class="d-block font-italic fs-xs text-success">
|
||
Online
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="sarah mcbrook online">
|
||
<div class="d-table-cell align-middle status status-success status-sm">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
Sarah McBrook
|
||
<small class="d-block font-italic fs-xs text-success">
|
||
Online
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="ali amdaney offline">
|
||
<div class="d-table-cell align-middle status status-sm">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-a.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
oliver.kopyuv@gotbootstrap.com
|
||
<small class="d-block font-italic fs-xs">
|
||
Offline
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="ali amdaney busy">
|
||
<div class="d-table-cell align-middle status status-danger status-sm">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
oliver.kopyuv@gotbootstrap.com
|
||
<small class="d-block font-italic fs-xs text-danger">
|
||
Busy
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="ali amdaney offline">
|
||
<div class="d-table-cell align-middle status status-sm">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
oliver.kopyuv@gotbootstrap.com
|
||
<small class="d-block font-italic fs-xs">
|
||
Offline
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="d-table w-100 px-2 py-2 text-dark hover-white"
|
||
data-filter-tags="ali amdaney inactive">
|
||
<div class="d-table-cell align-middle">
|
||
<span class="profile-image-md rounded-circle d-block"
|
||
style="background-image:url('img/demo/avatars/avatar-m.png'); background-size: cover;"></span>
|
||
</div>
|
||
<div class="d-table-cell w-100 align-middle pl-2 pr-2">
|
||
<div class="text-truncate text-truncate-md">
|
||
+714651347790
|
||
<small class="d-block font-italic fs-xs opacity-50">
|
||
Missed Call
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div class="filter-message js-filter-message"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a class="fs-xl d-flex align-items-center p-3">
|
||
<i class="fal fa-cogs"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- END msgr-list -->
|
||
<!-- BEGIN msgr -->
|
||
<div class="msgr d-flex h-100 flex-column bg-white">
|
||
<!-- BEGIN custom-scroll -->
|
||
<div class="custom-scroll flex-1 h-100">
|
||
<div id="chat_container" class="w-100 p-4">
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment">
|
||
<div class="time-stamp text-center mb-2 fw-400">
|
||
Jun 19
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment chat-segment-sent">
|
||
<div class="chat-message">
|
||
<p>
|
||
Hey Tracey, did you get my files?
|
||
</p>
|
||
</div>
|
||
<div class="text-right fw-300 text-muted mt-1 fs-xs">
|
||
3:00 pm
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment chat-segment-get">
|
||
<div class="chat-message">
|
||
<p>
|
||
Hi
|
||
</p>
|
||
<p>
|
||
Sorry going through a busy time in office. Yes I analyzed the solution.
|
||
</p>
|
||
<p>
|
||
It will require some resource, which I could not manage.
|
||
</p>
|
||
</div>
|
||
<div class="fw-300 text-muted mt-1 fs-xs">
|
||
3:24 pm
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment chat-segment-sent chat-start">
|
||
<div class="chat-message">
|
||
<p>
|
||
Okay
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment chat-segment-sent chat-end">
|
||
<div class="chat-message">
|
||
<p>
|
||
Sending you some dough today, you can allocate the resources to this
|
||
project.
|
||
</p>
|
||
</div>
|
||
<div class="text-right fw-300 text-muted mt-1 fs-xs">
|
||
3:26 pm
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment chat-segment-get chat-start">
|
||
<div class="chat-message">
|
||
<p>
|
||
Perfect. Thanks a lot!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment chat-segment-get">
|
||
<div class="chat-message">
|
||
<p>
|
||
I will have them ready by tonight.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment -->
|
||
<div class="chat-segment chat-segment-get chat-end">
|
||
<div class="chat-message">
|
||
<p>
|
||
Cheers
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment -->
|
||
<!-- start .chat-segment for timestamp -->
|
||
<div class="chat-segment">
|
||
<div class="time-stamp text-center mb-2 fw-400">
|
||
Jun 20
|
||
</div>
|
||
</div>
|
||
<!-- end .chat-segment for timestamp -->
|
||
</div>
|
||
</div>
|
||
<!-- END custom-scroll -->
|
||
<!-- BEGIN msgr__chatinput -->
|
||
<div class="d-flex flex-column">
|
||
<div class="border-faded border-right-0 border-bottom-0 border-left-0 flex-1 mr-3 ml-3 position-relative shadow-top">
|
||
<div class="pt-3 pb-1 pr-0 pl-0 rounded-0" tabindex="-1">
|
||
<div id="msgr_input" contenteditable="true"
|
||
data-placeholder="Type your message here..."
|
||
class="height-10 form-content-editable"></div>
|
||
</div>
|
||
</div>
|
||
<div class="height-8 px-3 d-flex flex-row align-items-center flex-wrap flex-shrink-0">
|
||
<a href="javascript:void(0);" class="btn btn-icon fs-xl width-1 mr-1"
|
||
data-toggle="tooltip" data-original-title="More options" data-placement="top">
|
||
<i class="fal fa-ellipsis-v-alt color-fusion-300"></i>
|
||
</a>
|
||
<a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
|
||
data-original-title="Attach files" data-placement="top">
|
||
<i class="fal fa-paperclip color-fusion-300"></i>
|
||
</a>
|
||
<a href="javascript:void(0);" class="btn btn-icon fs-xl mr-1" data-toggle="tooltip"
|
||
data-original-title="Insert photo" data-placement="top">
|
||
<i class="fal fa-camera color-fusion-300"></i>
|
||
</a>
|
||
<div class="ml-auto">
|
||
<a href="javascript:void(0);" class="btn btn-info">Send</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END msgr__chatinput -->
|
||
</div>
|
||
<!-- END msgr -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
|
||
<!-- END Messenger -->
|
||
<!-- BEGIN Page Settings -->
|
||
<!-- END Page Settings -->
|
||
<!-- base vendor bundle:
|
||
DOC: if you remove pace.js from core please note on Internet Explorer some CSS animations may execute before a page is fully loaded, resulting 'jump' animations
|
||
+ pace.js (recommended)
|
||
+ jquery.js (core)
|
||
+ jquery-ui-cust.js (core)
|
||
+ popper.js (core)
|
||
+ bootstrap.js (core)
|
||
+ slimscroll.js (extension)
|
||
+ app.navigation.js (core)
|
||
+ ba-throttle-debounce.js (core)
|
||
+ waves.js (extension)
|
||
+ smartpanels.js (extension)
|
||
+ src/../jquery-snippets.js (core) -->
|
||
<!-- verdors.bundle.js 已含有 jquery Library v3.5.1-->
|
||
<script src="lib/vendors.bundle.js"></script>
|
||
<!-- toast 第三方套件 若 require 此套件只能用 define 使用，先暫時 html 引用-->
|
||
<script src="lib/notifications/toastr/toastr.min.js"></script>
|
||
<script src="js/toast.js"></script>
|
||
<script src="lib/echarts.min.js"></script>
|
||
<!--The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below:-->
|
||
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
|
||
|
||
|
||
|
||
<!--Bajascript-->
|
||
<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 src='js/bajascript/require.js'></script>
|
||
|
||
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
|
||
<script src="js/forge/forgemodel.js"></script>
|
||
<script src="js/yourteam/plugins/yt-alert/ytpop-alert.js"></script>
|
||
|
||
|
||
<script type='text/javascript'>
|
||
define('niagaraSystemProperties', function () {
|
||
return {
|
||
};
|
||
});
|
||
</script>
|
||
<script src="js/n4js/bajatest.js"></script>
|
||
<script src="js/n4js/electricmeterbaja.js"></script>
|
||
<script src="js/bajascript/require.config.js"></script>
|
||
<script src="js/FileSaver.js"></script>
|
||
|
||
|
||
|
||
<script>
|
||
|
||
/*$('#js-page-content').smartPanel();*/
|
||
var cookies = null;
|
||
var jwt = null;
|
||
var loadingTip = '';
|
||
var pageAct = {}; //記錄全頁面已選擇項目
|
||
pageAct.AreaTag = "";
|
||
if (location.href.indexOf("ord") != -1) {
|
||
location.href = "/file/index.html"
|
||
}
|
||
// 執行初步 Loading
|
||
var loadEle = pageLoading();
|
||
var errRecTable = null, opeRecTable = null;
|
||
|
||
/**
|
||
* 頁面 Loading 建立
|
||
* */
|
||
function pageLoading(text = null) {
|
||
let background = $(`<div class="loading-bg"></div>`);
|
||
let aleObj = YT.Alert.Tip(text || "讀取中，請稍後", "show");
|
||
$(background)[0]._aleObj = aleObj;
|
||
$("body").css("overflow", "hidden");
|
||
$("body .page-content-wrapper").append(background);
|
||
$(background).animate({ opacity: 1 }, 300);
|
||
return background;
|
||
}
|
||
|
||
try {
|
||
$(function () {
|
||
// 二次引用 jquery.js
|
||
// - 在 require 內部程序需要引用 jquery，由於 require 的套件需要依賴 jquery ，就算 HTML 已經引用 jquery， require 也無法參考
|
||
// - 上方 HTML 引用套件若有使用 jquery 內存數據程序 (ex: $(x).data() , $(x).trigger("custom event") , $.fn.custom ...)
|
||
// - 會被清洗，有類似程序需放入 loadPack1 Function rquired 引用
|
||
// (原 datatable.bundle.js require 會出問題，先以 cdn datatable.min.js引用)
|
||
require(["jquery"], loadedBasePack);
|
||
|
||
})
|
||
|
||
/**
|
||
* jquery.js 二次引用後 Callback，載入第三方套件
|
||
* */
|
||
function loadedBasePack() {
|
||
require(
|
||
[
|
||
"lib/bootstrap/bootstrap.bundle.min",
|
||
"lib/app.bundle",
|
||
"lib/app.menu",
|
||
"datatables.net.b4",
|
||
"n4js/alarmbaja",
|
||
"n4js/historybaja",
|
||
"n4js/accmanbaja",
|
||
"lib/statistics/flot/flot.bundle",
|
||
"lib/statistics/peity/peity.bundle",
|
||
"lib/jquery-validation/dist/jquery.validate",
|
||
"lib/jquery-validation/dist/additional-methods.min",
|
||
"lib/jquery-validation/dist/localization/messages_zh_TW",
|
||
"lib/chart.js/Chart.min",
|
||
"lib/dropzone/dropzone-min",
|
||
"lib/jstree-master/jstree.min",
|
||
], loadedMasterPack);
|
||
|
||
}
|
||
/**
|
||
* 第三方套件引用後 Callback，載入額外套件
|
||
* */
|
||
function loadedMasterPack() {
|
||
require(
|
||
[
|
||
"yourteam/yourteam.utility.class",
|
||
"yourteam/yourteam.ajax.class",
|
||
"yourteam/yourteam.jquery.datatables",
|
||
"yourteam/plugins/yt-tooltip/yt-tooltip",
|
||
"yourteam/plugins/yt-tab/yt-tab",
|
||
"yourteam/plugins/yt-navbar/yt-navbar",
|
||
"style",
|
||
|
||
], function () {
|
||
require(["init", "site"], loadedJsPack)
|
||
});
|
||
}
|
||
|
||
|
||
/**
|
||
* 全數套件讀取完成 Callback
|
||
* */
|
||
function loadedJsPack() {
|
||
cookies = new YourTeam.Utility.Cookie();
|
||
jwt = cookies.get("JWT-Authorization");
|
||
pageAct.AreaTag = initAreaTag;
|
||
loadEvent();
|
||
|
||
if (!jwt) {
|
||
if (location.href.indexOf("localhost:5966") != -1) {
|
||
location.href = "login.html";
|
||
}
|
||
myBaja = new MyBaja();
|
||
myBaja.setMyUserAccount(Login);
|
||
} else {
|
||
isValidLogin();
|
||
}
|
||
|
||
$(loadEle).Loading("close");
|
||
}
|
||
|
||
/**
|
||
* 登入驗證完成 Callback
|
||
* */
|
||
function isValidLogin() {
|
||
$("#app").load("_dashboard.html", loadCallback);
|
||
|
||
getLogo();
|
||
getUserInfo();
|
||
iniFroList();
|
||
showMainSys();
|
||
getBuiList();
|
||
getSysMonBtnList();
|
||
checkDevState();
|
||
|
||
function getBuiList() {
|
||
let url = baseApiUrl + "/api/Device/GetBuild";
|
||
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
|
||
} else {
|
||
let strHtml = ``;
|
||
$.each(res.data, (index, buiObj) => {
|
||
strHtml += `<a id="buiBtn${buiObj.building_tag}" data-urn="${buiObj.urn_3D}" class="dropdown-item" href="javascript:;">${buiObj.full_name}</a>`;
|
||
})
|
||
$("#buiList").append(strHtml).droSetItem(); //droSetItem 預設第一筆 active
|
||
}
|
||
}, null, "POST").send();
|
||
}
|
||
|
||
//lily test
|
||
function checkDevState() {
|
||
//TPE_B1_LT_L1
|
||
//main_system_tag: pageAct.sysMainTag,
|
||
//building_tag: pageAct.buiTag,
|
||
//floor_tag: pageAct.floTag,
|
||
let systemPath = "TPE_B1";
|
||
// if (pageAct != undefined && pageAct != null && pageAct.sysMainTag != null && pageAct.buiTag != null) {
|
||
// systemPath = "TPE_" + pageAct.buiTag + "_" + pageAct.sysMainTag + "_" + "EL";
|
||
// }
|
||
getOneSystemAlarmStateByBaja(systemPath, callbackForCheckDevState);
|
||
// console.log("systemP: " + systemPath);
|
||
// console.log("devList: " + deviceList[0].device_guid + ", " + deviceList[3].device_guid + ", " + deviceList[8].device_guid);
|
||
//callbackForCheckDevState("test");
|
||
}
|
||
|
||
function callbackForCheckDevState(result) {
|
||
console.log("------ " + result);
|
||
// $.each(deviceList, (index, devObj) => {
|
||
// if ((`${devObj.device_guid}`) == '4ed28a93-5025-11ed-b23e-0242ac110002'
|
||
// || (`${devObj.device_guid}`) == '5d9fdff0-5343-43fe-86f4-bd73cdb15111') {
|
||
// var str = "";
|
||
// $(`#${devObj.device_guid}`).empty();
|
||
// str = `<span class="status status-danger d-inline-block"><img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="..."></span> ${devObj.full_name}`;
|
||
// $(`#${devObj.device_guid}`).append(str);
|
||
// }
|
||
// })
|
||
|
||
console.log(result);
|
||
}
|
||
}
|
||
|
||
// page loaded callback
|
||
function loadCallback() {
|
||
initTabsByEle();
|
||
resetYTTooltip();
|
||
$("#sysMonTopBtn").YTNavbar("hide");
|
||
}
|
||
|
||
// 事件先行讀取
|
||
function loadEvent() {
|
||
onEvent("click", "[name=topFunBtn]", function () {
|
||
_ytTabInited = [];
|
||
let page = $(this).data("page");
|
||
|
||
if (page != "systemMonitor") {
|
||
$("#sysMonBtnList .dropdown-item").removeClass("active");
|
||
pageAct.sysMainTag = null;
|
||
}
|
||
$.each(tolSubList, (idx, sub) => {
|
||
sub.unsubscribeAll();
|
||
sub.detach();
|
||
})
|
||
tolSubList = [];
|
||
endPageLoading();
|
||
$(".yt-alert").YTAlert().hide();
|
||
|
||
if (typeof timeOuters != "undefined") {
|
||
$.each(timeOuters, (idx, timeOut) => {
|
||
clearInterval(timeOut);
|
||
})
|
||
timeOuters = [];
|
||
}
|
||
|
||
getUserInfo();
|
||
$("#app").load(`_${page}.html`, loadCallback);
|
||
|
||
})
|
||
|
||
onEvent("click", "#logout", function () {
|
||
localStorage.removeItem("JWT-Authorization");
|
||
location.href = "/logout";
|
||
})
|
||
|
||
onEvent("click", "#sysMonBtnList a", function (e) {
|
||
pageAct.sysMainTag = $(this).data("subSysObj").main_system_tag;
|
||
pageAct.sysSubTag = $(this).data("subSysObj").sub_system_tag;
|
||
pageAct.sysSubName = $(this).data("subSysObj").full_name;
|
||
pageAct.sysSubObj = $(this).data("subSysObj");
|
||
})
|
||
|
||
onEvent("active:change", "#buiList", function (e, actEle) {
|
||
if (actEle) {
|
||
pageAct.buiTag = $(actEle).prop("id").split("buiBtn")[1];
|
||
pageAct.urn = $(actEle).data("urn");
|
||
}
|
||
|
||
})
|
||
|
||
onEvent("yt:tab:change", "#lightSch-tab", function () {
|
||
if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
|
||
loadLightSchTable();
|
||
$("#lightSchModal").modal("show");
|
||
}
|
||
})
|
||
|
||
onEvent("click", "#testsysbtn", function () {
|
||
|
||
})
|
||
|
||
$(window).on("timeout:3s", function () {
|
||
getSystemAlarmByBaja((data) => {
|
||
if (typeof getAlarmSub != "undefined" && getAlarmSub) {
|
||
getAlarmSub(data);
|
||
}
|
||
alarmIconBlink();
|
||
|
||
})
|
||
})
|
||
|
||
}
|
||
|
||
// 登入驗證
|
||
function Login(account) {
|
||
console.log(account)
|
||
/*if ($("#login-form").valid()) {*/
|
||
|
||
var url = baseApiUrl + "/api/Login/";
|
||
var send_data = {
|
||
account: account,
|
||
password: "rJ2T5Kkj"
|
||
}
|
||
if (location.href.indexOf("localhost:5966") != -1) {
|
||
location.href = "login.html";
|
||
}
|
||
$.ajax({
|
||
method: "post",
|
||
url: url,
|
||
data: JSON.stringify(send_data),
|
||
async: false,
|
||
contentType: "application/json; charset=UTF-8",
|
||
dataType: 'json',
|
||
success: function (rel) {
|
||
if (rel.code != "0000") {
|
||
toast_error(rel.msg || "系統內部發生錯誤，請聯絡系統管理員");
|
||
return;
|
||
}
|
||
else {
|
||
/*toast_ok(rel.msg);*/
|
||
cookies.create("JWT-Authorization", rel.data.token, 12 * 60 * 60 * 1000);
|
||
isValidLogin();
|
||
}
|
||
},
|
||
error: function (xhr, textStatus, thrownError) {
|
||
alert(textStatus);
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
//==============================================================================
|
||
// ↓ 系統監控 - 共用 Function ↓
|
||
//==============================================================================
|
||
|
||
// Card - 基本資料 Table
|
||
function drawInfoTabBlo(devGuid) {
|
||
|
||
let tabEle = $(`<table class="table table-bordered table-striped text-center m-0">`);
|
||
let tbody = tabEle.append("<tbody>");
|
||
let columnNames = ["設備編號", "設備名稱"];
|
||
|
||
$.each(columnNames, (index, colName) => {
|
||
let tr = $("<tr></tr>");
|
||
let td = $("<td></td>");
|
||
td.text(colName);
|
||
tr.append(td);
|
||
tbody.append(tr);
|
||
})
|
||
|
||
let url = baseApiUrl + "/api/Device/GetBaseDevice";
|
||
let sendData = {
|
||
device_guid: devGuid,
|
||
};
|
||
objSendData.Data = sendData;
|
||
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
|
||
} else {
|
||
tbody.find("tr").eq(0).append(creEle("td", res.data.device_number));
|
||
tbody.find("tr").eq(1).append(creEle("td", res.data.full_name));
|
||
}
|
||
}, null, "POST").send();
|
||
|
||
return tabEle.prop("outerHTML");
|
||
}
|
||
|
||
// Card - 異常紀錄 block
|
||
function drawErrRecTabBlo() {
|
||
let strHtml = `<table id="errRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||
|
||
</table>`
|
||
return strHtml;
|
||
}
|
||
|
||
// Card - 運維紀錄 block
|
||
function drawOpeRecTabBlo() {
|
||
let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
|
||
|
||
</table>`
|
||
return strHtml;
|
||
}
|
||
|
||
// Card 呈現初始化
|
||
function initPopover(type = null, extOption = {}, selector = "[name=devItem]") {
|
||
if (type == null && pageAct.sysMainTag == "LT") {
|
||
type = "light";
|
||
}
|
||
|
||
$(selector).each((index, ele) => {
|
||
let devNum = $(ele).data("number"); //設備編號
|
||
let devGuid = $(ele).data("id"); //guid
|
||
let devName = $(ele).data("name"); //full_name
|
||
let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
|
||
let option = {
|
||
html: `<div class="card m-1 border device-wrap">
|
||
|
||
<div class="card-header p-3">
|
||
|
||
<div class="position-absolute w-50" style="word-break: break-all;">
|
||
<label class="m-0 mt-2">${devName}</label>
|
||
</div>
|
||
<div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
|
||
<button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
|
||
${lightHtml}
|
||
<button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
|
||
<button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
|
||
<button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
|
||
<button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-2 tab-content">
|
||
<div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
|
||
${drawStateTabBlo(devNum)}
|
||
</div>
|
||
<div id="info" data-tabname="cardTab" data-tabrole="child">
|
||
|
||
</div>
|
||
<div id="errRec" data-tabname="cardTab" data-tabrole="child">
|
||
${drawErrRecTabBlo()}
|
||
</div>
|
||
<div id="opeRec" data-tabname="cardTab" data-tabrole="child">
|
||
${drawOpeRecTabBlo()}
|
||
</div>
|
||
</div>
|
||
</div>`,
|
||
group: "device",
|
||
onShow: function (tooltipEle, oriEle) {
|
||
var tab = new YT.Tab({ tabName: "cardTab" })
|
||
loadOpeRecTable(devGuid);
|
||
//loadErrRecTable2($(oriEle).data("number"));
|
||
//loadErrRecTable();
|
||
loadErr($(oriEle).data("number"));
|
||
$(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
|
||
if ($(oriEle).data("dbId")) {
|
||
controlFocusHotspot($(oriEle).data("dbId"));
|
||
}
|
||
typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
|
||
},
|
||
onHide: function (tooltipEle, oriEle) {
|
||
controlFocusHotspot($(oriEle).data("dbId"), false);
|
||
// sysMonFloor Echart 解除 focus
|
||
typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
|
||
}
|
||
};
|
||
|
||
$.extend(option, extOption);
|
||
|
||
$(ele).YTTooltip(option);
|
||
})
|
||
}
|
||
|
||
// Card - 運維紀錄 Table
|
||
function loadOpeRecTable(devGuid) {
|
||
if (opeRecTable) {
|
||
opeRecTable.destroy();
|
||
}
|
||
let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;
|
||
let tag = "#opeRecTable";
|
||
|
||
let column_defs = [
|
||
{ "targets": [0], "width": "8%", "sortable": true },
|
||
{ "targets": [1], "width": "8%", "sortable": true },
|
||
{ "targets": [2], "width": "7%", "sortable": true },
|
||
{ "targets": [3], "width": "7%", "sortable": true },
|
||
];
|
||
|
||
let columns = [
|
||
{
|
||
"title": "類型",
|
||
"data": "work_type_name",
|
||
},
|
||
{
|
||
"title": "項目",
|
||
"data": "fix_do",
|
||
},
|
||
{
|
||
"title": "處理人員",
|
||
"data": "work_person_name",
|
||
},
|
||
{
|
||
"title": "發生/完成時間",
|
||
"data": "finishTime",
|
||
"render": function (data, type, row) {
|
||
return row.createdAt + "<br>" + data;
|
||
},
|
||
},
|
||
|
||
];
|
||
|
||
opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
|
||
}
|
||
|
||
function loadLightSchTable(devGuid) {
|
||
|
||
/*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
|
||
let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
|
||
let tag = "#lightSchTable";
|
||
|
||
let column_defs = [
|
||
{ "targets": [0], "width": "14%", "sortable": true },
|
||
{ "targets": [1], "width": "14%", "sortable": true },
|
||
{ "targets": [2], "width": "14%", "sortable": true },
|
||
{ "targets": [3], "width": "14%", "sortable": true },
|
||
{ "targets": [4], "width": "14%", "sortable": true },
|
||
{ "targets": [5], "width": "14%", "sortable": true },
|
||
{ "targets": [6], "width": "16%", "sortable": true },
|
||
];
|
||
|
||
let columns = [
|
||
{
|
||
"title": "序號",
|
||
"data": null,
|
||
"render": function (data, type, row, meta) {
|
||
return meta.row + 1;
|
||
},
|
||
},
|
||
{
|
||
"title": "排程名稱",
|
||
"data": "sch_name",
|
||
},
|
||
{
|
||
"title": "設備數量",
|
||
"data": "dev_cnt",
|
||
},
|
||
{
|
||
"title": "排程設定",
|
||
"data": "sch_set",
|
||
},
|
||
{
|
||
"title": "動作",
|
||
"data": "action",
|
||
},
|
||
{
|
||
"title": "狀態",
|
||
"data": "status",
|
||
},
|
||
{
|
||
"title": "功能",
|
||
"data": "sch_id",
|
||
"render": function (data, type, row) {
|
||
let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
|
||
let icon = creI(["fas", "fa-pencil-alt"]);
|
||
btnDiv.append(creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, ["btn", "btn-success"]));
|
||
btnDiv.append(creBtn("修改", "lightSchTabEdiBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" }).append(icon));
|
||
return btnDiv.outerHtml();
|
||
},
|
||
},
|
||
|
||
];
|
||
|
||
let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
|
||
}
|
||
|
||
function controlFocusHotspot(dbId, open = true) {
|
||
changeColorForHotspot(dbId, open);
|
||
changeScaleForHotspot(dbId, open);
|
||
}
|
||
|
||
// Baja 取得異常紀錄
|
||
function loadErr(allPath) {
|
||
if (allPath != undefined && allPath != null) {
|
||
|
||
getOneDeviceAlarmTop10ByBaja(allPath, callbackForErr);
|
||
}
|
||
else {
|
||
console.log("no device");
|
||
}
|
||
}
|
||
|
||
// Card - 異常紀錄 Table
|
||
function callbackForErr(result) {
|
||
if (errRecTable) {
|
||
errRecTable.destroy();
|
||
}
|
||
|
||
let tag = "#errRecTable";
|
||
let datas;
|
||
|
||
let column_defs = [
|
||
{ "targets": [0], "width": "15%", "sortable": true },
|
||
{ "targets": [1], "width": "25%", "sortable": true },
|
||
{ "targets": [2], "width": "25%", "sortable": true },
|
||
{ "targets": [3], "width": "35%", "sortable": true },
|
||
];
|
||
|
||
let columns = [
|
||
{
|
||
"title": "異常ID",
|
||
"data": "uuid",
|
||
|
||
},
|
||
{
|
||
"title": "異常原因",
|
||
"data": "msgText",
|
||
},
|
||
{
|
||
"title": "ACK確認",
|
||
"data": "ackState",
|
||
},
|
||
{
|
||
"title": "發生/完成時間",
|
||
"data": "normalTime",
|
||
"render": function (data, type, row) {
|
||
return row.timestamp + "<br>" + data;
|
||
},
|
||
},
|
||
|
||
];
|
||
|
||
let json_object = JSON.parse(result);
|
||
datas = json_object['data'];
|
||
errRecTable = new YourTeam.JqDataTables.getTableByStatic(tag, datas, columns, column_defs, null, null, null, null, "tpi");
|
||
|
||
}
|
||
|
||
//根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
|
||
function setLightColor() {
|
||
$(".dev-card").each((index, ele) => {
|
||
let type = $(ele).find("[data-light-type]").data("light-type");
|
||
let isFlashing = false;
|
||
let color = "#000";
|
||
switch (type) {
|
||
case "normal":
|
||
color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
|
||
isFlashing = pageAct.sysSubObj.device_normal_flashing == "1";
|
||
break;
|
||
case "close":
|
||
color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
|
||
isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
|
||
break;
|
||
case "error":
|
||
color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
|
||
isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
|
||
break;
|
||
}
|
||
$(ele).find("[data-light-type]").css("background-color", color);
|
||
//是否閃爍
|
||
if (isFlashing) {
|
||
$(ele).addClass("light-flash");
|
||
}
|
||
})
|
||
}
|
||
|
||
function crePosPopover(position, obj) {
|
||
let _position = {};
|
||
_position.tpLeft = position[0];
|
||
_position.tpTop = position[1];
|
||
_position.tpOffHeight = 24;
|
||
let parentEle = creDiv();
|
||
parentEle.append(`<a href="javascript:;" name="devItem" class=" ml-2 mb-0 ">詳細資料</a>`);
|
||
parentEle.data("id", obj.device_guid);
|
||
parentEle.data("number", obj.device_number);
|
||
parentEle.data("dbId", obj._dbId);
|
||
parentEle.data("name", obj.full_name);
|
||
initPopover(null, _position, parentEle);
|
||
|
||
return parentEle;
|
||
}
|
||
|
||
//==============================================================================
|
||
// ↑ 系統監控 - 共用 Function ↑
|
||
//==============================================================================
|
||
|
||
} catch (e) {
|
||
$(loadEle).Loading("close");
|
||
}
|
||
|
||
function alarmIconBlink(data) {
|
||
if (data?.data.length != 0) {
|
||
$(".page-header [name=topFunBtn][data-page=alert] i").addClass("blink");
|
||
} else {
|
||
$(".page-header [name=topFunBtn][data-page=alert] i").removeClass("blink");
|
||
}
|
||
}
|
||
|
||
function timeOutGetData() {
|
||
let timeOut3s = null, timeOut5m = null;
|
||
let events = $._data($(window)[0], "events");
|
||
if (Object.keys(events).findIndex(x => x == "timeout:3s") != -1) {
|
||
timeOut3s = setInterval(() => {
|
||
$(window).trigger("timeout:3s");
|
||
}, 3000)
|
||
}
|
||
|
||
if (Object.keys(events).findIndex(x => x == "timeout:5m") != -1) {
|
||
timeOut5m = setInterval(() => {
|
||
$(window).trigger("timeout:5m");
|
||
}, 5 * 60 * 1000)
|
||
}
|
||
|
||
timeOuters = timeOuters.concat([timeOut3s, timeOut5m]);
|
||
}
|
||
|
||
function showMainSys() {
|
||
let url = baseApiUrl + "/Utility/isShowMaiSys";
|
||
|
||
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||
if (!res || res.code != "0000") {
|
||
|
||
} else {
|
||
pageAct.mainStatus = res.data;
|
||
}
|
||
}, null, "POST").send();
|
||
|
||
}
|
||
|
||
function startPageLoading() {
|
||
if (!loadingTip) {
|
||
loadingTip = YT.Alert.Tip("資料讀取中...", "show");
|
||
}
|
||
}
|
||
|
||
function endPageLoading() {
|
||
if (loadingTip != null) {
|
||
$(loadingTip.ele).YTAlert().hide();
|
||
loadingTip = null;
|
||
}
|
||
}
|
||
|
||
function iniFroList() {
|
||
url = baseApiUrl + '/api/GetUsrFroList'
|
||
let hasMonitor = false;
|
||
|
||
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
|
||
} else {
|
||
let strHtml = `<div class="btn-group mx-4">
|
||
<a href="javascript:;" name="topFunBtn" data-page="dashboard" class="text-center">
|
||
<i class="fal fa-home fa-2x"></i><br>首頁
|
||
</a>
|
||
<!--<div class="dropdown-menu">
|
||
<button class="dropdown-item" type="button">Action</button>
|
||
<button class="dropdown-item" type="button">Another action</button>
|
||
<button class="dropdown-item" type="button">Something else here</button>
|
||
</div>-->
|
||
</div>`;
|
||
|
||
$.each(res.data, function (i, v) {
|
||
if (v.authCode == 'PF1') {
|
||
strHtml += `<div class="btn-group mx-4" >
|
||
<a href="javascript:;" id="sysMonTopBtn" class="text-center" data-toggle="navbar" data-target="#sysMonNavbar" aria-haspopup="true" aria-expanded="false">
|
||
<i class="fal fa-tv fa-2x"></i><br>${v.subName}
|
||
</a>
|
||
|
||
</div>`;
|
||
|
||
hasMonitor = true;
|
||
}
|
||
else {
|
||
let icon = v.authCode == 'PF2' ? 'fa-chart-pie' : v.authCode == 'PF3' ? 'fa-chart-area' : v.authCode == 'PF4' ? 'fa-bell' : v.authCode == 'PF5' ? 'fa-server' : v.authCode == 'PF6' ? 'fa-image' : v.authCode == 'PF7' ? 'fa-user' : '';
|
||
strHtml += `<div class="btn-group mx-4">
|
||
<a href="javascript:;" name="topFunBtn" class="dropdown-toggle no-arrow text-center"
|
||
data-page="${v.showView}">
|
||
<i class="fal ${icon} fa-2x"></i><br>${v.subName}
|
||
</a>
|
||
</div>`;
|
||
}
|
||
|
||
});
|
||
|
||
$('#froLisPage').html(strHtml);
|
||
$("#sysMonTopBtn").YTNavbar("init");
|
||
|
||
|
||
}
|
||
}, null, "POST").send();
|
||
}
|
||
|
||
function getSysMonBtnList() {
|
||
let url = baseApiUrl + "/api/Device/GetMainSub";
|
||
let sendData = {
|
||
building_tag: pageAct.buiTag,
|
||
};
|
||
objSendData.Data = sendData;
|
||
ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
|
||
console.log(res);
|
||
if (!res || res.code != "0000" || !res.data) {
|
||
|
||
} else {
|
||
$("#sysMonBtnList").html("")
|
||
debugger
|
||
$.each(res.data.history_Main_Systems, (index, mainSysObj) => {
|
||
$.each(mainSysObj.history_Sub_systems, (index2, subSysObj) => {
|
||
let page = "systemMonitor";
|
||
if (subSysObj.sub_system_tag == "EL") {
|
||
page = "sysElevator";
|
||
}
|
||
|
||
let li = creEle("li");
|
||
let a = creA(subSysObj.full_name, { "href": "javascript:;" }, [], `subSysBtn${subSysObj.sub_system_tag}`, { page: page, tabname: page }, "topFunBtn");
|
||
li.append(a);
|
||
a.data("subSysObj", subSysObj)
|
||
subSysObj.main_system_tag = mainSysObj.main_system_tag;
|
||
$("#sysMonBtnList").append(li);
|
||
})
|
||
})
|
||
}
|
||
}, null, "POST").send();
|
||
}
|
||
|
||
function getLogo() {
|
||
url = baseApiUrl + '/api/GetLogo';
|
||
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||
$('[name=webLogo]').attr('src', baseImgUrl + '/img/' + res.data);
|
||
}, null, "POST").send();
|
||
}
|
||
|
||
function getUserInfo() {
|
||
let url = baseApiUrl + varApiUrl + "getUserFull";
|
||
|
||
ytAjax = new YourTeam.Ajax(url, null, function (res) {
|
||
if (!res || res.code != "0000") {
|
||
|
||
} else {
|
||
pageAct.userInfo = res.data;
|
||
let user = res.data;
|
||
$("#usrName").text(user.full_name);
|
||
}
|
||
}, null, "POST").send();
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
<!-- END Body -->
|
||
|
||
</html> |