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

2022-12-28 13:12:08 +08:00 · 2022-12-28 13:12:08 +08:00 · 3f9aca1e4e
commit 3f9aca1e4e
parent 71c2240e68
5 changed files with 135 additions and 50 deletions
--- a/Frontend/_dashboard.html
+++ b/Frontend/_dashboard.html
@ -3,7 +3,7 @@
        <div class="col-sm-12 col-xl-4 poisition-relative">
            <!-- <img src="img/clouds.png" class="img-fluid" style="min-height: 520px;"> -->

-                <div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>
+            <div id="forgeViewer" class="position-absolute" style="width:96%;height:96%;"></div>

        </div>
        <div class="col-sm-12 col-xl-4">
@ -183,7 +183,7 @@
                                    </div>
                                </div>-->
                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
-                                   <canvas class="chart" id="errRecChart"></canvas>
+                                    <canvas class="chart" id="errRecChart"></canvas>
                                </div>
                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
                                    <canvas class="chart" id="errChkChart"></canvas>
@ -202,16 +202,16 @@
                        <div class="panel-container show">
                            <div class="panel-content poisition-relative p-0">
                                <!--<div class="pb-5 pt-3">
-        <div class="d-flex mr-0">
-            <div class="mr-2">
-                <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#2196F3&quot;, &quot;#9acffa&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">3/10</span>
-            </div>
-            <div>
-                <label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
-                <h4 class="font-weight-bold mb-0">14,134</h4>
-            </div>
-        </div>
-    </div>-->
+                                    <div class="d-flex mr-0">
+                                        <div class="mr-2">
+                                            <span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#2196F3&quot;, &quot;#9acffa&quot;],  &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">3/10</span>
+                                        </div>
+                                        <div>
+                                            <label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
+                                            <h4 class="font-weight-bold mb-0">14,134</h4>
+                                        </div>
+                                    </div>
+                                </div>-->
                                <div class="col-12 mb-2 position-relative row m-0 justify-content-center">
                                    <span class="text-center position-absolute t-white" style="top:25%;left:27%;">已完成<br>6</span>
                                    <img src="img/u40.png" class="" style="width:75%;margin-left:0px;left:-22px;">
@ -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');

--- a/Frontend/_sysMonAll.html
+++ b/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) {
-        console.log(e, obj)
+    onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj,dbObj) {
+        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>
--- a/Frontend/index.html
+++ b/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) {
-                $("[name=devItem]").each((index, ele) => {
+            function initPopover(type = null, extOption = {},selector = "[name=devItem]") {
+                $(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) : "");
-                            typeof subDeviceSetTable != "undefined "? subDeviceSetTable($(oriEle).data("number")) : ""
+                            $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
+                            typeof subDeviceSetTable != "undefined " ? subDeviceSetTable($(oriEle).data("number")) : ""
                        }
-                    })
+                    };
+
+                    $.extend(option, extOption);
+
+                    $(ele).YTTooltip(option);
                })
            }

--- a/Frontend/js/forge/forgemodel.js
+++ b/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) {
--- a/Frontend/js/yourteam/plugins/yt-tooltip/yt-tooltip.js
+++ b/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) : "";