1608 lines
103 KiB
Plaintext
1608 lines
103 KiB
Plaintext
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" class="root-text-lg">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>@ViewData["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-14.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">
|
|||
|
|
|
|||
|
|
<!-- dataTables -->
|
|||
|
|
<link rel="stylesheet" media="screen, print" href="~/css/datagrid/datatables/datatables.bundle.css">
|
|||
|
|
|
|||
|
|
<!-- SweetAlert -->
|
|||
|
|
<link rel="stylesheet" media="screen, print" href="~/css/notifications/sweetalert2/sweetalert2.bundle.css">
|
|||
|
|
<link rel="stylesheet" media="screen, print" href="~/css/notifications/toastr/toastr.css">
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
|||
|
|
</head>
|
|||
|
|
<body class="mod-bg-1 header-function-fixed mod-hide-info-card">
|
|||
|
|
<!-- 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 -->
|
|||
|
|
<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/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
|
|||
|
|
<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 -->
|
|||
|
|
<nav id="js-primary-nav" class="primary-nav" role="navigation">
|
|||
|
|
<div class="nav-filter">
|
|||
|
|
<div class="position-relative">
|
|||
|
|
<input type="text" id="nav_filter_input" placeholder="Filter menu" class="form-control" tabindex="0">
|
|||
|
|
<a href="#" onclick="return false;" class="btn-primary btn-search-close js-waves-off" data-action="toggle" data-class="list-filter-active" data-target=".page-sidebar">
|
|||
|
|
<i class="fal fa-chevron-up"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<ul id="js-nav-menu" class="nav-menu" style="margin-top: 57px;">
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="電力系統" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-bolt"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">電力系統</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="UPS系統" data-filter-tags="utilities disabled item">
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">UPS系統</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
<!-- Example of open and active states -->
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="Category" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-lightbulb"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">照明系統</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="Category" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-snow-blowing"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">空調系統</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="Category" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-fire"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">消防系統</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="Category" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-water"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">給排水系統</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="Category" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-building"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">電梯系統</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="Category" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-plus"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">雜項設備</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="門禁安全" data-filter-tags="blank page" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-door-open"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.blankpage">門禁安全</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="緊急對講" data-filter-tags="blank page" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-comment"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.blankpage">緊急對講</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="#" title="Category" data-filter-tags="category" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-video-plus"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.category">CCTV系統</span>
|
|||
|
|
</a>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="CCTV系統" data-filter-tags="utilities disabled item">
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.utilities_disabled_item">CCTV系統</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<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>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="緊急應變" data-filter-tags="blank page" style="background: #B28F01;">
|
|||
|
|
<i class="fal fa-exchange"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.blankpage">緊急應變</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li><hr class="mx-4" style="border-bottom: 1px solid #fff;"></li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="告警記錄" data-filter-tags="blank page">
|
|||
|
|
<i class="fal fa-alarm-snooze"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.blankpage">告警記錄</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="歷史數據" data-filter-tags="blank page">
|
|||
|
|
<i class="fal fa-history"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.blankpage">歷史數據</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="報表下載" data-filter-tags="blank page">
|
|||
|
|
<i class="fal fa-download"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.blankpage">報表下載</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="javascript:void(0);" title="操作記錄" data-filter-tags="blank page">
|
|||
|
|
<i class="fal fa-record-vinyl"></i>
|
|||
|
|
<span class="nav-link-text" data-i18n="nav.blankpage">操作記錄</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
<div class="filter-message js-filter-message bg-success-600"></div>
|
|||
|
|
</nav>
|
|||
|
|
<!-- 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">
|
|||
|
|
<!-- we need this logo when user switches to nav-function-top -->
|
|||
|
|
<div class="page-logo">
|
|||
|
|
<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/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">SeedProject</span>
|
|||
|
|
<i class="fal fa-angle-down d-inline-block ml-1 fs-lg color-primary-300"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="search">
|
|||
|
|
<ul class="nav navbar-toolbar">
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30 active">
|
|||
|
|
<a class="nav-link icon wb-order" href="#" role="button">
|
|||
|
|
<i class="fal fa-building"></i>
|
|||
|
|
<span> 旅館棟</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30">
|
|||
|
|
<a class="nav-link icon wb-order" href="#" role="button">
|
|||
|
|
<i class="fal fa-building"></i>
|
|||
|
|
<span> 辦公棟</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30">
|
|||
|
|
<a class="nav-link icon wb-order" href="#" role="button">
|
|||
|
|
<i class="fal fa-building"></i>
|
|||
|
|
<span> 巨蛋棟</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30">
|
|||
|
|
<a class="nav-link icon wb-order" href="#" role="button">
|
|||
|
|
<i class="fal fa-building"></i>
|
|||
|
|
<span> 商場棟</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30">
|
|||
|
|
<a class="nav-link icon wb-order" href="#" role="button">
|
|||
|
|
<i class="fal fa-building"></i>
|
|||
|
|
<span> 影城棟</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30">
|
|||
|
|
<a class="nav-link icon wb-order" href="#" role="button">
|
|||
|
|
<i class="fal fa-building"></i>
|
|||
|
|
<span> 大公棟</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30">
|
|||
|
|
<a class="nav-link icon wb-order" href="#" role="button">
|
|||
|
|
<i class="fal fa-bell"></i>
|
|||
|
|
<span> 緊急應變</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item hidden-sm-down mx-30">
|
|||
|
|
<a class="nav-link icon wb-order blink" href="#" role="button">
|
|||
|
|
<i class="fal fa-bell"></i>
|
|||
|
|
<span> 緊急應變</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="ml-auto d-flex">
|
|||
|
|
<!-- app user menu -->
|
|||
|
|
<div>
|
|||
|
|
<a href="#" data-toggle="dropdown" title="drlantern@gotbootstrap.com" class="header-icon 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 class="ml-1 mr-1 text-truncate text-truncate-header hidden-xs-down">Me</span>
|
|||
|
|
<i class="ni ni-chevron-down hidden-xs-down"></i> -->
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-menu dropdown-menu-animated dropdown-lg">
|
|||
|
|
<div class="dropdown-header bg-trans-gradient d-flex flex-row py-4 rounded-top">
|
|||
|
|
<div class="d-flex flex-row align-items-center mt-1 mb-1 color-white">
|
|||
|
|
<span class="mr-2">
|
|||
|
|
<img src="img/demo/avatars/avatar-admin.png" class="rounded-circle profile-image" alt="Dr. Codex Lantern">
|
|||
|
|
</span>
|
|||
|
|
<div class="info-card-text">
|
|||
|
|
<div class="fs-lg text-truncate text-truncate-lg">Dr. Codex Lantern</div>
|
|||
|
|
<span class="text-truncate text-truncate-md opacity-80">drlantern@gotbootstrap.com</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
@*<div class="dropdown-divider m-0"></div>
|
|||
|
|
<a href="#" class="dropdown-item" data-action="app-reset">
|
|||
|
|
<span data-i18n="drpdwn.reset_layout">Reset Layout</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="dropdown-item" data-toggle="modal" data-target=".js-modal-settings">
|
|||
|
|
<span data-i18n="drpdwn.settings">Settings</span>
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-divider m-0"></div>
|
|||
|
|
<a href="#" class="dropdown-item" data-action="app-fullscreen">
|
|||
|
|
<span data-i18n="drpdwn.fullscreen">Fullscreen</span>
|
|||
|
|
<i class="float-right text-muted fw-n">F11</i>
|
|||
|
|
</a>
|
|||
|
|
<a href="#" class="dropdown-item" data-action="app-print">
|
|||
|
|
<span data-i18n="drpdwn.print">Print</span>
|
|||
|
|
<i class="float-right text-muted fw-n">Ctrl + P</i>
|
|||
|
|
</a>
|
|||
|
|
<div class="dropdown-multilevel dropdown-multilevel-left">
|
|||
|
|
<div class="dropdown-item">
|
|||
|
|
Language
|
|||
|
|
</div>
|
|||
|
|
<div class="dropdown-menu">
|
|||
|
|
<a href="#?lang=fr" class="dropdown-item" data-action="lang" data-lang="fr">Français</a>
|
|||
|
|
<a href="#?lang=en" class="dropdown-item active" data-action="lang" data-lang="en">English (US)</a>
|
|||
|
|
<a href="#?lang=es" class="dropdown-item" data-action="lang" data-lang="es">Español</a>
|
|||
|
|
<a href="#?lang=ru" class="dropdown-item" data-action="lang" data-lang="ru">Русский язык</a>
|
|||
|
|
<a href="#?lang=jp" class="dropdown-item" data-action="lang" data-lang="jp">日本語</a>
|
|||
|
|
<a href="#?lang=ch" class="dropdown-item" data-action="lang" data-lang="ch">中文</a>
|
|||
|
|
</div>
|
|||
|
|
</div>*@
|
|||
|
|
<div class="dropdown-divider m-0"></div>
|
|||
|
|
<a class="dropdown-item fw-500 pt-3 pb-3" href="page_login.html">
|
|||
|
|
<span data-i18n="drpdwn.page-logout">Logout</span>
|
|||
|
|
<span class="float-right fw-n">@codexlantern</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
<!-- END Page Header -->
|
|||
|
|
<!-- BEGIN Page Content -->
|
|||
|
|
<!-- the #js-page-content id is needed for some plugins to initialize -->
|
|||
|
|
<nav class="navbar navbar-expand-lg navbar-dark fs-lg" style="margin-top: 4.125rem; background: #263238;">
|
|||
|
|
|
|||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-icon"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="collapse navbar-collapse" id="navbarColor02">
|
|||
|
|
<ul class="navbar-nav mr-auto pl-4">
|
|||
|
|
<li class="nav-item mr-3 active">
|
|||
|
|
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 總覽 <span class="sr-only">(current)</span></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item mr-3">
|
|||
|
|
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 1F</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item mr-3">
|
|||
|
|
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 2F</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item mr-3">
|
|||
|
|
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 3F</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item mr-3">
|
|||
|
|
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 4F</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item mr-3">
|
|||
|
|
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 5F</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item mr-3">
|
|||
|
|
<a class="nav-link" href="#"><i class="fal fa-bookmark"></i> 6F</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<main id="js-page-content" role="main" class="page-content mt-0">
|
|||
|
|
<div class="page-main">
|
|||
|
|
@RenderBody()
|
|||
|
|
@*<div id="main" style="width: 100%;height:80vh;background-color: bisque;">
|
|||
|
|
|
|||
|
|
</div>*@
|
|||
|
|
<!--內頁內容開始-->
|
|||
|
|
<!--<div class="embed-responsive embed-responsive-16by9" style="max-height: 675px;">-->
|
|||
|
|
@*<iframe class="embed-responsive-item" src="alert.html"></iframe>*@
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--</div>-->
|
|||
|
|
<!--內頁內容結束-->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="page-content pt-0">
|
|||
|
|
<!--錯誤訊息開始-->
|
|||
|
|
<div class="embed-responsive embed-responsive-21by9" style="max-height: 250px;">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--錯誤訊息結束-->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</main>
|
|||
|
|
<!-- this overlay is activated only when mobile menu is triggered -->
|
|||
|
|
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></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">2020 © 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 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>
|
|||
|
|
<!-- END Messenger -->
|
|||
|
|
<!-- BEGIN Page Settings -->
|
|||
|
|
<div class="modal fade js-modal-settings modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
|
|||
|
|
<div class="modal-dialog modal-dialog-right modal-md">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<div class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center w-100">
|
|||
|
|
<h4 class="m-0 text-center color-white">
|
|||
|
|
Layout Settings
|
|||
|
|
<small class="mb-0 opacity-80">User Interface Settings</small>
|
|||
|
|
</h4>
|
|||
|
|
<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">
|
|||
|
|
<div class="settings-panel">
|
|||
|
|
<div class="mt-4 d-table w-100 px-5">
|
|||
|
|
<div class="d-table-cell align-middle">
|
|||
|
|
<h5 class="p-0">
|
|||
|
|
App Layout
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="fh">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="header-function-fixed"></a>
|
|||
|
|
<span class="onoffswitch-title">Fixed Header</span>
|
|||
|
|
<span class="onoffswitch-title-desc">header is in a fixed at all times</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="nff">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-fixed"></a>
|
|||
|
|
<span class="onoffswitch-title">Fixed Navigation</span>
|
|||
|
|
<span class="onoffswitch-title-desc">left panel is fixed</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="nfm">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-minify"></a>
|
|||
|
|
<span class="onoffswitch-title">Minify Navigation</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Skew nav to maximize space</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="nfh">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-hidden"></a>
|
|||
|
|
<span class="onoffswitch-title">Hide Navigation</span>
|
|||
|
|
<span class="onoffswitch-title-desc">roll mouse on edge to reveal</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="nft">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-function-top"></a>
|
|||
|
|
<span class="onoffswitch-title">Top Navigation</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Relocate left pane to top</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="fff">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="footer-function-fixed"></a>
|
|||
|
|
<span class="onoffswitch-title">Fixed Footer</span>
|
|||
|
|
<span class="onoffswitch-title-desc">page footer is fixed</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mmb">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-main-boxed"></a>
|
|||
|
|
<span class="onoffswitch-title">Boxed Layout</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Encapsulates to a container</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="expanded">
|
|||
|
|
<ul class="mb-3 mt-1">
|
|||
|
|
<li>
|
|||
|
|
<div class="bg-fusion-50" data-action="toggle" data-class="mod-bg-1"></div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<div class="bg-warning-200" data-action="toggle" data-class="mod-bg-2"></div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<div class="bg-primary-200" data-action="toggle" data-class="mod-bg-3"></div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<div class="bg-success-300" data-action="toggle" data-class="mod-bg-4"></div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<div class="bg-white border" data-action="toggle" data-class="mod-bg-none"></div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="list" id="mbgf">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-fixed-bg"></a>
|
|||
|
|
<span class="onoffswitch-title">Fixed Background</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-4 d-table w-100 px-5">
|
|||
|
|
<div class="d-table-cell align-middle">
|
|||
|
|
<h5 class="p-0">
|
|||
|
|
Mobile Menu
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="nmp">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-push"></a>
|
|||
|
|
<span class="onoffswitch-title">Push Content</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Content pushed on menu reveal</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="nmno">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-no-overlay"></a>
|
|||
|
|
<span class="onoffswitch-title">No Overlay</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Removes mesh on menu reveal</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="sldo">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="nav-mobile-slide-out"></a>
|
|||
|
|
<span class="onoffswitch-title">Off-Canvas <sup>(beta)</sup></span>
|
|||
|
|
<span class="onoffswitch-title-desc">Content overlaps menu</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-4 d-table w-100 px-5">
|
|||
|
|
<div class="d-table-cell align-middle">
|
|||
|
|
<h5 class="p-0">
|
|||
|
|
Accessibility
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mbf">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-bigger-font"></a>
|
|||
|
|
<span class="onoffswitch-title">Bigger Content Font</span>
|
|||
|
|
<span class="onoffswitch-title-desc">content fonts are bigger for readability</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mhc">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-high-contrast"></a>
|
|||
|
|
<span class="onoffswitch-title">High Contrast Text (WCAG 2 AA)</span>
|
|||
|
|
<span class="onoffswitch-title-desc">4.5:1 text contrast ratio</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mcb">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-color-blind"></a>
|
|||
|
|
<span class="onoffswitch-title">Daltonism <sup>(beta)</sup> </span>
|
|||
|
|
<span class="onoffswitch-title-desc">color vision deficiency</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mpc">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-pace-custom"></a>
|
|||
|
|
<span class="onoffswitch-title">Preloader Inside</span>
|
|||
|
|
<span class="onoffswitch-title-desc">preloader will be inside content</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mpi">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-panel-icon"></a>
|
|||
|
|
<span class="onoffswitch-title">SmartPanel Icons (not Panels)</span>
|
|||
|
|
<span class="onoffswitch-title-desc">smartpanel buttons will appear as icons</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-4 d-table w-100 px-5">
|
|||
|
|
<div class="d-table-cell align-middle">
|
|||
|
|
<h5 class="p-0">
|
|||
|
|
Global Modifications
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mcbg">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-clean-page-bg"></a>
|
|||
|
|
<span class="onoffswitch-title">Clean Page Background</span>
|
|||
|
|
<span class="onoffswitch-title-desc">adds more whitespace</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mhni">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-hide-nav-icons"></a>
|
|||
|
|
<span class="onoffswitch-title">Hide Navigation Icons</span>
|
|||
|
|
<span class="onoffswitch-title-desc">invisible navigation icons</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="dan">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-disable-animation"></a>
|
|||
|
|
<span class="onoffswitch-title">Disable CSS Animation</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Disables CSS based animations</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mhic">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-hide-info-card"></a>
|
|||
|
|
<span class="onoffswitch-title">Hide Info Card</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Hides info card from left panel</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mlph">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-lean-subheader"></a>
|
|||
|
|
<span class="onoffswitch-title">Lean Subheader</span>
|
|||
|
|
<span class="onoffswitch-title-desc">distinguished page header</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mnl">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-link"></a>
|
|||
|
|
<span class="onoffswitch-title">Hierarchical Navigation</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Clear breakdown of nav links</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="list" id="mdn">
|
|||
|
|
<a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle" data-class="mod-nav-dark"></a>
|
|||
|
|
<span class="onoffswitch-title">Dark Navigation</span>
|
|||
|
|
<span class="onoffswitch-title-desc">Navigation background is darkend</span>
|
|||
|
|
</div>
|
|||
|
|
<hr class="mb-0 mt-4">
|
|||
|
|
<div class="mt-4 d-table w-100 pl-5 pr-3">
|
|||
|
|
<div class="d-table-cell align-middle">
|
|||
|
|
<h5 class="p-0">
|
|||
|
|
Global Font Size
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list mt-1">
|
|||
|
|
<div class="btn-group btn-group-sm btn-group-toggle my-2" data-toggle="buttons">
|
|||
|
|
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-sm" data-target="html">
|
|||
|
|
<input type="radio" name="changeFrontSize"> SM
|
|||
|
|
</label>
|
|||
|
|
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text" data-target="html">
|
|||
|
|
<input type="radio" name="changeFrontSize" checked=""> MD
|
|||
|
|
</label>
|
|||
|
|
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-lg" data-target="html">
|
|||
|
|
<input type="radio" name="changeFrontSize"> LG
|
|||
|
|
</label>
|
|||
|
|
<label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-xl" data-target="html">
|
|||
|
|
<input type="radio" name="changeFrontSize"> XL
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<span class="onoffswitch-title-desc d-block mb-0">
|
|||
|
|
Change <strong>root</strong> font size to effect rem
|
|||
|
|
values (resets on page refresh)
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<hr class="mb-0 mt-4">
|
|||
|
|
<div class="mt-4 d-table w-100 pl-5 pr-3">
|
|||
|
|
<div class="d-table-cell align-middle">
|
|||
|
|
<h5 class="p-0 pr-2 d-flex">
|
|||
|
|
Theme colors
|
|||
|
|
<a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="The settings below uses <code>localStorage</code> to load the external <strong>CSS</strong> file as an overlap to the base css. Due to network latency and <strong>CPU utilization</strong>, you may experience a brief flickering effect on page load which may show the intial applied theme for a split second. Setting the prefered style/theme in the header will prevent this from happening." data-original-title="<span class='text-primary'><i class='fal fa-exclamation-triangle mr-1'></i> Heads up!</span>" data-template="<div class="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></div></div>"><i class="fal fa-info-circle mr-1"></i> more info</a>
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="expanded theme-colors pl-5 pr-3">
|
|||
|
|
<ul class="m-0">
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-0" data-action="theme-update" data-themesave data-theme="" data-toggle="tooltip" data-placement="top" title="Wisteria (base css)" data-original-title="Wisteria (base css)"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-1" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-1.css" data-toggle="tooltip" data-placement="top" title="Tapestry" data-original-title="Tapestry"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-2" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-2.css" data-toggle="tooltip" data-placement="top" title="Atlantis" data-original-title="Atlantis"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-3" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-3.css" data-toggle="tooltip" data-placement="top" title="Indigo" data-original-title="Indigo"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-4" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-4.css" data-toggle="tooltip" data-placement="top" title="Dodger Blue" data-original-title="Dodger Blue"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-5" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-5.css" data-toggle="tooltip" data-placement="top" title="Tradewind" data-original-title="Tradewind"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-6" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-6.css" data-toggle="tooltip" data-placement="top" title="Cranberry" data-original-title="Cranberry"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-7" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-7.css" data-toggle="tooltip" data-placement="top" title="Oslo Gray" data-original-title="Oslo Gray"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-8" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-8.css" data-toggle="tooltip" data-placement="top" title="Chetwode Blue" data-original-title="Chetwode Blue"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-9" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-9.css" data-toggle="tooltip" data-placement="top" title="Apricot" data-original-title="Apricot"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-10" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-10.css" data-toggle="tooltip" data-placement="top" title="Blue Smoke" data-original-title="Blue Smoke"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-11" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-11.css" data-toggle="tooltip" data-placement="top" title="Green Smoke" data-original-title="Green Smoke"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-12" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-12.css" data-toggle="tooltip" data-placement="top" title="Wild Blue Yonder" data-original-title="Wild Blue Yonder"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-13" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-13.css" data-toggle="tooltip" data-placement="top" title="Emerald" data-original-title="Emerald"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-14" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-14.css" data-toggle="tooltip" data-placement="top" title="Supernova" data-original-title="Supernova"></a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="#" id="myapp-15" data-action="theme-update" data-themesave data-theme="css/themes/cust-theme-15.css" data-toggle="tooltip" data-placement="top" title="Hoki" data-original-title="Hoki"></a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<hr class="mb-0 mt-4">
|
|||
|
|
<div class="mt-4 d-table w-100 pl-5 pr-3">
|
|||
|
|
<div class="d-table-cell align-middle">
|
|||
|
|
<h5 class="p-0 pr-2 d-flex">
|
|||
|
|
Theme Modes (beta)
|
|||
|
|
<a href="#" class="ml-auto fw-400 fs-xs" data-toggle="popover" data-trigger="focus" data-placement="top" title="" data-html="true" data-content="This is a brand new technique we are introducing which uses CSS variables to infiltrate color options. While this has been working nicely on modern browsers without much issues, some users <strong>may still face issues on Internet Explorer </strong>. Until these issues are resolved or Internet Explorer improves, this feature will remain in Beta" data-original-title="<span class='text-primary'><i class='fal fa-question-circle mr-1'></i> Why beta?</span>" data-template="<div class="popover bg-white border-white" role="tooltip"><div class="arrow"></div><h3 class="popover-header bg-transparent"></h3><div class="popover-body fs-xs"></div></div>"><i class="fal fa-question-circle mr-1"></i> why beta?</a>
|
|||
|
|
</h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="pl-5 pr-3 py-3">
|
|||
|
|
<div class="ie-only alert alert-warning d-none">
|
|||
|
|
<h6>Internet Explorer Issue</h6>
|
|||
|
|
This particular component may not work as expected in Internet Explorer. Please use with caution.
|
|||
|
|
</div>
|
|||
|
|
<div class="row no-gutters">
|
|||
|
|
<div class="col-4 pr-2 text-center">
|
|||
|
|
<div id="skin-default" data-action="toggle-replace" data-replaceclass="mod-skin-light mod-skin-dark" data-class="" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-primary rounded overflow-hidden text-success js-waves-on" data-original-title="Default Mode" style="height: 80px">
|
|||
|
|
<div class="bg-primary-600 bg-primary-gradient px-2 pt-0 border-right border-primary"></div>
|
|||
|
|
<div class="d-flex flex-column flex-1">
|
|||
|
|
<div class="bg-white border-bottom border-primary py-1"></div>
|
|||
|
|
<div class="bg-faded flex-1 pt-3 pb-3 px-2">
|
|||
|
|
<div class="py-3" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
Default
|
|||
|
|
</div>
|
|||
|
|
<div class="col-4 px-1 text-center">
|
|||
|
|
<div id="skin-light" data-action="toggle-replace" data-replaceclass="mod-skin-dark" data-class="mod-skin-light" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-secondary rounded overflow-hidden text-success js-waves-on" data-original-title="Light Mode" style="height: 80px">
|
|||
|
|
<div class="bg-white px-2 pt-0 border-right border-"></div>
|
|||
|
|
<div class="d-flex flex-column flex-1">
|
|||
|
|
<div class="bg-white border-bottom border- py-1"></div>
|
|||
|
|
<div class="bg-white flex-1 pt-3 pb-3 px-2">
|
|||
|
|
<div class="py-3" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
Light
|
|||
|
|
</div>
|
|||
|
|
<div class="col-4 pl-2 text-center">
|
|||
|
|
<div id="skin-dark" data-action="toggle-replace" data-replaceclass="mod-skin-light" data-class="mod-skin-dark" data-toggle="tooltip" data-placement="top" title="" class="d-flex bg-white border border-dark rounded overflow-hidden text-success js-waves-on" data-original-title="Dark Mode" style="height: 80px">
|
|||
|
|
<div class="bg-fusion-500 px-2 pt-0 border-right"></div>
|
|||
|
|
<div class="d-flex flex-column flex-1">
|
|||
|
|
<div class="bg-fusion-600 border-bottom py-1"></div>
|
|||
|
|
<div class="bg-fusion-300 flex-1 pt-3 pb-3 px-2">
|
|||
|
|
<div class="py-3 opacity-30" style="background:url('img/demo/s-1.png') top left no-repeat;background-size: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
Dark
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<hr class="mb-0 mt-4">
|
|||
|
|
<div class="pl-5 pr-3 py-3 bg-faded">
|
|||
|
|
<div class="row no-gutters">
|
|||
|
|
<div class="col-6 pr-1">
|
|||
|
|
<a href="#" class="btn btn-outline-danger fw-500 btn-block" data-action="app-reset">Reset Settings</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-6 pl-1">
|
|||
|
|
<a href="#" class="btn btn-danger fw-500 btn-block" data-action="factory-reset">Factory Reset</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> <span id="saving"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- END Page Settings -->
|
|||
|
|
<!--Base JS-->
|
|||
|
|
<script src="js/vendors.bundle.js" asp-append-version="true"></script>
|
|||
|
|
<script src="js/app.bundle.js" asp-append-version="true"></script>
|
|||
|
|
|
|||
|
|
<!-- JQuery Validate -->
|
|||
|
|
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
|
|||
|
|
<script src="~/lib/jquery-validation/dist/additional-methods.min.js"></script>
|
|||
|
|
<script src="~/lib/jquery-validation/dist/localization/messages_zh_TW.js"></script>
|
|||
|
|
<!-- dataTables -->
|
|||
|
|
<script src="~/js/datagrid/datatables/datatables.bundle.js"></script>
|
|||
|
|
<!-- SweetAlert -->
|
|||
|
|
<script src="~/js/notifications/sweetalert2/sweetalert2.bundle.js"></script>
|
|||
|
|
<script src="~/js/notifications/toastr/toastr.js"></script>
|
|||
|
|
<!--Toast-->
|
|||
|
|
<script src="~/js/toast.js"></script>
|
|||
|
|
<script src="~/js/site.js" asp-append-version="true"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
$(function () {
|
|||
|
|
var baseApiUrl = "https://e691-210-61-91-44.ngrok.io/";
|
|||
|
|
GetMenu(baseApiUrl);
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//var chartDom = document.getElementById('main');
|
|||
|
|
//var myChart = echarts.init(chartDom, null, { width: 'auto', });
|
|||
|
|
//var option;
|
|||
|
|
//var ROOT_PATH =
|
|||
|
|
// 'http://210.61.91.43:10054/';
|
|||
|
|
|
|||
|
|
//var currentData = [];
|
|||
|
|
|
|||
|
|
//$.ajax({
|
|||
|
|
// url: 'http://210.61.91.43:10054/'+'domeechart/meter_source_1_3.json',
|
|||
|
|
// type: 'GET',
|
|||
|
|
// dataType: 'json',
|
|||
|
|
// success: function (code, statut) {
|
|||
|
|
// console.log(code.reverse());
|
|||
|
|
$.ajax({
|
|||
|
|
url: 'http://210.61.91.43:10054/'+'domeechart/meter_source_1_3.json',
|
|||
|
|
type: 'GET',
|
|||
|
|
dataType: 'json',
|
|||
|
|
cache: false,
|
|||
|
|
success: function (code, statut) {
|
|||
|
|
console.log(code.reverse());
|
|||
|
|
|
|||
|
|
var filter3Floor = code.filter(function (i, n) {
|
|||
|
|
return i.floor === 3;
|
|||
|
|
});
|
|||
|
|
currentData = filter3Floor[0].meter;
|
|||
|
|
|
|||
|
|
console.log('currentData', currentData);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
currentData = $.map(currentData, function (item) {
|
|||
|
|
item.seleted = false;
|
|||
|
|
return item;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('currentData', currentData);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
//#region 平面圖設定
|
|||
|
|
$.get(`/upload/floor_map/${current_floor.floor_guid}.svg`, function (svg) {
|
|||
|
|
echarts.registerMap('floor_svg', { svg: svg });
|
|||
|
|
|
|||
|
|
option = {
|
|||
|
|
// animationDurationUpdate: 1500,
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: function (params) {
|
|||
|
|
return `名稱：${params.data.name}<br>
|
|||
|
|
Guid：${params.data.guid}`
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
toolbox: { //工具欄
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
geo: {
|
|||
|
|
map: 'floor_svg',
|
|||
|
|
roam: true,
|
|||
|
|
scaleLimit: { //限制放大縮小倍數
|
|||
|
|
max: 8,
|
|||
|
|
min: 1.5
|
|||
|
|
},
|
|||
|
|
layoutSize: '100%',
|
|||
|
|
layoutCenter: ['50%', '50%'],
|
|||
|
|
zoom: 1.5,
|
|||
|
|
silent: true
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
geoIndex: 0,
|
|||
|
|
symbol: 'circle',
|
|||
|
|
symbolSize: 10,
|
|||
|
|
symbolOffset: [10, 10],
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: null,
|
|||
|
|
z: 2
|
|||
|
|
},
|
|||
|
|
{ //放未選擇的
|
|||
|
|
type: 'effectScatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
geoIndex: 0,
|
|||
|
|
showEffectOn: 'emphasis', //hover 才會顯示漣漪
|
|||
|
|
symbol: "image://data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAyADIDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8/bbw1YDQ9DlWGNGnsVlk/cxuWcySAsSyk9AOM1B/Z2ldcp/4Bxf/ABur+mOf7F0rJ4FmmPbrXrvw1+EUvi3wpaaomp2dssrSoIZtIS4YYbaTvLgn7vHp2qrpbmE5qGsmeJHTtK9U/wDAOL/43Sf2dpWOSh/7c4v/AI3X0xL8B7qCWS6/tnTC7ZUp/wAI9EE+bcD8vmYGPMOMDjC/3RjFn/Z0lu5p7htfVDIzSFI9KCKCdxICibCj5cADjlelNWZmq8O54CdP0juqf+Asf/xFOk0Wxa2kkijThSQTbRDp9Ur6Lh/ZzuRI0H9vWW1AsYkbQ42LAjrkydR69f0x4RrMRsrd48hgsD8jvhnH9KV0XCpGfws8x8TWsVj4k1a2hQRQw3csaIM/KocgDn2FFWPHAx4018f9RC4/9GNRUnQd3o83m6PZgjHlW0afX5Q2f/Hq+q/gMmfhPpZxnMs3H/bduvt6+2a+S9FfGlRDP/LKP/0Ule9/DH45aD4K8F2ej3llqk11C0zGS1iiaP55GYYLSKejDtTa0OLERlKKUV1PcVhJTOyQ8DqeOidf89Q1ONudr/JN36/e6Sfr6fVK83X9p7wwOtlrn/gLB/8AH6eP2nvC3ez1z8bSD/4/Tujh9nV/lPUbJzNffckG/afmHyjGOB78ivh3xBgxEkcNbOf/ACJLX0kn7T3hYSqxttbABzj7FAe//XevmPxBdeZZO6AgC0ccj/akP9aVl0OrDRlHm5lY4Dxz/wAjt4g/7CFx/wCjGoqT4gjb498Sj01O5H/kVqKR6J1Ph5RLYrGXVMiIbmzhf3MfJxz+VdNa2ulwWckc11aTTt/q5t86bPlI+6I8Hkqef7uO9N8GfC7xvrXhu21XTfBPiXU9LuY0eG/stGuZ7eQKioxWRIypwyMDg8FSO1bKfDHxzFFMh8AeI5RKANz6FdbkI6FT5fHXp3remot2k7GM7rVK5iw2enpFcLNqEDysgEDq0qLG29SWZfJJcbQy4BXBYHJxtItnZrazR/brOWZ2Qxzf6QPLA3bht8vB3ZXk9NvvV0eAfFscM0TeC9ccvj5n0e4DxkHsfLz9R3qs/hPX7eF7eXwrqaS7wwkfTZlkT1H3MkEdj0JzWvLTaXvdPPft8yG5X2GpFpq6ZJCxhkvixK3fnTBVHy4Hl+Vz0fnP8Q/u84eulUsZ1WRZQtqwLKDjOG9QPWtebQdVhhWGbw/eQyBiyzNZSI5HcH5fmGfyrL1fSL6LTbrfp90mYnA3W7jJwfaspqKtyu+n9IqLb3RxfxD/AOR/8Tf9hO6/9GtRS/EXj4g+J+//ABNLr/0a1FYG5z1FFFABRRRQAUUUUAFFFFAH/9k=",
|
|||
|
|
symbolSize: 30,
|
|||
|
|
label: {
|
|||
|
|
formatter: '{b}',
|
|||
|
|
position: 'bottom',
|
|||
|
|
show: true,
|
|||
|
|
backgroundColor: 'orange'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: '20',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: 'yellow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectedMode: 'single',
|
|||
|
|
data: null,
|
|||
|
|
z: 1
|
|||
|
|
},
|
|||
|
|
{ //放選擇的
|
|||
|
|
type: 'effectScatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
geoIndex: 0,
|
|||
|
|
showEffectOn: 'render',
|
|||
|
|
symbol: "image://data:image/jpeg;base64,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",
|
|||
|
|
symbolSize: 30,
|
|||
|
|
label: {
|
|||
|
|
formatter: '{b}',
|
|||
|
|
position: 'bottom',
|
|||
|
|
show: true,
|
|||
|
|
backgroundColor: 'orange'
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
fontSize: '20',
|
|||
|
|
fontWeight: 'bold',
|
|||
|
|
color: 'yellow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
selectedMode: 'single',
|
|||
|
|
data: null,
|
|||
|
|
z: 1
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
resetData();
|
|||
|
|
|
|||
|
|
myChart.getZr().on('click', function (params) {
|
|||
|
|
console.log("click", params);
|
|||
|
|
var pixelPoint = [params.offsetX, params.offsetY];
|
|||
|
|
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
|
|||
|
|
console.log(dataPoint);
|
|||
|
|
// currentData.push([dataPoint[0], dataPoint[1], 1]);
|
|||
|
|
// myChart.setOption(option);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
myChart.on('selectchanged', function (params) {
|
|||
|
|
@*var pixelPoint = [params.offsetX, params.offsetY];
|
|||
|
|
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);*@
|
|||
|
|
console.log("selectchanged", params);
|
|||
|
|
// currentData.push([dataPoint[0], dataPoint[1], 1]);
|
|||
|
|
// myChart.setOption(option);
|
|||
|
|
|
|||
|
|
currentData = $.map(currentData, function (item) {
|
|||
|
|
item.seleted = false;
|
|||
|
|
return item;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (params.selected.length > 0) {
|
|||
|
|
currentData[params.selected[0].seriesIndex - 1].seleted = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
resetData();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// myChart.getZr().on('mousewheel', function (params) {
|
|||
|
|
// console.log(params)
|
|||
|
|
// })
|
|||
|
|
myChart.on('georoam', function (params) {
|
|||
|
|
var zoom = myChart.getOption().geo[0].zoom;
|
|||
|
|
console.log(zoom)
|
|||
|
|
|
|||
|
|
if (zoom <= 2) {
|
|||
|
|
myChart.setOption({
|
|||
|
|
geo: {
|
|||
|
|
roam: 'scale'
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
symbolOffset: [0, 0],
|
|||
|
|
}, {
|
|||
|
|
data: [],
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
myChart.setOption({
|
|||
|
|
geo: {
|
|||
|
|
roam: true
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
resetData();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
//#endregion
|
|||
|
|
|
|||
|
|
//#region 重設平面圖設備資料
|
|||
|
|
function resetData() {
|
|||
|
|
const scatter_symbol_convertData = function (data) {
|
|||
|
|
var res = [];
|
|||
|
|
|
|||
|
|
res = $.map(data, function (item) {
|
|||
|
|
delete item.symbol;
|
|||
|
|
switch (item.status) {
|
|||
|
|
case 0:
|
|||
|
|
// item.push({ 'itemStyle': { 'color': '#ccc' } });
|
|||
|
|
item.itemStyle = { 'color': '#ccc' };
|
|||
|
|
break;
|
|||
|
|
case 1:
|
|||
|
|
// item.push({ 'itemStyle': { 'color': 'green' } });
|
|||
|
|
item.itemStyle = { 'color': 'green' };
|
|||
|
|
break;
|
|||
|
|
case 2:
|
|||
|
|
// item.push({ 'itemStyle': { 'color': 'red' } });
|
|||
|
|
item.itemStyle = { 'color': 'red' };
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
return item;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const effectScatter_unselect_convertData = function (data) {
|
|||
|
|
var res = [];
|
|||
|
|
|
|||
|
|
res = data.filter(function (item, index) {
|
|||
|
|
return item.seleted == false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const effectScatter_selected_convertData = function (data) {
|
|||
|
|
var res = [];
|
|||
|
|
|
|||
|
|
res = data.filter(function (item, index) {
|
|||
|
|
return item.seleted == true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return res;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var zoom = myChart.getOption().geo[0].zoom;
|
|||
|
|
console.log("resetData", currentData);
|
|||
|
|
|
|||
|
|
if (zoom <= 2) {
|
|||
|
|
myChart.setOption({
|
|||
|
|
series: [{
|
|||
|
|
symbolOffset: [0, 0],
|
|||
|
|
data: scatter_symbol_convertData(currentData)
|
|||
|
|
}, {
|
|||
|
|
data: []
|
|||
|
|
}, {
|
|||
|
|
data: []
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
myChart.setOption({
|
|||
|
|
series: [{
|
|||
|
|
symbolOffset: [10, 10],
|
|||
|
|
data: scatter_symbol_convertData(currentData)
|
|||
|
|
}, {
|
|||
|
|
data: effectScatter_unselect_convertData(currentData),
|
|||
|
|
}, {
|
|||
|
|
data: effectScatter_selected_convertData(currentData),
|
|||
|
|
}]
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//#endregion
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
@RenderSection("Scripts", required: false)
|
|||
|
|
</body>
|
|||
|
|
<!-- END Body -->
|
|||
|
|
</html>
|