[Frontend] Forge 3D 顯示燈光程序調整 | 溫度條四種顏色程序調整 | [系統監控] 溫度條只有含有 Temp 的點位才會出現 | 計時器程序調整 | 顯示警告 toast |

Frontend/_dashboard.html

@@ -216,7 +216,7 @@
     var tarElePath = '';
     var sysSubList = [];
     var viewer3DNodeIds = [];
-    var timeOuters = [];
+    
     var eveDayElecChart = null;
     var eveWeekElecChart = null;
     var worOrdErrChart = null;
@@ -269,7 +269,7 @@
         show3DModel();
         getSubList();
         getFirstEletric();
-        timeOutGetData();
+        
     });
 
     function demoSubList() {

Frontend/_sysMonAll.html

@@ -48,7 +48,6 @@
                 setLightColor();
             }
             if (arr.indexOf(3) != -1) {
-                getLightPoint();
                 getHotspotPoint(() => {
                     show3DModel(data.urn_3D);
                 });
@@ -96,12 +95,12 @@
         }
         myBaja.setSubscribeDevicesByBql(ordPath);
         myBaja.setSubscribeDevicesCallBack(function (data) {
-            console.log(data)
+           
             let matchDevice = allDevList.filter(x => x.device_number == data.device_number_full)[0];
             if (!matchDevice) {
                 return false;
             }
-            console.log(data)
+           
             //將訂閱值塞入 subDeviceData
             if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                 let obj = {};
@@ -144,6 +143,10 @@
 
         myBaja.setSubscribeDeviceEndCallBack(function (data) {
             endPageLoading();
+            if (data.findIndex(x => x.point_name == "Temp") != -1) {
+                // 顯示溫度條
+                showHeat("[name=forgeHeatBar]");
+            }
         });
 
     }
@@ -267,7 +270,7 @@
                                                     <span class="d-inline-block mr-3">
                                                         <img src="${baseImgUrl + varPathDevIcon + devObj.device_image}" class="profile-image rounded-circle" onerror="defDev(this)" alt="...">
                                                     </span>
-                                                    <a href="javascript:;">${devObj.full_name}</a>
+                                                    <a name="devItemName" data-number="${devObj.device_number}" href="javascript:;">${devObj.full_name}</a>
                                                 </div>
                                             </div>
                                         <div class="d-flex mb-0 mt-2 align-items-center">
@@ -282,13 +285,28 @@
                 })
                 // Niagara 產生 file 開頭字串問題
                 strHtml = strHtml.replaceAll(`src="/file/`, `src="`);
+
                 if (!res.data || res.data.length == 0) {
                     endPageLoading();
                 } else {
+                    // 訂閱 baja 設備
                     subDevice();
                 }
+
+                // 繪製 html
                 $("#floDevList").append(strHtml);
+
+                // 存入 device 基本資料至元素 data 屬性
+                $("#floDevList a[name=devItem]").each((idx, ele) => {
+                    if (allDevList.findIndex(x => x.device_number == $(ele).data("number")) != -1) {
+                        $(ele).data("devobj", allDevList.filter(x => x.device_number == $(ele).data("number"))[0]);
+                    }
+                })
+
+                // 初始化 pop 視窗
                 initPopover();
+                // 卡片設備名稱點擊事件
+                devItemNameEvent();
             }
         }, null, "POST").send();
     }
@@ -349,9 +367,10 @@
 
     function show3DModel(urn) {
         $(loadEle).Loading("start");
-        //getLightData(allDevList);
+        if (pageAct.sysMainTag == "LT") { 
+            setLightPoint(allDevList);
+        }
         launchViewerForHotspot(urn, (viewer, nodeIds) => {
-            showHeat("[name=forgeHeatBar]");
             let devDbIds = allDevList.map(x => x.forge_dbid);
             /*hideAllObjects(devDbIds);*/
             
@@ -454,8 +473,7 @@
                     $.extend(item, data);
                     myDataList.push(item);
                 })
-
+               
-                console.log("1", myDataList)
                 setHotspotPoint(myDataList);
                 callback ? callback() : "";
             }
@@ -463,45 +481,12 @@
 
     }
 
