<!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/jquery-ui/jquery-ui.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-notice/yt-notice.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 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 fs-1"
               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">
            <div class="dropdown">
              <a href="javascript:;"
                 id="toggleNoticeBtn"
                 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:-->
                <div class="row m-0 justify-content-center userblock">
                  <i id="noticeConIcon" class="fs-1-5 w-100 text-center"></i>
                  <span id="noticeConText"
                        class="text-truncate text-truncate-header hidden-xs-down"
                        data-hide="隱藏警告"
                        data-show="顯示警告"></span>
                </div>
              </a>
            </div>
            <!--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:-->
                <div class="row m-0 justify-content-center userblock">
                  <i class="fas fa-user-circle fs-1-5 w-100 text-center"></i>
                  <span id="usrName"
                        class="text-truncate text-truncate-header hidden-xs-down"></span>
                </div>
              </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&nbsp;<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>

  <div id="noticeBlock"
       style="
        position: fixed;
        top: 70px;
        right: 0px;
        padding: 20px;
        transition: 0.2s;
        z-index: 50000;
        height: 100%;
      "></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/n4js/elevatorbaja.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 = {}; //記錄全頁面已選擇項目
    var timeOuters = [];
    pageAct.AreaTag = "";
    if (location.href.indexOf("ord") != -1) {
      location.href = "/file/index.html";
    }
    var lastPage = sessionStorage.getItem("lastPage");
    // 執行初步 Loading
    var loadEle = pageLoading();
    var errRecTable = null,
      opeRecTable = null;
    var tolSubList = [];
    var allDevices = [];
    var tempSubTag = ["M10", "M12"];  // 溫度向小類

    /**
     * 頁面 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",*/ /* 會影響 messages_zh_TW 文字呈現 */
          "lib/jquery-validation/dist/localization/messages_zh_TW",
          "lib/jquery-ui/jquery-ui.min",
          "lib/chart.js_4.1.2/chart.umd",
          "lib/dropzone/dropzone-min",
          "lib/jstree-master/jstree.min",
          "lib/notifications/sweetalert2/sweetalert2.bundle",
        ], 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",
          "yourteam/plugins/yt-notice/yt-notice",
          "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() {
        getUserInfo();
        iniFroList();
        showMainSys();
        getBuiList();
        getSysMonBtnList();
        checkDevState();
        loadNoticeConSta();

        allDevices = getAllDevice();
        if (lastPage) {
          let lastPageAct = {};
          if (isJSON(sessionStorage.getItem("pageAct"))) {
            lastPageAct = JSON.parse(sessionStorage.getItem("pageAct"));
          }
          if (
            (lastPageAct.sysSubTag && lastPage == "systemMonitor") ||
            lastPage == "sysElevator"
            //  || lastPage == "sysSensor"
          ) {
            $(`#subSysBtn${lastPageAct.sysSubTag}`).click();
            $("#sysMonTopBtn").YTTab("set");
          } else {
            $(`[data-tabname=topFunBtn][data-page=${lastPage}]`).YTTab(
              "setAndClick"
            );
          }

          /*$(`[name=topFunBtn][data-page=${lastPage}]`).click();*/
        } else {
          $("#app").load("_dashboard.html", loadCallback);
        }

        timeOutGetData();

        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) {
            return;
          }
          if (
            page != "systemMonitor" &&
            page != "sysElevator"
            //  && page != "sysSensor"
          ) {
            $("#sysMonBtnList [name=topFunBtn]").removeClass("active");
            pageAct.sysMainTag = null;
            pageAct.sysSubTag = null;
          } else {
            setSysTagForPageAct(this);
            $("#sysMonTopBtn").YTTab("set");
            $(`#subSysBtn${pageAct.sysSubTag}`).YTTab("set");
          }
          // 取消當前所有 baja 訂閱
          $.each(tolSubList, (idx, sub) => {
            sub.unsubscribeAll();
            sub.detach();
          });
          // 清空 baja 訂閱紀錄
          tolSubList = [];
          // 清空 loading 狀態
          endPageLoading();

          // $(loadEle).Loading("close");
          $(".yt-alert").YTAlert().hide();
          // 取得使用者資訊
          getUserInfo();
          // 存取現在頁面 (重整讀取紀錄用)
          sessionStorage.setItem("lastPage", page);
          sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
          // 讀取子頁面
          $("#app").load(`_${page}.html`, loadCallback);
        });

        onEvent("click", "#logout", function () {
          localStorage.removeItem("JWT-Authorization");
          location.href = "/logout";
        });

        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) {
            setLightSchBlcok ? setLightSchBlcok(this) : "";
            $("#lightSchModal").modal("show");
          }
        });

        onEvent(
          "yt:tab:prechange",
          "[data-tabname=topFunBtn]",
          function (e, arg) {
            if ($(this)[0].id == "sysMonTopBtn" || !$(this).data("page")) {
              arg.cancel = true;
            }
          }
        );

        onEvent("scroll", window, function () {
          if ($(window).scrollTop() != 0) {
            $("#noticeBlock").css("top", 0);
          } else {
            $("#noticeBlock").css("top", 70);
          }
        });

        onEvent("click", "#testsysbtn", function () { });

        //onEvent("click", "button[id^=noticeChkBtn]", function () {
        //    $(this).parents(".toast").YTNotice("hide");
        //})

        onEvent("click", "button[id^=noticeChkBtn]", function () {
              /**button[id^=bajaAckBtn] */ let uuid = $(this).data("uuid");
          let url = window.location.origin + "/obix/alarm/" + uuid + "/ack";
          let myBaja = new MyBaja();
          myBaja.setMyUserAccount((data) => {
            let sendData =
              '<obj is="obix:AckAlarmIn"><str name="ackUser" val="obix" /></obj>';
            $.post(
              url,
              sendData,
              (rel) => {
                console.log(rel);
                $(this).parents(".toast").YTNotice("hide");
              },
              "text"
            );
          });
        });

        onEvent("click", "#toggleNoticeBtn", function () {
          chaNoticeConSta();
        });

        $(window).on("timeout:3s", function () {
          getSystemAlarmByBaja((data) => {
            if (typeof getAlarmSub != "undefined" && getAlarmSub) {
              getAlarmSub(data);
            }

            alarmIconBlink();
          });
          getAlarm();
        });
      }

      // 登入驗證
      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 || common.SysErr);
              return;
            } else {
              /*toast_ok(rel.msg);*/
              cookies.create(
                "JWT-Authorization",
                rel.data.token,
                12 * 60 * 60 * 1000
              );
              isValidLogin();
            }
          },
          error: function (xhr, textStatus, thrownError) {
            alert(common.SysErr);
          },
        });
      }

      //==============================================================================
      //                       ↓  系統監控 - 共用 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" data-toggle="tooltip" data-placement="bottom" title="燈控排程" id="lightSch-tab" class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt icon fa-2x"></i></button>`
              : "";

          let option = {
            html: `<div class="card m-1 border device-wrap" data-number="${devNum}" data-position="left">
                                          <div class="card-header p-3">

                                              <div class="position-absolute mr-5" 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"
                                                  data-toggle="tooltip" data-placement="bottom" title="即時監控"
                                                  class="px-2 btn btn-icon border-0 nav-link active mx-1" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon fa-2x"></i></button>
                                                  ${lightHtml}
                                                  <button type="button" id="info-tab"
                                                  data-toggle="tooltip" data-placement="bottom" title="基本資料"
                                                  class="px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon fa-2x"></i></button>
                                                  <button type="button"
                                                  d data-toggle="tooltip" data-placement="bottom" title="告警資料"
                                                  id="errRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1 position-relative " role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle fa-2x"></i></button>
                                                  <button type="button"
                                                  data-toggle="tooltip" data-placement="bottom" title="運維紀錄"
                                                  id="opeRec-tab" class=" px-2 btn btn-icon border-0 nav-link mx-1" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon fa-2x"></i></button>

                                                  <button type="button" class="px-2 btn btn-icon border-0 nav-link mx-1"><i class="fas fa-times text-white-50 fa-2x" data-close="yttooltip"></i></button>

                                              </div>
                                          </div>
                                          <div class="card-body p-2 tab-content w-100">
                                              <div id="state" class="show active w-100" 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",
            // 在 _sysElevator.html 及 _sysMonAll.html 會用到
            onShow: function (tooltipEle, oriEle) {
              // 執行 pop 視窗上方 Tab 類別
              new YT.Tab({ tabName: "cardTab" });
              // 系統監控才會有 data-devobj 屬性
              let devObj = $(oriEle).data("devobj");
              // 讀取運維列表
              loadOpeRecTable(devGuid);
              // 讀取異常列表
              loadErr($(oriEle).data("number"));
              // 讀取設備基本資料列表
              $(tooltipEle)
                .find("#info")
                .html(
                  typeof drawInfoTabBlo != "undefined"
                    ? drawInfoTabBlo(devGuid)
                    : ""
                );
              // 聚焦熱點
              const eleDbId = parseInt($(oriEle).data("dbId"));
              if (eleDbId) {
                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
                  changeScaleForHotspot(eleDbId);
                } else {
                  controlFocusHotspot(eleDbId);
                }
              }
              // 3D 視角 ZOOM IN 聚焦

              if (devObj) {
                console.log("devObj", devObj);
                moveViewToDevice(devObj?.forge_dbid);
              }

              // pop 視窗卡片可拖移功能初始化
              $(tooltipEle).draggable({
                cursor: "move",
                handle: ".card-header", // 只能通过卡片的标题栏拖拽
                containment: "document",
                scroll: true,
              });
              // pop 視窗卡片可縮放功能初始化
              // $(tooltipEle).resizable({
              //     // resize: function (event, ui) {
              //     //     let iframe = $(ui.element).find("iframe");
              //     //     if (iframe.length != 0) {
              //     //         if (ui.size.width != ui.originalSize.width) {
              //     //             iframe.css("width", "100%");
              //     //         } else if (ui.size.height != ui.originalSize.height) {
              //     //             iframe.css("height", "100%");
              //     //         }
              //     //     }
              //     //     let cardBodyHeight = $(ui.element).find(".card-body").css("height");
              //     //     $(ui.element).find(".scrolledTable").css("height", cardBodyHeight)

              //     //     errRecTable.draw(false)
              //     // },
              //     // minWidth: 200,
              //     // minHeight: 150,
              // });
              // 電梯管理 - Card table 更新
              typeof subDeviceSetTable != "undefined"
                ? subDeviceSetTable($(oriEle).data("number"))
                : "";
            },
            onHide: function (tooltipEle, oriEle) {
              const eleDbId = $(oriEle).data("dbId");
              if (eleDbId) {
                if (alarmDbIdList.some((dbId) => dbId == eleDbId)) {
                  changeScaleForHotspot(eleDbId, false);
                } else {
                  // 3D 熱點解除
                  controlFocusHotspot(eleDbId, false);
                }
              }
              // sysMonFloor Echart 解除 focus
              typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
            },
          };

          $.extend(option, extOption);

          $(ele).YTTooltip(option);
        });
      }

      // 卡片設備名稱點擊事件
      function devItemNameEvent() {
        onEvent("click", "[name=devItemName]", function () {
          let devNum = $(this).data("number");
          let devObj = $(`[name=devItem][data-number=${devNum}]`).data(
            "devobj"
          );
          moveViewToDevice(devObj.forge_dbid);
        });
      }

      // 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,
          "<'scrolledTable'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) {
        pageAct.sysSubTag !== "L1" &&
          pageAct.sysSubTag !== "M12" &&
          console.log("dbId", dbId);
        pageAct.sysSubTag !== "L1" &&
          pageAct.sysSubTag !== "M12" &&
          changeColorForHotspot(dbId, open ? "focus" : null);
        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) {
        // console.log("@@@",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,
          "<'scrolledTable'tpi>"
        );
      }

      //根據 data-type 設置顏色 (判斷後台是否有設定,若無則帶預設)
      function setLightColor() {
        $("[data-light-type]").each((index, ele) => {
          let type = $(ele).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).css("background-color", color);
          //是否閃爍
          if (isFlashing) {
            $(ele).parents(".device-wrap").addClass("light-flash");
          } else {
            $(ele).parents(".device-wrap").removeClass("light-flash");
          }
        });
      }

      // 設置昇位圖上方 燈號
      function setTopLight() {
        let sysSubObj = pageAct.sysSubObj;
        let strHtml = ``;
        if (
          sysSubObj.device_normal_point_name != null &&
          sysSubObj.device_normal_point_value != null
        ) {
          strHtml += ` <div class="row m-0 align-items-center">
                              <span id="sysNorLight" class="circle-light mr-2 " data-light-type="normal"></span>
                              <label class="mb-0">${sysSubObj.device_normal_text}</label>
                          </div>`;
        }
        if (
          sysSubObj.device_close_point_name != null &&
          sysSubObj.device_close_point_value != null
        ) {
          strHtml += ` <div class="row m-0 align-items-center">
                                      <span id="sysCloLight" class="circle-light mr-2" data-light-type="close"></span>
                                      <label class="mb-0">${sysSubObj.device_close_text}</label>
                              </div>`;
        }
        if (
          sysSubObj.device_error_point_name != null &&
          sysSubObj.device_error_point_value != null
        ) {
          strHtml += ` <div class="row m-0 align-items-center">
                              <span id="sysErrLight" class="circle-light mr-2" data-light-type="error"></span>
                              <label class="mb-0">${sysSubObj.device_error_text}</label>
                          </div>`;
        }

        return strHtml;
      }

      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 || obj.device_node_full_name);
        console.log("crePosPopover", parentEle.data());
        initPopover(null, _position, parentEle);

        return parentEle;
      }

      // 設置 Forge 3D 溫度條
      function setTopHeatBar() {
        let strHtml = `<canvas name="forgeHeatBar" width="200" height="30" style="position: absolute; z-index:9999"></canvas>`;
        return strHtml;
      }

      //==============================================================================
      //                       ↑  系統監控 - 共用 Function ↑
      //==============================================================================
    } catch (e) {
      $(loadEle).Loading("close");
    }

    function setSysTagForPageAct(obj) {
      pageAct.sysMainTag = $(obj).data("subSysObj").main_system_tag;
      pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
      pageAct.sysSubName = $(obj).data("subSysObj").full_name;
      pageAct.sysSubObj = $(obj).data("subSysObj");
      getDevItem();
    }

    function getDevItem() {
      let url = baseApiUrl + "/api/Device/GetDeviceItem";

      objSendData.Data = {
        main_system_tag: pageAct.sysMainTag,
        sub_system_tag: pageAct.sysSubTag,
      };
      ytAjax = new YourTeam.Ajax(
        url,
        objSendData,
        function (res) {
          if (!res || res.code != "0000" || !res.data) {
          } else {
            pageAct.devItems = res.data;
          }
        },
        null,
        "POST"
      ).send();
    }

    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" data-tabname="topFunBtn" 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" data-tabname="topFunBtn" 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-chart-line"
                        : v.authCode == "PF5"
                          ? "fa-bell"
                          : v.authCode == "PF6"
                            ? "fa-server"
                            : v.authCode == "PF7"
                              ? "fa-image"
                              : v.authCode == "PF8"
                                ? "fa-user"
                                : "";
                strHtml += `<div class="btn-group mx-4">
                                                                              <a href="javascript:;" name="topFunBtn" data-tabname="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) {
          if (!res || res.code != "0000" || !res.data) {
          } else {
            $("#sysMonBtnList").html("");

            $.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";
                }
                // console.log(subSysObj.sub_system_tag)
                // if (subSysObj.sub_system_tag == "M12") {
                //     page = "sysSensor";
                // }

                let li = creEle("li");
                let a = creA(
                  subSysObj.full_name,
                  { href: "javascript:;" },
                  [],
                  `subSysBtn${subSysObj.sub_system_tag}`,
                  { page: page, tabname: "systemMonitor" },
                  "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();
    }

    var noticeOptArr = [];
    function getAlarmFromDB() {
      let url = baseApiUrl + "/api/AlarmCard";
      ytAjax = new YourTeam.Ajax(
        url,
        null,
        function (res) {
          if (!res || res.code != "0000" || !res.data) {
          } else {
            let datas = res.data;
          }
        },
        null,
        "POST",
        true
      ).send();
    }

    function getAlarm() {
      let now = new Date().getTime();
      let noticeObj = [
        { title: "異常編號", data: "uuid" },
        { title: "異常等級", data: "priority" },
        { title: "異常類別", data: "alarmClass" },
        { title: "設備名稱", data: "full_name" },
        { title: "異常訊息", data: "msgText" },
      ];
      // 向 niagara 取得告警資料
      getDeviceAlarmCardByBaja(null, now, false, false, function (bajaDatas) {
        let datas = bajaDatas.data;
        let titleHtml = `異常通知`;
        let notices = [];
        // 遍歷每個告警資料
        $.each(datas ?? [], (idx, data) => {
          if (noticeOptArr.findIndex((x) => x.id == data.uuid) == -1) {
            // 針對該告警對象的設備,從 allDevices 找出設備名稱
            datas[idx].full_name = allDevices.filter(
              (x) => x.device_number == data.devicePath
            )[0]?.full_name;

            let div1 = creDiv(["col-12"]);
            let button = creBtn(
              "確認",
              "noticeChkBtn",
              null,
              ["btn btn-sm btn-secondary ml-auto col-4"],
              { uuid: data.uuid }
            );
            let btnDiv = creDiv(["d-flex m-0 gap-5 mt-2"]);
            btnDiv.append(button);
            // 繪製 每行告警資訊
            noticeObj.forEach((notice) => {
              let div2 = creDiv(["row", "m-0"]);
              let span1 = creSpan(notice.title + ":", ["m-0"]);
              if (notice.data === "uuid") {
                data[notice.data] = data[notice.data].split("-")[0];
              }
              span1.append(creSpan(data[notice.data]));
              div2.append(span1);
              div1.append(div2);
            });

            div1.append(btnDiv);
            // 拚湊 YTNotice 通知套件所需參數
            let main = {
              title: titleHtml,
              content: div1.outerHtml(),
              type: "warning",
              id: data.uuid,
              hasCloseBtn: true,
              timeText: displayDate(data.timestamp),
            };
            noticeOptArr.push(main);
            notices.push(main);
          }
        });
        if (notices.length != 0) {
          $("#noticeBlock").YTNotice(
            "add_many",
            notices.oSort("id").reverse()
          );
        }
      });
    }

    function getAllDevice() {
      let url = baseApiUrl + "/api/Device/GetAllDevice";
      let result = [];

      ytAjax = new YourTeam.Ajax(
        url,
        null,
        function (res) {
          if (!res || res.code != "0000" || !res.data) {
          } else {
            result = res.data;
          }
        },
        null,
        "POST"
      ).send();
      return result;
    }

    function loadNoticeConSta() {
      let noticeStatus = localStorage.getItem("noticeStatus");
      chaNoticeConSta(noticeStatus ?? "show");
    }

    function chaNoticeConSta(type = null) {
      let showText = $("#toggleNoticeBtn #noticeConText").data("show");
      let hideText = $("#toggleNoticeBtn #noticeConText").data("hide");
      let iconArr = ["fal fa-comment-slash", "fal fa-comment-dots"];
      $("#noticeConIcon").removeClass(iconArr[0]).removeClass(iconArr[1]);
      if (type != null) {
        if (type == "hide") {
          setHide();
        } else if (type == "show") {
          setShow();
        }
      } else {
        if ($("#noticeBlock").is(":visible")) {
          setHide();
        } else if (!$("#noticeBlock").is(":visible")) {
          setShow();
        }
      }

      function setShow() {
        $("#toggleNoticeBtn").find("#noticeConText").text(hideText);
        $("#noticeConIcon").addClass(iconArr[0]);
        $("#noticeBlock").show();
        $("#noticeBlock").animate({ opacity: 1 }, 200);
        localStorage.setItem("noticeStatus", "show");
      }

      function setHide() {
        $("#toggleNoticeBtn").find("#noticeConText").text(showText);
        $("#noticeConIcon").addClass(iconArr[1]);
        $("#noticeBlock").animate({ opacity: 0 }, 200, function () {
          $("#noticeBlock").hide();
        });
        localStorage.setItem("noticeStatus", "hide");
      }
    }
  </script>
</body>
<!-- END Body -->
</html>