[系統監控][燈控排程] 增加燈控排程按鈕 | 燈控排程 Modal 及 Table 程序建置 | [儀錶板] Supplier 放入全域變數，根據供應商全域變數取得 baja 資料

Backend/appsettings.json

@@ -16,8 +16,8 @@
     "MySqlDBConfig": {
       "Server": "FYlY+w0XDIz+jmF2rlZWJw==", //0.201
       "Port": "js2LutKe+rdjzdxMPQUrvQ==",
-      "Database": "VJB2XC+lAtzuHObDGMVOAA==", //三菱
-      //"Database": "IgYBsgG2VLKKxFb64j7LOA==", //wsp
+      //"Database": "VJB2XC+lAtzuHObDGMVOAA==", //三菱
+      "Database": "IgYBsgG2VLKKxFb64j7LOA==", //wsp
       "Root": "SzdxEgaJJ7tcTCrUl2zKsA==",
       "Password": "FVAPxztxpY4gJJKQ/se4bQ=="
     }

Frontend/_dashboard.html

@@ -354,7 +354,7 @@
       
         
         // 今日用電量
-        getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", today, tomorrow, (data) => {
+        getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, today, tomorrow, (data) => {
             let result = data?.data[0]?.sum;
             result = result ? parseFloat(result).toFixed(2) : 0;
             $("#todayUseElec").text(result);
@@ -362,7 +362,7 @@
         })
 
         // 今日用電量 (每小時)
-        getElectricMeterHourDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, tomorrow, (data) => {
+        getElectricMeterHourDataByBaja(devNum + "_kWh_tot", n4Sup, yesterday, tomorrow, (data) => {
 
             let todayData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year") && x.timestamp.$date.$month == getTimeByType("month") && x.timestamp.$date.$day == getTimeByType("date"));
             let yesData = data.data.filter(x => x.timestamp.$date.$year == getTimeByType("year", -1) && x.timestamp.$date.$month == getTimeByType("month", -1) && x.timestamp.$date.$day == getTimeByType("date", -1));
@@ -371,7 +371,7 @@
         })
 
         // 昨日用電量
-        getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", yesterday, today, (data) => {
+        getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, yesterday, today, (data) => {
             let result = data?.data[0]?.sum;
             result = result ? parseFloat(result).toFixed(2) : 0;
             $("#yesUseElec").text(result);
@@ -379,7 +379,7 @@
         })
 
         // 本週與上週用電量 (每天)