-    async function getLightPoint(callback = null) {
-        let url = baseApiUrl + "/api/GetDevNodeForCor";
-        let sendData = {
-            "device_area_tag": pageAct.AreaTag,
-            "device_building_tag": pageAct.buiTag,
-            "device_system_tag": pageAct.sysMainTag,
-            "device_name_tag": pageAct.sysSubTag,
-        };
-        objSendData.Data = sendData;
-        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-            if (!res || res.code != "0000" || !res.data) {
-
-            } else {
-
-                let myDataList = [];
-                $.each(res.data, (idx, data) => {
-                    let item = {};
-                    item.position = {};
-                    if (data.device_node_coordinate_3d != null && isJSON(data.device_node_coordinate_3d)) {
-                        item.position = JSON.parse(data.device_node_coordinate_3d);
-                    }
-                    $.extend(item, data);
-                    myDataList.push(item);
-                })
-
-                console.log("2", myDataList)
-                setLightPoint(myDataList);
-                callback ? callback() : "";
-            }
-        }, null, "POST").send();
-
-    }
-
     function setHotspotPoint(myDataList = []) {
         console.log(myDataList)
         getHopspotPoint(myDataList);
     }
 
-    async function setLightPoint(myDataList = []) {
+    function setLightPoint(myDataList = []) {
         console.log(myDataList)
         getLightData(myDataList);
     }

Frontend/css/site.css

@@ -93,6 +93,9 @@ input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
 .device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
 .scrolledTable { overflow-y: auto; clear: both; max-height:100%;}
 
+#toast-container > div {
+    width:330px !important;
+}
 /*a[data-tabname="topFunBtn"] { color: #fff }
 
 a[data-tabname="topFunBtn"].active { color: #886ab5 }
@@ -103,7 +106,7 @@ a[data-tabname="topFunBtn"]:hover { color: var(--theme-primary-50); }
 }
 .userblock:hover { color: var(--theme-primary-50); }
 .dropdown.show .userblock { color: var(--theme-primary-50) !important; }*/
