[Frontend] [系統監控] 熱點顯示 popover | [全域功能] YT-Tooltip 根據絕對座標顯示 popover 程序建置 | [儀表板] demo用系統小類Card程序建置

Frontend/_dashboard.html

@@ -253,7 +253,7 @@
     var errRecChart = null;
     var errChkChart = null;
     var loadedCnt = 0;
-    var chartDataCnt = { alarmCnt:0, recCnt:0, chkedErrCnt:0, unChkedErrCnt:0 };
+    var chartDataCnt = { alarmCnt: 0, recCnt: 0, chkedErrCnt: 0, unChkedErrCnt: 0 };
 
     var sysIconList = [
         { mainSys: "EE", subSys: "E1", iconClass: "fal fa-grip-vertical" },
@@ -264,6 +264,25 @@
         { mainSys: "ME", subSys: "M10", iconClass: "fal fa-wind" },
         { mainSys: "ME", subSys: "M12", iconClass: "fal fa-snowflake" },
         { mainSys: "ELEV", subSys: "EL", iconClass: "fal fa-door-open" },
+        { mainSys: "FE", subSys: "F1", iconClass: "fal fa-fire-extinguisher" },
+        { mainSys: "FE", subSys: "F2", iconClass: "fal fa-smog" },
+        { mainSys: "WP", subSys: "W1", iconClass: "fal fa-stopwatch" },
+        { mainSys: "S", subSys: "R", iconClass: "fal fa-user-shield" },
+    ];
+
+    var tempSysSubText = [
+        { text: "高壓配電盤" ,mainSys: "EE", subSys: "E1", },
+        { text: "低壓配電盤" ,mainSys: "EE", subSys: "E2", },
+        { text: "緊急發電機" ,mainSys: "EE", subSys: "E3", },
+        { text: "電錶系統" ,mainSys: "EE", subSys: "E4", },
+        { text: "二線式照明系統" ,mainSys: "LT", subSys: "L1", },
+        { text: "小型送風機" ,mainSys: "ME", subSys: "M10", },
+        { text: "環境感測設備" ,mainSys: "ME", subSys: "M12", },
+        { text: "電梯設備" ,mainSys: "ELEV", subSys: "EL", },
+        { text: "消防設備" ,mainSys: "FE", subSys: "F1", },
+        { text: "排煙系統" ,mainSys: "FE", subSys: "F2", },
+        { text: "電子水錶" ,mainSys: "WP", subSys: "W1", },
+        { text: "門禁安全系統" ,mainSys: "S", subSys: "R", }
     ];
 
     $(document).ready(function () {
@@ -275,6 +294,21 @@
         timeOutGetData();
     });
 
+    function demoSubList() {
+        let isExiNames = $("#sysSubBtnList .dev-group button[id^=sysSubCardBtn]").toArray().map(x => $(x).text());
+        let strHtml = ``;
+        $.each(tempSysSubText, (idx, obj) => {
+            if (isExiNames.indexOf(obj.text) == -1) {
+                let iconObj = sysIconList.filter(x => x.mainSys == obj.mainSys && x.subSys == obj.subSys)[0];
+                strHtml += `<div class="btn-group btn-group-lg col-lg-3 mb-4 dev-group">
+                            <button name="topFunBtn" data-page="alert" type="button" class="btn btn-secondary col-4"><i class="${iconObj.iconClass || "fal fa-hdd"} fa-2x py-2"></i></button>
+                            <button id="sysSubCardBtn${obj.subSys}" type="button" class="btn btn-secondary" data-id="${obj.subSys}">${obj.text}</button>
+                        </div>`;
+            }
+        })
+        $("#sysSubBtnList").append(strHtml);
+    }
+
     //取得 左下方 各系統小類
     function getSubList() {
         let url = baseApiUrl + "/api/Device/GetMainSub";
@@ -301,6 +335,7 @@
                     })
                 })
                 $("#sysSubBtnList").html(strHtml);
+                demoSubList();
 
             }
         }, null, "POST").send();
@@ -431,7 +466,7 @@
             labels: todayData?.data.map(x => x.timestamp.$time.$hour),
             datasets: [
                 {
-                    id:"today",
+                    id: "today",
                     type: "bar",
                     label: '今日用電量',
                     fill: false,
@@ -476,7 +511,7 @@
                 yAxes: [{
 
                     ticks: {
-                        min:0,
+                        min: 0,
                         beginAtZero: true
                     },
                 }]
@@ -602,7 +637,7 @@
     }
 
     // 圖表 - 異常與賦歸圖表 (圓餅圖)
-    function chartErrRec(labels,datas) {
+    function chartErrRec(labels, datas) {
 
         let errRecChartCanvas = ctx = $('#errRecChart').get(0).getContext('2d');
 

Frontend/_sysMonAll.html

@@ -273,7 +273,19 @@
             if (!res || res.code != "0000" || !res.data) {
 
             } else {
-                let myDataList = res.data?.filter(x => x.device_coordinate_3d != null && isJSON(x.device_coordinate_3d)).map(x => { return { position: JSON.parse(x.device_coordinate_3d) } });
+                debugger
+                let myDataList = [];
+                $.each(res.data, (idx, data) => {
+                    let item = {};
+                    item.position = {};
+                    if (item.device_coordinate_3d != null && isJSON(item.device_coordinate_3d)) { 
+                        item.position = JSON.parse(x.device_coordinate_3d);
+                    }
+                    $.extend(item, data);
+                    myDataList.push(item);
+                })
+
+                console.log("1", myDataList)
                 setHotspotPoint(myDataList);
                 callback ? callback() : "";
             }
@@ -286,8 +298,16 @@
         getHopspotPoint(myDataList);
     }
 
-    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
+    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj,dbObj) {
-        console.log(e, obj)
+        let position = {};
+        position.tpLeft = obj.target.toolController.lastClickX;
+        position.tpTop = obj.target.toolController.lastClickY;
+        position.tpOffHeight = 24;
+        console.log(position)
+        console.log(obj)
+        console.log(dbObj)
+        initPopover(pageAct.sysMainTag == "LT" ? "light" : null, position, "[name=forgeViewer]");
+       
     })
 
 </script>

