[全域功能] yt 封裝套件及客製套件引入 | [系統監控] popover 卡片程序建置 | datatable ajax 程序串接

Frontend/_systemMonitor.html

@@ -0,0 +1,265 @@
+<style>
+    [id^=yt_tooltip] {
+        width: 450px;
+    }    
+</style>
+<div class="container-fluid">
+    <div class="row bg-dark">
+        <h1 class="p-2 mx-5 mb-0">電錶系統</h1>
+        <div class="btn-group my-2">
+            <button type="button" class="btn btn-secondary waves-effect waves-themed">總覽</button>
+            <button type="button" class="btn btn-secondary waves-effect waves-themed">19 F</button>
+            <button type="button" class="btn btn-secondary waves-effect waves-themed">21 F</button>
+        </div>
+
+    </div>
+</div>
+<main id="js-page-content" role="main" class="page-content">
+    <div class="row">
+        <div class="col-sm-12 col-xl-5">
+            <div class="d-flex justify-content-start mb-6">
+                <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">19 F</button>
+                <div id="floor19" class="mr-5">
+                    <span class="status status-success d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 19F 門口東
+                </div>
+                <div class="mr-5">
+                    <span class="status status-danger d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 19F 戶外門口中間
+                </div>
+            </div>
+
+            <div class="d-flex justify-content-start mb-6">
+                <button type="button" class="btn btn-primary waves-effect waves-themed mr-5">21 F</button>
+                <div class=" mr-5">
+                    <span class="status status-success d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 21F 電錶01
+                </div>
+                <div class="mr-5">
+                    <span class="status status-danger d-inline-block">
+                        <img src="img/demo/avatars/avatar-c.png" class="profile-image rounded-circle" alt="...">
+                    </span> 21F 電錶02
+                </div>
+            </div>
+
+        </div>
+        <div class="col-sm-12 col-xl-7">
+            <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
+            <!--<a href="javascript:;" data-toggle="modal" data-target=".default-example-modal-right-lg">
+            <span class="badge border border-light bg-primary-700 position-absolute pos-top pos-left"><i class="fal fa-image fa-3x"></i></span></a>-->
+        </div>
+    </div>
+
+
+
+
+
+</main>
+
+<script>
+
+    $(function () {
+        initPopover();
+    })
+
+    function drawStateTabBlo() {
+        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
+                            <tbody>
+                                <tr>
+                                    <td>電壓 V</td>
+                                    <td>113</td>
+                                </tr>
+                                <tr>
+                                    <td>電流 A</td>
+                                    <td>8</td>
+                                </tr>
+                                <tr>
+                                    <td>功率 W</td>
+                                    <td>203</td>
+                                </tr>
+                                <tr>
+                                    <td>今日用電 kWh</td>
+                                    <td>58</td>
+                                </tr>
+                            </tbody>
+                        </table>`
+        return strHtml;
+    }
+    
+    function drawInfoTabBlo() {
+        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
+                            <tbody>
+                                <tr>
+                                    <td>設備編號</td>
+                                    <td>B01-B2-19F-CR-001</td>
+                                    <td>3D 座標</td>
+                                    <td>113</td>
+                                </tr>
+                                <tr>
+                                    <td>設備名稱</td>
+                                    <td>A區迴路001</td>
+                                    <td>forge dbid</td>
+                                    <td>101</td>
+                                </tr>
+                                <tr>
+                                    <td>廠牌</td>
+                                    <td>飛利浦 Philip</td>
+                                    <td>IP</td>
+                                    <td>192.168.1.105</td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>原廠文件</td>
+                                    <td><a href="#">2022使用手冊.pdf</a></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                            </tbody>
+                        </table>`
+        return strHtml;
+    }
+    
+    function drawErrRecTabBlo() {
+        let strHtml = `<table class="table table-bordered table-striped text-center m-0">
+                            <tbody>
+                                <tr>
+                                    <td>設備編號</td>
+                                    <td>B01-B2-19F-CR-001</td>
+                                    <td>3D 座標</td>
+                                    <td>113</td>
+                                </tr>
+                                <tr>
+                                    <td>設備名稱</td>
+                                    <td>A區迴路001</td>
+                                    <td>forge dbid</td>
+                                    <td>101</td>
+                                </tr>
+                                <tr>
+                                    <td>廠牌</td>
+                                    <td>飛利浦 Philip</td>
+                                    <td>IP</td>
+                                    <td>192.168.1.105</td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>原廠文件</td>
+                                    <td><a href="#">2022使用手冊.pdf</a></td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>型號</td>
+                                    <td>BH065</td>
+                                    <td></td>
+                                    <td></td>
+                                </tr>
+                            </tbody>
+                        </table>`
+        return strHtml;
+    }
+    
+    function drawOpeRecTabBlo() {
+        let strHtml = `<table id="opeRecTable" class="table table-bordered table-striped text-center m-0 w-100">
+                            
+                        </table>`
+        return strHtml;
+    }
+
+    function initPopover() {
+        $("#floor19").YTTooltip({
+            html: `<div class="card m-1 border device-wrap">
+                                    <div class="card-header p-2 px-3">
+                                        <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                            <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                            <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
+                                            <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
+                                            <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body p-2 tab-content">
+
+                                        <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawStateTabBlo() }
+                                        </div>
+                                        <div id="info" data-tabname="cardTab" data-tabrole="child">
+                                            ${drawInfoTabBlo() }
+                                        </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>`,
+            onShow: function () {
+                
+                var tab = new YT.Tab({ tabName: "cardTab" })
+
+                loadOpeRecTable();
+            }
+        })
+
+        function loadOpeRecTable() {
+            let url = "https://api.npoint.io/31e717774a0f5822cc7b";
+            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": "異常ID",
+                    "data": "errId",
+                },
+                {
+                    "title": "異常原因",
+                    "data": "errReason",
+                },
+                {
+                    "title": "ACK確認",
+                    "data": "ackCheck",
+                },
+                {
+                    "title": "發生/賦歸時間",
+                    "data": "time",
+                },
+               
+            ];
+
+            let callback = function () {
+                $('#opeRecTable').wrap("<div class='scrolledTable'></div>");  //不採用datatable內建scrollbody，會導致thead跑掉
+                let api = this.api();
+                api.columns.adjust();
+            }
+
+            opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, callback, null, null, null, null, null, "tpi");
+        }
+    }
+
+</script>