-        getElectricMeterDayDataByBaja(devNum + "_KWH", "Mitsubishi_Sup", prevTwoWeek, tomorrow, (data) => {
+        getElectricMeterDayDataByBaja(devNum + "_kWh_tot", n4Sup, prevTwoWeek, tomorrow, (data) => {
             let curDay = (new Date()).getDay() == 0 ? 7 : (new Date()).getDay();
             let curWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr));
             let prevWeekData = data.data.filter(x => strToDate(displayDate(new Date(), "date"), null, 0 - 7 - (curDay - 1)) <= strToDate(x.timestamp.$cEncStr) && strToDate(new Date(), null, 0 - 7) >= strToDate(x.timestamp.$cEncStr));

Frontend/_sysMonAll.html

@@ -3,18 +3,42 @@
 
 <div class="row">
     <div id="leftDiv" class="col-sm-12 col-xl-6">
-      
+
     </div>
     <div id="rightDiv" class="col-sm-12 col-xl-6">
 
     </div>
 </div>
 
+<!-- Modal center Add -->
+<div class="modal fade" id="lightSchModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog modal-dialog-centered" role="document" style="min-width:60%">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title">
+                    燈控排程
+                </h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <table id="lightSchTable" class="table table-bordered table-striped text-center m-0 w-100">
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
+                <button type="button" id="lightSchSavBtn" class="btn btn-primary">儲存</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
     var allDevList = [];  //全設備清單
-    
+
     $(function () {
-        getBuildMenu((arr,data) => {
+        getBuildMenu((arr, data) => {
             if (arr.indexOf(4) != -1) {
                 getFloDevList();
                 setLightColor();
@@ -23,16 +47,14 @@
                 show3DModel(data.urn_3D);
             }
         });
-        
-        
     })
 
-    // 從資料庫取得 drawing type 決定呈現畫面
-    function getHtmlByType(type = 4, data = {}) {
+    // 依據 drawing type 決定呈現畫面
+    function getHtmlByType(type = 0, data = {}) {
         let strHtml = ``;
         switch (type) {
             case 2:
-                strHtml = `<div>
+                strHtml = `<div style="height:85vh">
                                 <iframe src="${data.system_url}" width="100%" height="100%"></iframe>
                            </div>`;
                 break;
@@ -63,7 +85,6 @@
 
         return strHtml;
     }
-
     //baja 訂閱設備
     function subDevice() {
         if (myBaja == null) {
@@ -147,7 +168,6 @@
                     strHtml += `<button id="floItemBtn${floObj.full_name}" type="button" class="btn btn-primary waves-effect waves-themed mr-5 mt-1 align-self-start" >${floObj.full_name}</button>`
                     strHtml += `<div class="col p-0 d-grid grid-gap-5 grid-temp-col-c" style="--c-grid-temp-col:repeat(auto-fill,minmax(250px,1fr))">`
                     $.each(floObj.device_list, (index2, devObj) => {
-                        console.log(">>>> url: " + baseImgUrl + " , img: " + varPathImg + ", icon: " + devObj.device_master_icon);
                         allDevList.push(devObj);
 
                         strHtml += `<div class="card m-1 border device-wrap">
@@ -155,7 +175,7 @@
                                             <div class="d-flex mb-2">
                                                 <div  class="mr-5 cur-poi">
                                                     <span class="d-inline-block mr-3">
-                                                        <img src="${baseImgUrl + varPathImg + devObj.device_master_icon}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
+                                                        <img src="${baseImgUrl + varPathDevIcon + devObj.device_image}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
                                                     </span>
                                                     <a href="javascript:;">${devObj.full_name}</a>
                                                 </div>
@@ -170,25 +190,20 @@
                     })
                     strHtml += "</div></div>";
                 })
+                // Niagara 產生 file 開頭字串問題
+                strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
                 if (!res.data || res.data.length == 0) {
                     endPageLoading();
                 } else {
                     subDevice();
                 }
                 $("#floDevList").append(strHtml);
-                initPopover();
+                initPopover(pageAct.sysMainTag == "LT" ? "light" : null);
             }
         }, null, "POST").send();
     }
 
-    // Card 即時狀態
-    function drawStateTabBlo() {
-        let strHtml = `<div style="height:15rem">
-                            <iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
-                       </div>`
-        return strHtml;
-    }
-
+    // 取得根據棟別顯示左右區塊資訊
     function getBuildMenu(callback = null) {
         let url = baseApiUrl + "/api/Device/GetBuildMenu";
         let sendData = {
@@ -202,7 +217,7 @@
 
             } else {
                 let leftData = {}, rightData = {};
-                debugger
+                
                 for (var key in res.data) {
                     if (key.startsWith("left")) {
                         leftData[key.split("left_")[1]] = res.data[key];
@@ -214,22 +229,30 @@
                 if (res.data.left_drawing != null) {
                     $("#leftDiv").html(getHtmlByType(res.data.left_drawing, leftData));
                 } else {
-                    $("#leftDiv").html(getHtmlByType(4, leftData));
+                    $("#leftDiv").html(getHtmlByType(0, leftData));
                 }
                 if (res.data.right_drawing != null) {
                     $("#rightDiv").html(getHtmlByType(res.data.right_drawing), rightData);
                 } else {
-                    $("#rightDiv").html(getHtmlByType(4, rightData));
+                    $("#rightDiv").html(getHtmlByType(0, rightData));
                 }
 
-                callback ? callback([res.data.left_drawing, res.data.right_drawing],res.data) : "";
+                callback ? callback([res.data.left_drawing, res.data.right_drawing], res.data) : "";
             }
         }, null, "POST").send();
     }
 