-.page-header a {color:#fff !important;}
+.page-header a { color: #fff !important; }
 .page-header a:hover { color: var(--theme-primary-50) !important; }
 .page-header a.active { color: var(--theme-primary-500) !important; }
 .dropdown.show a { color: var(--theme-primary-50) !important; }

Frontend/index.html

@@ -725,6 +725,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         var jwt = null;
         var loadingTip = '';
         var pageAct = {};  //記錄全頁面已選擇項目
+        var timeOuters = [];
         pageAct.AreaTag = "";
         if (location.href.indexOf("ord") != -1) {
             location.href = "/file/index.html"
@@ -837,6 +838,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 getBuiList();
                 getSysMonBtnList();
                 checkDevState();
+                
 
                 if (lastPage) {
                     let lastPageAct = {};
@@ -855,6 +857,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     $("#app").load("_dashboard.html", loadCallback);
                 }
 
+                timeOutGetData();
 
                 function getBuiList() {
                     let url = baseApiUrl + "/api/Device/GetBuild";
@@ -935,7 +938,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     endPageLoading();
                     $(".yt-alert").YTAlert().hide();
 
-                    if (typeof timeOuters != "undefined") {
+                    if (typeof timeOuters != "undefined" && timeOuters) {
                         $.each(timeOuters, (idx, timeOut) => {
                             clearInterval(timeOut);
                         })
@@ -989,6 +992,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 })
 
                 $(window).on("timeout:3s", function () {
+                    debugger
                     getSystemAlarmByBaja((data) => {
                         if (typeof getAlarmSub != "undefined" && getAlarmSub) {
                             getAlarmSub(data);
@@ -996,6 +1000,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         alarmIconBlink();
 
                     })
+                    showWarToast();
                 })
 
             }
@@ -1103,52 +1108,60 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     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>` : "";
                     let option = {
                         html: `<div class="card m-1 border device-wrap">
+                                    <div class="card-header p-3">
 
-                                                                <div class="card-header p-3">
+                                        <div class="position-absolute w-50" 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" 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>
+                                            <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
+                                        </div>
+                                    </div>
+                                    <div class="card-body p-2 tab-content">
+                                        <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
+                                            ${drawStateTabBlo(devNum)}
+                                        </div>
+                                        <div id="info" data-tabname="cardTab" data-tabrole="child">
 
-                                                                    <div class="position-absolute w-50" style="word-break: break-all;">
+                                        </div>
-                                                                        <label class="m-0 mt-2">${devName}</label>
+                                        <div id="errRec" data-tabname="cardTab" data-tabrole="child">
-                                                                    </div>
+                                            ${drawErrRecTabBlo()}
-                                                                    <div id="card-tab" class="row justify-content-end nav nav-tabs" role="tablist">
+                                        </div>
-                                                                        <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>
+                                        <div id="opeRec" data-tabname="cardTab" data-tabrole="child">
-                                                                        ${lightHtml}
+                                            ${drawOpeRecTabBlo()}
-                                                                        <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>
+                                        </div>
-                                                                        <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>
+                                    </div>
-                                                                        <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>`,
-                                                                        <button class="btn p-2"><i class="fas fa-times fs-1 text-white-50" data-close="yttooltip"></i></button>
-                                                                    </div>
-                                                                </div>
-                                                                <div class="card-body p-2 tab-content">
-                                                                    <div id="state" class="show active" data-tabname="cardTab" data-tabrole="child" style="height:100%;width:100%">
-                                                                        ${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",
                         onShow: function (tooltipEle, oriEle) {
-                            var tab = new YT.Tab({ tabName: "cardTab" })
+                            // 執行 pop 視窗上方 Tab 類別
+                            new YT.Tab({ tabName: "cardTab" })
+                            let devObj = $(oriEle).data("devobj");
+                            // 讀取運維列表
                             loadOpeRecTable(devGuid);
-                            
+                            // 讀取異常列表
                             loadErr($(oriEle).data("number"));
+                            // 讀取設備基本資料列表
                             $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
+                            // 聚焦熱點
                             if ($(oriEle).data("dbId")) {
                                 controlFocusHotspot($(oriEle).data("dbId"));
                             }
+                            // 3D 視角 ZOOM IN 聚焦
+                            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");
@@ -1167,9 +1180,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                                 minWidth: 200,
                                 minHeight:150,
                             });
+                            // 電梯管理 - Card table 更新
                             typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
                         },
                         onHide: function (tooltipEle, oriEle) {
+                            // 3D 熱點解除
                             controlFocusHotspot($(oriEle).data("dbId"), false);
                             // sysMonFloor Echart 解除 focus
                             typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
@@ -1182,6 +1197,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 })
             }
 
+            // 卡片設備名稱點擊事件
+            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) {
@@ -1433,6 +1457,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         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");
@@ -1531,7 +1556,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             };
             objSendData.Data = sendData;
             ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
-                console.log(res);
                 if (!res || res.code != "0000" || !res.data) {
 
                 } else {
@@ -1576,6 +1600,56 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                 }
             }, null, "POST").send();
         }
+
+        function showWarToast() {
+            let options = {
+                "closeButton": false,
+                "debug": false,
+                "newestOnTop": true,
+                "progressBar": false,
+                "positionClass": "toast-top-right",
+                "preventDuplicates": false,
+                "onclick": null,
+                "showDuration": "300",
+                "hideDuration": "1000",
+                "timeOut": 0,
+                "extendedTimeOut": 0,
+                "showEasing": "swing",
+                "hideEasing": "linear",
+                "showMethod": "fadeIn",
+                "hideMethod": "fadeOut",
+                "tapToDismiss": false
+            }
+
+            if ($("#toast-container .toast").length < 2) { 
+                let strConHtml = `<div class="col-12">
+                                        <div class="row m-0">
+                                            <span class="m-0">異常編號：<span>001</span></span>
+                                        </div>
+                                        <div class="row m-0">
+                                            <span class="m-0">異常等級：<span>2</span></span>
+                                        </div>
+                                        <div class="row m-0">
+                                            <span class="m-0">異常類別：<span>S01</span></span>
+                                        </div>
+                                        <div class="row m-0">
+                                            <span class="m-0">設備名稱：<span>電表01</span></span>
+                                        </div>
+                                        <div class="row m-0">
+                                            <span class="m-0">異常訊息：<span>壞掉</span></span>
+                                        </div>
+
+                                </div>`;
+                let titleHtml = `<div class="col-12">
+                                        <div class="row m-0">
+                                            <span class="fs-1">異常通知</span>
+                                            <span class="ml-auto">2023/01/01 12:00:00</span>
+                                        </div>
+                                    </div>`
+                toastr.warning(strConHtml, titleHtml, options)
+            }
+            
+        }
     </script>
 
 </body>

Frontend/js/forge/forgemodel.js

@@ -596,7 +596,7 @@ class ADHeatMaps {
         await dataVizExtn.setupSurfaceShading(this.model, heatmapData);
 
         // 對 "temperature" 的溫度設定兩種顏色：紅色和藍色
-        dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0xff0000]);
+        dataVizExtn.registerSurfaceShadingColors("temperature", [0x0000ff, 0x00ff00, 0xffff00, 0xff0000]);
 
         this.dataVizExtn = dataVizExtn;
 
@@ -622,9 +622,9 @@ class ADHeatMaps {
                 dev.temp = temp;
             }
         })
-       
+        $.each(this.roomDbIds, (idx, rDbid) => {
-        this.dataVizExtn.updateSurfaceShading(this.getSensorValue.bind(this));
+            this.dataVizExtn.renderSurfaceShading("RoomPanel" + rDbid, "temperature", this.getSensorValue.bind(this));
-
+        })
         //if (rDbid != null) {
         //    // 取得新的溫度值
         //    let getSensorValue = (device, sensorType) => {
@@ -720,13 +720,16 @@ function hideColor(nodeId) {//顏色改成透明
 
 //紀錄燈具座標
 async function getLightData(data) {
+    lightList = [];
     lightDataList = data;
 }
 
 async function testNewLight(dataList) {
     dataList.forEach((myData, index) => {
-        const position = JSON.parse(myData.device_node_coordinate_3d);
+        const position = JSON.parse(myData.device_coordinate_3d);
-        lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10) });
+        if (lightList.findIndex(x => x.device_guid == myData.device_guid) == -1) { 
+            lightList.push({ dbid: myData.forge_dbid, device_guid: myData.device_guid, lightObject: new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10) });
+        }
 
         lightList[index].lightObject.position.set(position.x, position.y, position.z);
         lightList[index].lightObject.castShadow = true;
@@ -928,8 +931,8 @@ async function loadHeatmaps(model) {
 
     // Setup surface shading
     await dataVizExtn.setupSurfaceShading(model, heatmapData);
-    const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];//0 ~ 1 藍綠黃紅
+
-    dataVizExtn.registerSurfaceShadingColors("temperature", sensorColors);
+    dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
 
     function getSensorValue(device, sensorType) {
         return sensorVals[parseInt(device.id.slice(-1)) - 1];
@@ -1170,10 +1173,10 @@ function createHeatmapRect(labels, colorStops, selector) {
     }
     const context = $(selector)[0].getContext('2d');
     let i, len;
-    context.clearRect(0, 0, 300, 50);
+    context.clearRect(0, 0, 200, 50);
     context.fillStyle = 'back';//white
     for (i = 0, len = labels.length; i < len; i++) {
-        let x = 10 + 280 * i / (len - 1);
+        let x = 10 + 180 * i / (len - 1);
         if (i === len - 1) {
             x -= context.measureText(labels[i]).width;
         }
@@ -1182,12 +1185,12 @@ function createHeatmapRect(labels, colorStops, selector) {
         }
         context.fillText(labels[i], x, 10);
     }
-    const gradient = context.createLinearGradient(0, 0, 300, 0);
+    const gradient = context.createLinearGradient(0, 0, 200, 0);
     for (i = 0, len = colorStops.length; i < len; i++) {
         gradient.addColorStop(i / (len - 1), colorStops[i]);
     }
     context.fillStyle = gradient;
-    context.fillRect(10, 20, 280, 20);
+    context.fillRect(10, 20, 200, 25);
 }
 
 //======================== 外部呼叫function ===========================

Frontend/js/site.js

@@ -407,6 +407,12 @@ function strToDate(text, type = null, cal = 0, unit = "d") {
     return result;
 }
 
+// 將只有時間(Hms) 格式轉換為當日的時間
+function fullTime(time) {
+    let nowDate = displayDate(new Date(), "date");
+    return new Date(nowDate + " " + time);
+}
+
 function dateRanCutPart(start, end, cutNum) {
     let sTime = (new Date(start)).getTime();
     let eTime = (new Date(end)).getTime();