Frontend/index.html

@@ -1978,6 +1978,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             </div>
         </div>
     </div>
+
+    <!--<button id="testsysbtn" class="btn btn-info col-1">系統監控(測試用)</button>-->
     <!-- END Messenger -->
     <!-- BEGIN Page Settings -->
     <!-- END Page Settings -->
@@ -2254,6 +2256,10 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     }
                 })
                 
+                onEvent("click", "#testsysbtn", function () {
+                    
+                })
+
                 $(window).on("timeout:3s", function () {
                     getSystemAlarmByBaja((data) => {
                         if (typeof getAlarmSub != "undefined" && getAlarmSub) {
@@ -2357,13 +2363,13 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             }
 
             // Card 呈現初始化
-            function initPopover(type = null) {
+            function initPopover(type = null, extOption = {},selector = "[name=devItem]") {
-                $("[name=devItem]").each((index, ele) => {
+                $(selector).each((index, ele) => {
                     let devNum = $(ele).data("number"); //設備編號
                     let devGuid = $(ele).data("id"); //guid
                     let devName = $(ele).data("name"); //full_name
                     let lightHtml = type == "light" ? `<button type="button" id="lightSch-tab" class="btn btn-icon nav-link" role="tab" data-tabname="cardTab" data-target="#lightSch"><i class="fas fa-calendar-alt"></i></button>` : "";
-                    $(ele).YTTooltip({
+                    let option = {
                         html: `<div class="card m-1 border device-wrap">
 
                                                     <div class="card-header p-3">
@@ -2402,10 +2408,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             //loadErrRecTable2($(oriEle).data("number"));
                             //loadErrRecTable();
                             loadErr($(oriEle).data("number"));
-                            $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined"? drawInfoTabBlo(devGuid) : "");
+                            $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
-                            typeof subDeviceSetTable != "undefined "? subDeviceSetTable($(oriEle).data("number")) : ""
+                            typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
                         }
-                    })
+                    };
+
+                    $.extend(option, extOption);
+
+                    $(ele).YTTooltip(option);
                 })
             }
 

Frontend/js/forge/forgemodel.js

@@ -640,7 +640,7 @@ async function addHotPoint(data) {
         const dbId = 10 + index;
         const myPosition = myData.position;
         const viewable = new DataVizCore.SpriteViewable(myPosition, style, dbId);
-
+        myData._dbId = dbId;
         viewableData.addViewable(viewable);
     });
 
@@ -653,7 +653,8 @@ async function addHotPoint(data) {
             if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
                 console.log(`Sprite clicked: ${event.dbId}`);
                 openHotspotModal();
-                $(selector).trigger("autodesk:click:sprite", event);
+                let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
+                $(selector).trigger("autodesk:click:sprite", event, myData);
             }
 
             if (event.clickInfo != null) {

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

@@ -31,6 +31,12 @@ $.fn.YTTooltip = function (option) {
             hideTooltipEvent: hideTooltipEvent,
             onShow: option.onShow || null,
             group: option.group || null,
+            targetPosition: {
+                left: option.tpLeft || null,
+                top: option.tpTop || null,
+                offsetWidth: option.tpOffWidth || null,
+                offsetHeight: option.tpOffHeight || null,
+            }
         };
 
         if (obj.toggle == "hover") {
@@ -49,10 +55,21 @@ $.fn.YTTooltip = function (option) {
                 let bodyHeight = $("body")[0].offsetHeight;
                 //計算引用元素 offset
                 let offset = $(this).offset();
+                if (obj.targetPosition.left != null) {
+                    offset.left = obj.targetPosition.left;
+                }
+                if (obj.targetPosition.top != null) {
+                    offset.top = obj.targetPosition.top;
+                }
                 //引用元素 高寬
                 let width = $(this)[0].offsetWidth;
+                if (obj.targetPosition.offsetWidth != null) {
+                    width = obj.targetPosition.offsetWidth;
+                }
                 let height = $(this)[0].offsetHeight;
-
+                if (obj.targetPosition.offsetHeight != null) {
+                    height = obj.targetPosition.offsetHeight;
+                }
                 $(this).data("yttooltipid", ranId);
                 $(clone).attr("id", "yt_tooltip_" + ranId);
                 if (obj.group) {
@@ -85,15 +102,17 @@ $.fn.YTTooltip = function (option) {
                 } else if (obj.direction == "right") {
                     left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left + width + 10;
                 } else if (obj.direction == "bottom") {
+                    left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left;
                     top = offset.top + toolHeight + height > bodyHeight ? offset.top + height + 10 : offset.top + height + 10;
                 } else if (obj.direction == "top") {
+                    left = offset.left + toolWidth + width > bodyWidth ? offset.left - toolWidth - 10 : offset.left;
                     top = offset.top < toolHeight ? offset.top + height + 5 : offset.top - toolHeight - 10;
                 }
 
                 if (obj.direction == "left" || obj.direction == "right") {
                     $(clone).css({ left: left, top: offset.top });
                 } else if (obj.direction == "top" || obj.direction == "bottom"){
-                    $(clone).css({ left: offset.left, top: top});
+                    $(clone).css({ left: left, top: top});
                 }
                 setTimeout(function () { 
                     obj.onShow ? obj.onShow(clone, obj.ele, obj) : "";