-    function show3DModel(urn) {
-        launchViewer(urn, (viewer, nodeIds) => {
+    // Card 即時狀態
+    function drawStateTabBlo() {
+        let strHtml = `<div style="height:15rem">
+                            <iframe src="/ord?station:%7Cslot:/TPE/B1/EE/E4/R2F/NA/WHT/N1|view:?fullScreen=true" width="100%" height="100%"></iframe>
+                       </div>`
+        return strHtml;
+    }
 
-        },"[name=forgeViewer]");
+    function show3DModel() {
+        launchViewer("dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwQVJDJUUzJTgwJTkxQjFGXzIwMjJfMTJfMDQubndj", (viewer, nodeIds) => {
+
+        });
     }
 </script>

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

@@ -4,5 +4,6 @@
     border-radius: 5px;
     box-shadow: 0px 0px 11px 3px rgb(0 0 0 / 20%);
     min-width:100px;
+    z-index:2001;
 }
 

Frontend/index.html

@@ -2035,7 +2035,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         var jwt = null;
         var loadingTip = '';
         var pageAct = {};  //記錄全頁面已選擇項目
-        pageAct.AreaTag = "TPE";
+        pageAct.AreaTag = "";
         if (location.href.indexOf("ord") != -1) {
             location.href = "/file/index.html"
         }
@@ -2114,6 +2114,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             function loadedJsPack() {
                 cookies = new YourTeam.Utility.Cookie();
                 jwt = cookies.get("JWT-Authorization");
+                pageAct.AreaTag = initAreaTag;
                 loadEvent();
 
                 if (!jwt) {
@@ -2246,6 +2247,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
                 })
 