Frontend/css/yourteam/plugins/yt-tooltip/yt-tooltip.css

@@ -0,0 +1,8 @@
+[id^=yt_tooltip] {
+    background-color: var(--yt-main-color);
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0px 0px 11px 3px rgb(0 0 0 / 20%);
+    min-width:100px;
+}
+

Frontend/img/demo/_notes/dwsync.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<dwsync>
+<file name="s-1.png" server="//mnas/web/wsp/" local="132338994700000000" remote="132338994700000000" Dst="0" />
+</dwsync>

Frontend/img/demo/avatars/_notes/dwsync.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<dwsync>
+<file name="avatar-admin.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-d.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-b.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-e.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-g.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-h.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-a.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-j.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-c.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+<file name="avatar-m.png" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
+</dwsync>

Frontend/img/demo/avatars/avatar-admin.txt

@@ -0,0 +1,35 @@
+LICENSE CERTIFICATE : Envato Market Item
+==============================================
+
+This document certifies the purchase of:
+ONE PHOTODUNE EXTENDED LICENSE
+as defined in the standard terms and conditions on Envato Market.
+
+Licensor's Author Username:
+ollyi
+
+Licensee:
+Sunnyat A.
+
+Item Title:
+Computer programmer (aka "img/demo/avatars/avatar-admin.png")
+
+Item URL:
+https://photodune.net/item/computer-programmer/2360811
+
+Item ID:
+2360811
+
+Item Purchase Code:
+c37c52b4-2d0b-4742-993e-ef2f771251ae
+
+Purchase Date:
+2014-03-06 12:23:06 UTC
+
+For any queries related to this document or license please contact Help Team via https://help.market.envato.com
+
+Envato Pty. Ltd. (ABN 11 119 159 741)
+PO Box 16122, Collins Street West, VIC 8007, Australia
+
+==== THIS IS NOT A TAX RECEIPT OR INVOICE ====
+

Frontend/img/demo/avatars/cc.txt

@@ -0,0 +1,10 @@
+CC0 License
+
+- Free for personal and commercial use
+- No attribution required
+
+https://www.pexels.com
+https://www.pexels.com/photo-license/
+
+Search case:
+https://www.pexels.com/search/profile/

Frontend/img/demo/gallery/source.txt

@@ -0,0 +1,7 @@
+License
+All photos published on Unsplash can be used for free. You can use them for commercial and noncommercial purposes. You do not need to ask permission from or provide credit to the photographer or Unsplash, although it is appreciated when possible.
+
+More precisely, Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash. This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.
+
+
+https://unsplash.com/license