+                onEvent("yt:tab:change", "#lightSch-tab", function () {
+                    debugger
+                    if (pageAct.sysMainTag == "LT" && $("#lightSchModal").length != 0) {
+                        loadLightSchTable();
+                        $("#lightSchModal").modal("show");
+                    }
+                })
+
                 $(window).on("timeout:3s", function () {
                     getSystemAlarmByBaja((data) => {
                         if (typeof getAlarmSub != "undefined" && getAlarmSub) {
@@ -2349,11 +2358,12 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             }
 
             // Card 呈現初始化
-            function initPopover() {
+            function initPopover(type = null) {
                 $("[name=devItem]").each((index, ele) => {
                     let devNum = $(ele).data("number"); //設備編號
                     let devGuid = $(ele).data("id"); //guid
                     let devName = $(ele).data("name"); //full_name
+                    let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
                     $(ele).YTTooltip({
                         html: `<div class="card m-1 border device-wrap">
 
@@ -2364,6 +2374,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                         </div>
                                                         <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
                                                             <button type="button" id="state-tab" class="btn btn-icon nav-link active" role="tab" data-tabname="cardTab" data-target="#state"><i class="fa fa-desktop icon"></i></button>
+                                                            ${lightHtml}
                                                             <button type="button" id="info-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#info"><i class="fa fa-cog icon"></i></button>
                                                             <button type="button" id="errRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#errRec"><i class="fas fa-exclamation-triangle"></i></button>
                                                             <button type="button" id="opeRec-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#opeRec"><i class="fa fa-bars icon"></i></button>
@@ -2371,12 +2382,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                         </div>
                                                     </div>
                                                     <div class="card-body p-2 tab-content">
-
                                                         <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child">
                                                             ${drawStateTabBlo(devNum)}
                                                         </div>
                                                         <div id="info" data-tabname="cardTab" data-tabrole="child">
-                                                            ${drawInfoTabBlo(devGuid)}
+                                                            
                                                         </div>
                                                         <div id="errRec" data-tabname="cardTab" data-tabrole="child">
                                                             ${drawErrRecTabBlo()}
@@ -2384,10 +2394,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                                         <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
                                                             ${drawOpeRecTabBlo()}
                                                         </div>
-
-
-                                                            </div>
-                                                        </div>`,
+                                                    </div>
+                                                </div>`,
                         group: "device",
                         onShow: function (tooltipEle, oriEle) {
                             var tab = new YT.Tab({ tabName: "cardTab" })
@@ -2395,7 +2403,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             //loadErrRecTable2($(oriEle).data("number"));
                             //loadErrRecTable();
                             loadErr($(oriEle).data("number"));
-                            subDeviceSetTable ? subDeviceSetTable($(oriEle).data("number")) : ""
+                            $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined"? drawInfoTabBlo(devGuid) : "");
+                            typeof subDeviceSetTable != "undefined "? subDeviceSetTable($(oriEle).data("number")) : ""
                         }
                     })
                 })
@@ -2440,6 +2449,67 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 let opeRecTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
             }
 
+            function loadLightSchTable(devGuid) {
+
+                /*let url = baseApiUrl + "/api/Device/GetOpeDevice?device_guid=" + devGuid;*/
+                let url = `https://63772efc5c47776512165937.mockapi.io/api/GetLightSche`;
+                let tag = "#lightSchTable";
+
+                let column_defs = [
+                    { "targets": [0], "width": "14%", "sortable": true },
+                    { "targets": [1], "width": "14%", "sortable": true },
+                    { "targets": [2], "width": "14%", "sortable": true },
+                    { "targets": [3], "width": "14%", "sortable": true },
+                    { "targets": [4], "width": "14%", "sortable": true },
+                    { "targets": [5], "width": "14%", "sortable": true },
+                    { "targets": [6], "width": "16%", "sortable": true },
+                ];
+
+                let columns = [
+                    {
+                        "title": "序號",
+                        "data": null,
+                        "render": function (data, type, row,meta) {
+                            return meta.row + 1;
+                        },
+                    },
+                    {
+                        "title": "排程名稱",
+                        "data": "sch_name",
+                    },
+                    {
+                        "title": "設備數量",
+                        "data": "dev_cnt",
+                    },
+                    {
+                        "title": "排程設定",
+                        "data": "sch_set",
+                    },
+                    {
+                        "title": "動作",
+                        "data": "action",
+                    },
+                    {
+                        "title": "狀態",
+                        "data": "status",
+                    },
+                    {
+                        "title": "功能",
+                        "data": "sch_id",
+                        "render": function (data, type, row) {
+                            let btnDiv = creDiv(["row", "m-0", "justify-content-center"], { "style": "gap:10px" });
+                            let icon = creI(["fas", "fa-pencil-alt"]);
+                            btnDiv.append(creBtnHtml("觸發執行", "lightSchTabTogBtn" + data, null, ["btn", "btn-success"]));
+                            btnDiv.append(creBtn("修改", "lightSchTabEdiBtn" + data, null, ["btn", "btn-danger"], { "toggle": "modal", "target": "#delModal" }).append(icon));
+                            return btnDiv.outerHtml();
+                        },
+                    },
+
+                ];
+
+                let lightSchTable = new YourTeam.JqDataTables.getTableByAjax(url, tag, null, columns, column_defs, null, null, null, null, null, null, "tpi");
+            }
+
             // Baja 取得異常紀錄
             function loadErr(allPath) {
                 if (allPath != undefined && allPath != null) {

Frontend/js/forge/forgemodel.js

@@ -104,7 +104,7 @@ function launchViewerNoTools(urn, callback) {
 
     Autodesk.Viewing.Initializer(options, () => {
         //viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('forgeViewer'));
-        viewer = new Autodesk.Viewing.Viewer3D($('forgeViewer')[0]);
+        viewer = new Autodesk.Viewing.Viewer3D($(selector)[0]);
         viewer.start();
         var documentId = 'urn:' + urn;
 

Frontend/js/site.js

@@ -176,6 +176,9 @@ function creImg(ele, text = null, id = null, name = null, cls = [], data = {}, a
     return $(`<${ele} ${comp.attrText}>${comp.text}`);
 }
 
+function creI(cls = [], data = {}, attr = {}, id = null, name = null, text = null) {
+    return creEle("i", text, id, name, cls, data, attr);
+}
 /**
  * 根據該棟建築底下的'所有'電梯執行緒物件
  * */