[前台] 分頁樣式復原 | 異常原點點擊狀態處理 | 告警系統其他類文字修正 | 能源管理 文字修正

Frontend/_alert.html

@@ -6,25 +6,17 @@
 				<div class="col-auto">
 					<div class="btn-group">
 						<button id="returnFalse" onclick="setReturn(false)" type="button"
-								class="btn btn-secondary waves-effect waves-themed">
+							class="btn btn-secondary waves-effect waves-themed">未復歸</button>
-							未復歸
-						</button>
 						<button id="returnTrue" onclick="setReturn(true)" type="button"
-								class="btn btn-secondary waves-effect waves-themed">
+							class="btn btn-secondary waves-effect waves-themed">已復歸</button>
-							已復歸
-						</button>
 					</div>
 				</div>
 				<div class="col-auto">
 					<div class="btn-group">
 						<button id="unconfirmed" onclick="setConfirm(false)" type="button"
-								class="btn btn-secondary waves-effect waves-themed">
+							class="btn btn-secondary waves-effect waves-themed">未確認</button>
-							未確認
-						</button>
 						<button id="confirmed" onclick="setConfirm(true)" type="button"
-								class="btn btn-secondary waves-effect waves-themed">
+							class="btn btn-secondary waves-effect waves-themed">已確認</button>
-							已確認
-						</button>
 					</div>
 				</div>
 				<div class="col-auto">

Frontend/_dashboard.html

@@ -43,7 +43,8 @@
                         </div>
                         <div class="panel-container show">
                             <div class="panel-content poisition-relative">
-                                <div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
+                                <div
+                                    class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
                                     <!--<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
                                         <div class="text-right fw-500 l-h-n d-flex flex-column">
                                             <div class="h3 m-0 d-flex align-items-center justify-content-end">
@@ -863,24 +864,26 @@
         $.each(data.data, (idx, alaObj) => {
             if (alaObj.alarmClass.indexOf("_") != -1) {
                 let mainSubSys = alaObj.alarmClass.split("_").slice(0, 2).join("/");
-                const img = $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0]?.src.split('.')
+                const img = $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0]?.src.split('.');
-                const { length } = img
+                if (img?.length) {
-                img[length - 1] = 'gif'
+                    img[length - 1] = 'gif';
                     $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`)[0].src = img.join('.')
                     $(`.btn-group.dev-group[data-id*='${mainSubSys}'] img`).addClass("blink");
                 }
+            }
         })
         $(`.dev-group img.blink`).each((idx, ele) => {
             let devPath = $(ele).parents(".dev-group").data("id");
             let sysPath = devPath.split("/").slice(3, 5).join("/");
             let alaDevPath = data.data.map(x => x.alarmClass?.split("_").slice(0, 2).join("/"));
             if (alaDevPath.indexOf(sysPath) == -1) {
-                const img = $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0]?.src.split('.')
+                const img = $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0]?.src.split('.');
-                const { length } = img
+                if (img?.length) {
-                img[length - 1] = 'png'
+                    img[length - 1] = 'png';
                     $(`.btn-group.dev-group[data-id*='${sysPath}'] img`)[0].src = img.join('.')
                     $(ele).removeClass("blink");
                 }
+            }
         })
     }
 

Frontend/_energyManagement.html

@@ -1,5 +1,5 @@
 <main id="js-page-content" role="main" class="page-content">
-    <h1 class="p-2 mb-0">運維管理</h1>
+  <h1 class="p-2 mb-0">能源管理</h1>
   <div class="row">
     <div class="col-12">
       <div class="btn-group mb-3">
@@ -814,9 +814,8 @@
                 if (!chart.data) return [];
                 return chart.data.datasets.map(
                   (dataset, index) => ({
-
                     datasetIndex: index,
-                                        text: `${dataset.label} ${dataset.data[0]} KW`,
+                    text: dataset.label !== "即時功率"?`${dataset.label} ${dataset.data[0]} KW`: `${dataset.label} KW`,
                     fontColor: color.fusion._100,
                     lineDash: dataset.borderDash ? [5, 5] : [],
                     lineWidth: 5,

Frontend/_sysElevator.html

@@ -1,61 +1,25 @@
 <style>
-    .elevator {
+    .elevator { background-color: #fff; min-height: 520px; }
-        background-color: #fff;
-        min-height: 520px;
-    }
 
-    .elevator-table-wrapper {
+    .elevator-table-wrapper { padding: 0.8rem; }
-        padding: 0.8rem;
-    }
 
-    table.elevator-build { /*border: 1px double #000;*/
+    table.elevator-build { /*border: 1px double #000;*/ }
-    }
 
-        table.elevator-build td {
+    table.elevator-build td { padding: 0.2rem 0.5rem; height: 50px; width: 45px; border: 1px solid #000; }
-            padding: 0.2rem 0.5rem;
-            height: 50px;
-            width: 45px;
-            border: 1px solid #000;
-        }
 
-    elevator .elevator-body, elevator .elevator-header {
+    elevator .elevator-body, elevator .elevator-header { padding: 0.7rem; }
-        padding: 0.7rem;
-    }
 
-    .elevator-item {
+    .elevator-item { position: absolute; width: 43px; height: 47px; border: 4px solid orange; }
-        position: absolute;
-        width: 43px;
-        height: 47px;
-        border: 4px solid orange;
-    }
 
-    .elevator-item-toup {
+    .elevator-item-toup { border: 4px solid rgba(255,255,255,0); position: absolute; border-bottom: 0; z-index: 2; }
-        border: 4px solid rgba(255,255,255,0);
-        position: absolute;
-        border-bottom: 0;
-        z-index: 2;
-    }
 
-    .elevator-item-todown {
+    .elevator-item-todown { border: 4px solid rgba(255,255,255,0); position: absolute; border-top: 0; z-index: 2; }
-        border: 4px solid rgba(255,255,255,0);
-        position: absolute;
-        border-top: 0;
-        z-index: 2;
-    }
 
-    .table-compact td {
+    .table-compact td { padding: 0.2rem 0.3rem; }
-        padding: 0.2rem 0.3rem;
-    }
 
-    #emerTurn tr td:nth-child(2) {
+    #emerTurn tr td:nth-child(2) { width: 50%; text-align: center; justify-content: center; }
-        width: 50%;
-        text-align: center;
-        justify-content: center;
-    }
 
-    #emerTurn tr td:nth-child(1) {
+    #emerTurn tr td:nth-child(1) { width: 35%; }
-        width: 35%;
-    }
 </style>
 
 <div class="d-flex">
@@ -1014,7 +978,7 @@
         }
         //現在樓層
         if (data.point_name == "CP") {            
-            //console.log("電梯樓層", matchDevice.device_number, data.value)
+            console.log("電梯樓層", matchDevice.device_number, data.value)
             $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value);
         }
 

Frontend/_sysMonAll.html

@@ -39,6 +39,7 @@
 
 <script>
   var allDevList = [];  //全設備清單
+  var alarmDbIdList = []; // 紀錄異常 forge 圓點，避免點擊與異常顏色衝突
   var subDeviceData = [];
   var heatMap = null;
   var buildMenuData = {};
@@ -248,8 +249,15 @@
   // forge 3D 異常點位變紅色
   function setForgeHotSpotColor(device) {
     let subData = subDeviceData.filter(x => x.device_number == device.device_number)[0]
-        if (subData && subData[device.device_error_point_name] == device.device_error_point_value && !isNaN(parseInt(device.spriteDbid))) {
+    if (subData && subData[device.device_error_point_name] == device.device_error_point_value && (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))) {
-            changeColorForHotspot(parseInt(device.spriteDbid), "error");
+      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId)
+      alarmDbIdList = [...alarmDbIdList, _dbId]
+      // console.log("異常", _dbId)
+      changeColorForHotspot(_dbId, "error");
+    } else if (subData[device.device_error_point_name] !== device.device_error_point_value && (!isNaN(parseInt(device.spriteDbid)) || !isNaN(parseInt(device._dbId)))) {
+      const _dbId = parseInt(device.spriteDbid) || parseInt(device._dbId)
+      let index = alarmDbIdList.findIndex(dbId => dbId == _dbId);
+      index !== -1 && alarmDbIdList.splice(index, 1)
     }
   }
 
@@ -389,15 +397,15 @@
   function show3DModel(urn) {
     $(loadEle).Loading("start");
     launchViewerForHotspot(urn, (viewer, nodeIds) => {
-
+      // 隱藏 toolbar
-            addHotPoint(viewer)
+      document.querySelector("#guiviewer3d-toolbar").style.display = "none";
       let devDbIds = allDevList.map(x => x.forge_dbid);
       // 大類
       let subDevDbId = [];
       allDevList.forEach(({ device_nodes }) => {
         subDevDbId = [...subDevDbId, ...device_nodes.map(n => n.forge_dbid)]
       })
-            //console.log(devDbIds, subDevDbId)
+      console.log(devDbIds, subDevDbId)
       // 從資料庫設定不可視模型的類型，若沒有取道該小類不可視類型，則套用資料庫設定預設類型
       if (forgeInvType) {
         setInviForge(forgeInvType, [...devDbIds, ...subDevDbId]);
@@ -409,6 +417,7 @@
       let sensorObjs = []
       let devices = []
       if (pageAct.sysSubTag === "M12") {
+        addHotPoint(viewer)
         allDevList.forEach((device) => {
           const sensorObj = new Forge3DSensor({
             viewer: viewer,
@@ -447,7 +456,7 @@
           sensorObjs.push(sensorObj)
         })
       } else {
-                allDevList.map(x => {
+        devices = allDevList.map(x => {
           return {
             roomDbId: !isNaN(parseInt(x.room_dbid)) ? parseInt(x.room_dbid) : -1,
             id: x.device_number,
@@ -456,6 +465,8 @@
             temp: 0,
           }
         })
+
+        if (pageAct.sysSubTag == "M12" || pageAct.sysSubTag == "ELEV") {
           let elevOption = {
             selector: "[name=forgeViewer]",
             viewer: viewer,
@@ -472,12 +483,14 @@
           }
           forge3DElev.init();
         }
+      }
 
       let option = {
         devices: devices,
       }
 
       if (pageAct.sysMainTag !== "LT" && pageAct.sysSubTag !== "M12") {
+        console.log(pageAct.sysSubTag, option)
         heatMap = new ADHeatMaps(option);
         heatMap.onComplete = () => {
           $.each(allDevList, (idx, dev) => {
@@ -550,7 +563,7 @@
       "device_system_tag": pageAct.sysMainTag,
       "device_name_tag": pageAct.sysSubTag,
     };
-        //console.log(sendData)
+    console.log(sendData)
     objSendData.Data = sendData;
     ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
       if (!res || res.code != "0000" || !res.data) {
@@ -567,8 +580,6 @@
           $.extend(item, data);
           myDataList.push(item);
         })
-
-                //console.log("1", myDataList)
         setHotspotPoint(myDataList);
         if (pageAct.sysMainTag == "LT") {
           setLightPoint(myDataList);
@@ -580,7 +591,7 @@
   }
 
   function setHotspotPoint(myDataList = []) {
-         //console.log("2",myDataList)
+    console.log("2", myDataList)
     getHopspotPoint(myDataList);
   }
 
@@ -617,7 +628,10 @@
   var parentEle = "";
   onEvent("autodesk:click:sprite", "[name=forgeViewer]", function (e, obj) {
     forgeUnFocusAll();
-        let position = [obj.event.target.toolController.lastClickX - 100, obj.event.target.toolController.lastClickY - 100];
+    let rect = $("[name=forgeViewer]")[0].getBoundingClientRect();
+    let position = [rect.left + rect.width / 2, rect.top + rect.height / 3]
+    // console.log(position)
+    // let position = [obj.event.target.toolController.lastClickX - 300, obj.event.target.toolController.lastClickY - 300];
     let devObj = obj.myData;
     let name = allDevList.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name || devObj.full_name;
     devObj.full_name = name;
@@ -650,7 +664,15 @@
 
   function forgeUnFocusAll() {
     $("#floDevList a[name=devItem]").each((idx, ele) => {
-            controlFocusHotspot($(ele).data("dbId"), false);
+      const eleDbId = $(ele).data("dbId")
+      if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+        changeScaleForHotspot(eleDbId, false)
+        return
+      }
+      else {
+        // 3D 熱點解除
+        controlFocusHotspot(eleDbId, false);
+      }
     })
   }
 </script>

Frontend/_sysMonFloor.html

@@ -332,7 +332,10 @@
         chartUnFocusAll();
         if (params.componentType == "series") {
           let data = params.data;
-                    let position = [params.event.event.clientX, params.event.event.clientY];
+          let rect = $("#floChart")[0].getBoundingClientRect();
+          let position = [rect.left + rect.width / 2, rect.top + rect.height / 4]
+          // console.log(position)
+          // let position = [params.event.event.clientX+100, params.event.event.clientY-300];
           data._dbId = data._dbId ?? null;
           parentEle = crePosPopover(position, data);
           $(parentEle).click();
@@ -380,6 +383,8 @@
             currentData.forEach(function (cData) {
               if (cData.device_guid == point.device_guid) {
                 cData._dbId = dbid;
+                cData.spriteDbid = dbid;
+                setForgeHotSpotColor(cData);
               }
             })
           });
@@ -453,6 +458,13 @@
       if (!matchDevice) {
         return false;
       }
+      //將訂閱值塞入 subDeviceData
+      if (subDeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
+        let obj = {};
+        obj.device_number = matchDevice.device_number;
+        obj.dbid = matchDevice.forge_dbid;
+        subDeviceData.push(obj)
+      }
       let norDevPoiName = matchDevice.device_normal_point_name;
       let cloDevPoiName = matchDevice.device_close_point_name;
       let errDevPoiName = matchDevice.device_error_point_name;
@@ -482,6 +494,7 @@
       } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
         $(`#${matchDevice.device_number}_status`).attr("data-light-type", "error").data("light-type", "error");
       }
+      setForgeHotSpotColor(matchDevice);
 
     });
 
@@ -1087,6 +1100,7 @@
       });
       setHeatMap();
 
+      if (pageAct.sysSubTag == "ELEV") {
         let elevOption = {
           viewer: viewer,
           ordPath: {
@@ -1100,6 +1114,7 @@
           endPageLoading();
         }
         forge3DElev.init();
+      }
 
     });
   }
@@ -1171,7 +1186,10 @@
   onEvent("autodesk:click:sprite", "#forgeViewer", function (e, obj) {
     forgeUnFocusAll();
     chartUnFocusAll();
-        let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
+    let rect = $("#forgeViewer")[0].getBoundingClientRect();
+    let position = [rect.left + rect.width / 2, rect.top + rect.height / 4]
+    // console.log(position)
+    // let position = [obj.event.target.toolController.lastClickX, obj.event.target.toolController.lastClickY];
     let devObj = obj.myData;
     let name = currentData.filter(x => x.device_guid == devObj.device_guid)[0]?.full_name;
     devObj.full_name = name;
@@ -1196,7 +1214,15 @@
 
   function forgeUnFocusAll() {
     $.each(currentData, (idx, cData) => {
-            controlFocusHotspot(cData._dbId, false);
+      const eleDbId = cData._dbId
+      if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+        changeScaleForHotspot(eleDbId, false)
+        return
+      }
+      else {
+        // 3D 熱點解除
+        controlFocusHotspot(eleDbId, false);
+      }
     })
   }
 

Frontend/css/site.css

@@ -1,97 +1,317 @@
 
-:root { --yt-main-gray: #c2c7d0; --yt-main-black: #212529; --yt-main-gray-hover: #c2c7d0; --yt-gray: #505050; --yt-gray-hover: #3c3c3c; --yt-gray-2: #8f8c8c; --yt-gray-2-hover: #646060; --yt-gray-3: #ededed; --yt-gray-4: #dddddd; --yt-pink: #ff95d0; --yt-pink-hover: #ef84c0; --yt-red-2: #d34949; --yt-yellow-1: #ffc902; }
+:root {
+  --yt-main-gray: #c2c7d0;
+  --yt-main-black: #212529;
+  --yt-main-gray-hover: #c2c7d0;
+  --yt-gray: #505050;
+  --yt-gray-hover: #3c3c3c;
+  --yt-gray-2: #8f8c8c;
+  --yt-gray-2-hover: #646060;
+  --yt-gray-3: #ededed;
+  --yt-gray-4: #dddddd;
+  --yt-pink: #ff95d0;
+  --yt-pink-hover: #ef84c0;
+  --yt-red-2: #d34949;
+  --yt-yellow-1: #ffc902;
+}
 
 
-.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header { background: rgba(0, 0, 0, 0.03); }
+.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .card-header {
+  background: rgba(0, 0, 0, 0.03);
+}
 
-.btn-sm-2 { padding: 2px 19px; }
+.btn-sm-2 {
+  padding: 2px 19px;
+}
 
-.table td { word-break: break-all; }
+.table td {
+  word-break: break-all;
+}
 
-label[id$='-error'].error { color: var(--yt-red-2); }
+label[id$='-error'].error {
+  color: var(--yt-red-2);
+}
 
 /*[id^=yt_tooltip] { min-width: 650px !important; }*/
 
-.circle-light { display: inline-block; width: 25px; height: 25px; border-radius: 50px; }
+.circle-light {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  border-radius: 50px;
+}
 
-.light-flash { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-bg 0.5s linear infinite; }
+.light-flash {
+  --flash-color-1: #ffa100;
+  --flash-color-2: #26272b;
+  animation: flashing-bg 0.5s linear infinite;
+}
 
-.light-flash-c { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-c 0.5s linear infinite; }
+.light-flash-c {
+  --flash-color-1: #ffa100;
+  --flash-color-2: #26272b;
+  animation: flashing-c 0.5s linear infinite;
+}
 
-.light-flash-c-bd { --flash-color-1: #ffa100; --flash-color-2: #26272b; animation: flashing-c-bd 0.5s linear infinite; }
+.light-flash-c-bd {
+  --flash-color-1: #ffa100;
+  --flash-color-2: #26272b;
+  animation: flashing-c-bd 0.5s linear infinite;
+}
 
 /* checkbox switch */
-input.toggle:checked::before { content: ''; position: absolute; top: 2px; left: 24px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #3f8635; }
+input.toggle:checked::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 24px;
+  display: block;
+  border-radius: 25px;
+  width: 20px;
+  height: 20px;
+  background: #3f8635;
+}
 
-input.toggle::before { content: ''; position: absolute; top: 2px; left: 3px; display: block; border-radius: 25px; width: 20px; height: 20px; background: #656565; transition: 0.2s; }
+input.toggle::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 3px;
+  display: block;
+  border-radius: 25px;
+  width: 20px;
+  height: 20px;
+  background: #656565;
+  transition: 0.2s;
+}
 
-input.toggle { cursor: pointer; appearance: none; position: relative; width: 48px; height: 24px; background: #464646; border-radius: 50px; align-content: center; }
+input.toggle {
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  width: 48px;
+  height: 24px;
+  background: #464646;
+  border-radius: 50px;
+  align-content: center;
+}
 
-input.toggle:checked { background: #97c193; }
+  input.toggle:checked {
+    background: #97c193;
+  }
 
-.loading-bg { background: #0000009c; background-repeat: no-repeat; opacity: 0; width: 100%; height: 100vh; position: fixed; z-index: 3000; }
+.loading-bg {
+  background: #0000009c;
+  background-repeat: no-repeat;
+  opacity: 0;
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  z-index: 3000;
+}
 
-.dropdown-menu { z-index: 3000; }
+.dropdown-menu {
+  z-index: 3000;
+}
 
-.adsk-viewing-viewer { top: 0px; }
+.adsk-viewing-viewer {
+  top: 0px;
+}
 
-.lds-ring { display: inline-block; position: relative; width: 25px; height: 25px; margin-right: 0.8rem; }
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 25px;
+  height: 25px;
+  margin-right: 0.8rem;
+}
 
-.lds-ring div { top: -4px; box-sizing: border-box; display: block; position: absolute; width: 25px; height: 25px; margin: 6px; border: 6px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #fff transparent transparent transparent; }
+  .lds-ring div {
+    top: -4px;
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    margin: 6px;
+    border: 6px solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+  }
 
-.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
+    .lds-ring div:nth-child(1) {
+      animation-delay: -0.45s;
+    }
 
-.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
+    .lds-ring div:nth-child(2) {
+      animation-delay: -0.3s;
+    }
 
-.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
+    .lds-ring div:nth-child(3) {
+      animation-delay: -0.15s;
+    }
 
 /* js-tree */
-.jstree-node { padding-bottom: 3px; }
+.jstree-node {
-.jstree-default-dark { background-color: transparent; }
+  padding-bottom: 3px;
-.jstree a.jstree-anchor { color: #d6d6d6 !important; }
+}
 
-.dropzone .dz-preview.dz-file-preview .dz-image { background: linear-gradient(to bottom, #675d72, #4d4a56) !important; }
+.jstree-default-dark {
+  background-color: transparent;
+}
 
-.dz-remove { position: absolute; top: -8px; right: -8px; z-index: 100; }
+.jstree a.jstree-anchor {
+  color: #d6d6d6 !important;
+}
 
-.dz-remove span { width: 30px; height: 30px; font-size: 24px; border-radius: 10px; color: white; cursor: pointer !important; padding-top: 3px; transition: 0.2s; }
+.dropzone .dz-preview.dz-file-preview .dz-image {
+  background: linear-gradient(to bottom, #675d72, #4d4a56) !important;
+}
 
-.dz-remove span.mi-delete { background: var(--danger); }
+.dz-remove {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  z-index: 100;
+}
 
-.dz-remove span.mi-cancel { font-size: 30px; color: var(--color_grey); }
+  .dz-remove span {
+    width: 30px;
+    height: 30px;
+    font-size: 24px;
+    border-radius: 10px;
+    color: white;
+    cursor: pointer !important;
+    padding-top: 3px;
+    transition: 0.2s;
+  }
 
-.dz-remove:hover span { transform: scale(1.1); transition: 0.2s; }
+    .dz-remove span.mi-delete {
-.dropzone .dz-preview.dz-image-preview { background-color: transparent !important; }
+      background: var(--danger);
+    }
 
-input:-webkit-autofill { background-color: rgba(0, 0, 0, 0.15) !important; }
+    .dz-remove span.mi-cancel {
+      font-size: 30px;
+      color: var(--color_grey);
+    }
 
-.d-grid { display: grid; }
+  .dz-remove:hover span {
+    transform: scale(1.1);
+    transition: 0.2s;
+  }
 
-.grid-gap-1 { grid-gap: 1px; }
+.dropzone .dz-preview.dz-image-preview {
-.grid-gap-2 { grid-gap: 2px; }
+  background-color: transparent !important;
-.grid-gap-3 { grid-gap: 3px; }
+}
-.grid-gap-4 { grid-gap: 4px; }
-.grid-gap-5 { grid-gap: 5px; }
-.grid-gap-c { grid-gap: var(--c-grid-gap); }
 
-.grid-temp-col-c { grid-template-columns: var(--c-grid-temp-col); }
+input:-webkit-autofill {
+  background-color: rgba(0, 0, 0, 0.15) !important;
+}
 
-.vakata-context, .vakata-context ul { background-color: #3f3f3f; box-shadow: 2px 2px 2px #111111; }
+.d-grid {
-.vakata-context li > a { color: white; text-shadow: 1px 1px 0 #4b4b4b; }
+  display: grid;
-.vakata-context .vakata-context-hover > a { background-color: #666666; box-shadow: 0 0 2px #2f2f2f; }
+}
-.vakata-context li > a:hover { background-color: #636363; box-shadow: 0 0 2px #2f2f2f; }
 
-.yt-left-navbar { position: fixed; left: 0; top: 0; height: 100%; z-index: 10; background-color: rgb(25 25 25 / 95%); width: auto; max-width: 300px; margin-top: 4.125rem; }
+.grid-gap-1 {
-.yt-navbar-content ul { padding: 1rem 0rem; list-style-type: none; }
+  grid-gap: 1px;
-.yt-navbar-content ul li { position: relative; display: flex; flex-wrap: wrap; }
+}
-.yt-navbar-content ul li a { font-size: 0.9rem; padding: 0.75rem 2rem; position: relative; width: 100%; }
-.yt-navbar-content ul li a:hover { background-color: var(--theme-fusion-600); }
-.yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active { background-color: var(--theme-light); }
 
-.card-header.p-3.ui-draggable-handle:hover { cursor: move; }
+.grid-gap-2 {
+  grid-gap: 2px;
+}
 
-.device-wrap .card-body #info, .device-wrap .card-body #errRec, .device-wrap .card-body #opeRec { min-width: 500px; }
+.grid-gap-3 {
-.scrolledTable { overflow-y: auto; clear: both; max-height:100%;}
+  grid-gap: 3px;
+}
+
+.grid-gap-4 {
+  grid-gap: 4px;
+}
+
+.grid-gap-5 {
+  grid-gap: 5px;
+}
+
+.grid-gap-c {
+  grid-gap: var(--c-grid-gap);
+}
+
+.grid-temp-col-c {
+  grid-template-columns: var(--c-grid-temp-col);
+}
+
+.vakata-context, .vakata-context ul {
+  background-color: #3f3f3f;
+  box-shadow: 2px 2px 2px #111111;
+}
+
+  .vakata-context li > a {
+    color: white;
+    text-shadow: 1px 1px 0 #4b4b4b;
+  }
+
+  .vakata-context .vakata-context-hover > a {
+    background-color: #666666;
+    box-shadow: 0 0 2px #2f2f2f;
+  }
+
+  .vakata-context li > a:hover {
+    background-color: #636363;
+    box-shadow: 0 0 2px #2f2f2f;
+  }
+
+.yt-left-navbar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  z-index: 10;
+  background-color: rgb(25 25 25 / 95%);
+  width: auto;
+  max-width: 300px;
+  margin-top: 4.125rem;
+}
+
+.yt-navbar-content ul {
+  padding: 1rem 0rem;
+  list-style-type: none;
+}
+
+  .yt-navbar-content ul li {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+    .yt-navbar-content ul li a {
+      font-size: 0.9rem;
+      padding: 0.75rem 2rem;
+      position: relative;
+      width: 100%;
+    }
+
+      .yt-navbar-content ul li a:hover {
+        background-color: var(--theme-fusion-600);
+      }
+
+      .yt-navbar-content ul li a:active, .yt-navbar-content ul li a.active {
+        background-color: var(--theme-light);
+      }
+
+.card-header.p-3.ui-draggable-handle:hover {
+  cursor: move;
+}
+
+.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;
@@ -106,216 +326,417 @@ 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, #sysMonBtnList a { color: #fff !important; }
+.page-header a, #sysMonBtnList a {
-.page-header a:hover, #sysMonBtnList a:hover { color: var(--theme-primary-50) !important; }
+  color: #fff !important;
-.page-header a.active, #sysMonBtnList a.active { color: var(--theme-primary-500) !important; }
+}
-.dropdown.show a { color: var(--theme-primary-50) !important; }
+
-@media screen and (max-width: 576px) { .yt-left-navbar { width: 100%; max-width: 100%; margin-top: 0; }
+  .page-header a:hover, #sysMonBtnList a:hover {
+    color: var(--theme-primary-50) !important;
+  }
+
+  .page-header a.active, #sysMonBtnList a.active {
+    color: var(--theme-primary-500) !important;
+  }
+
+.dropdown.show a {
+  color: var(--theme-primary-50) !important;
+}
+
+@media screen and (max-width: 576px) {
+  .yt-left-navbar {
+    width: 100%;
+    max-width: 100%;
+    margin-top: 0;
+  }
 }
 
 @keyframes lds-ring {
-    0% { transform: rotate(0deg); }
+  0% {
+    transform: rotate(0deg);
+  }
 
-    100% { transform: rotate(360deg); }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes flashing-c {
-    0% { color: var(--flash-color-1); }
+  0% {
+    color: var(--flash-color-1);
+  }
 
-    49% { color: var(--flash-color-1); }
+  49% {
+    color: var(--flash-color-1);
+  }
 
-    50% { color: var(--flash-color-2); }
+  50% {
+    color: var(--flash-color-2);
+  }
 
-    99% { color: var(--flash-color-2); }
+  99% {
+    color: var(--flash-color-2);
+  }
 }
 
 @keyframes flashing-bg {
-    0% { background: var(--flash-color-1); }
+  0% {
+    background: var(--flash-color-1);
+  }
 
-    49% { background: var(--flash-color-1); }
+  49% {
+    background: var(--flash-color-1);
+  }
 
-    50% { background: var(--flash-color-2); }
+  50% {
+    background: var(--flash-color-2);
+  }
 
-    99% { background: var(--flash-color-2); }
+  99% {
+    background: var(--flash-color-2);
+  }
 }
 
 @keyframes flashing-c-bd {
-    0% { border-color: var(--flash-color-1); }
+  0% {
+    border-color: var(--flash-color-1);
+  }
 
-    49% { border-color: var(--flash-color-1); }
+  49% {
+    border-color: var(--flash-color-1);
+  }
 
-    50% { border-color: var(--flash-color-2); }
+  50% {
+    border-color: var(--flash-color-2);
+  }
 
-    99% { border-color: var(--flash-color-2); }
+  99% {
+    border-color: var(--flash-color-2);
+  }
 }
 /* ================================================================ */
 /*                             單一方法                             */
 /* ================================================================ */
 /* cursor */
-.cur-def { cursor: default !important; }
+.cur-def {
+  cursor: default !important;
+}
 
-.cur-poi { cursor: pointer !important; }
+.cur-poi {
+  cursor: pointer !important;
+}
 
 /*left 距離*/
-.left-05 { left: 0.5rem !important; }
+.left-05 {
+  left: 0.5rem !important;
+}
 
-.left-04 { left: 0.4rem !important; }
+.left-04 {
+  left: 0.4rem !important;
+}
 
-.left-03 { left: 0.3rem !important; }
+.left-03 {
+  left: 0.3rem !important;
+}
 
-.left-02 { left: 0.2rem !important; }
+.left-02 {
+  left: 0.2rem !important;
+}
 
-.left-01 { left: 0.1rem !important; }
+.left-01 {
+  left: 0.1rem !important;
+}
 
 /*right 距離*/
-.right-05 { right: 0.5rem !important; }
+.right-05 {
+  right: 0.5rem !important;
+}
 
-.right-04 { right: 0.4rem !important; }
+.right-04 {
+  right: 0.4rem !important;
+}
 
-.right-03 { right: 0.3rem !important; }
+.right-03 {
+  right: 0.3rem !important;
+}
 
-.right-02 { right: 0.2rem !important; }
+.right-02 {
+  right: 0.2rem !important;
+}
 
-.right-01 { right: 0.1rem !important; }
+.right-01 {
+  right: 0.1rem !important;
+}
 
 /*bottom 0.5rem*/
-.bm-05 { bottom: 0.5rem !important; }
+.bm-05 {
+  bottom: 0.5rem !important;
+}
 
-.bm-04 { bottom: 0.4rem !important; }
+.bm-04 {
+  bottom: 0.4rem !important;
+}
 
-.bm-03 { bottom: 0.3rem !important; }
+.bm-03 {
+  bottom: 0.3rem !important;
+}
 
-.bm-02 { bottom: 0.2rem !important; }
+.bm-02 {
+  bottom: 0.2rem !important;
+}
 
-.bm-01 { bottom: 0.1rem !important; }
+.bm-01 {
+  bottom: 0.1rem !important;
+}
 
 /*top 0.5rem*/
-.tp-05 { top: 0.5rem !important; }
+.tp-05 {
+  top: 0.5rem !important;
+}
 
-.tp-04 { top: 0.4rem !important; }
+.tp-04 {
+  top: 0.4rem !important;
+}
 
-.tp-03 { top: 0.3rem !important; }
+.tp-03 {
+  top: 0.3rem !important;
+}
 
-.tp-02 { top: 0.2rem !important; }
+.tp-02 {
+  top: 0.2rem !important;
+}
 
-.tp-01 { top: 0.1rem !important; }
+.tp-01 {
+  top: 0.1rem !important;
+}
 
 /* font-weight */
-.fw-1 { font-weight: 100; }
+.fw-1 {
+  font-weight: 100;
+}
 
-.fw-2 { font-weight: 200; }
+.fw-2 {
+  font-weight: 200;
+}
 
-.fw-3 { font-weight: 300; }
+.fw-3 {
+  font-weight: 300;
+}
 
-.fw-4 { font-weight: 400; }
+.fw-4 {
+  font-weight: 400;
+}
 
-.fw-5 { font-weight: 500; }
+.fw-5 {
+  font-weight: 500;
+}
 
-.fw-6 { font-weight: 600; }
+.fw-6 {
+  font-weight: 600;
+}
 
-.fw-7 { font-weight: 700; }
+.fw-7 {
+  font-weight: 700;
+}
 
-.fw-8 { font-weight: 800; }
+.fw-8 {
+  font-weight: 800;
+}
 
-.fw-9 { font-weight: 900; }
+.fw-9 {
+  font-weight: 900;
+}
 
 /* font-size */
-.fs-05 { font-size: 0.5rem; }
+.fs-05 {
+  font-size: 0.5rem;
+}
 
-.fs-075 { font-size: 0.75rem; }
+.fs-075 {
+  font-size: 0.75rem;
+}
 
-.fs-09 { font-size: 0.9rem; }
+.fs-09 {
+  font-size: 0.9rem;
+}
 
-.fs-1 { font-size: 1rem; }
+.fs-1 {
+  font-size: 1rem;
+}
 
-.fs-1-05 { font-size: 1.05rem; }
+.fs-1-05 {
+  font-size: 1.05rem;
+}
 
-.fs-1-1 { font-size: 1.1rem; }
+.fs-1-1 {
+  font-size: 1.1rem;
+}
 
-.fs-1-2 { font-size: 1.2rem; }
+.fs-1-2 {
+  font-size: 1.2rem;
+}
 
-.fs-1-3 { font-size: 1.3rem; }
+.fs-1-3 {
+  font-size: 1.3rem;
+}
 
-.fs-1-5 { font-size: 1.5rem; }
+.fs-1-5 {
+  font-size: 1.5rem;
+}
 
-.fs-2 { font-size: 2rem; }
+.fs-2 {
+  font-size: 2rem;
+}
 
-.fs-2-5 { font-size: 2.5rem; }
+.fs-2-5 {
+  font-size: 2.5rem;
+}
 
 /* border width */
-.bd-0 { border-width: 0px; }
+.bd-0 {
+  border-width: 0px;
+}
 
-.bd-1 { border-width: 1px; }
+.bd-1 {
+  border-width: 1px;
+}
 
-.bd-2 { border-width: 2px; }
+.bd-2 {
+  border-width: 2px;
+}
 
 /* border direction */
-.bd-l { border-left-style: solid; }
+.bd-l {
+  border-left-style: solid;
+}
 
-.bd-r { border-right-style: solid; }
+.bd-r {
+  border-right-style: solid;
+}
 
-.bd-t { border-top-style: solid; }
+.bd-t {
+  border-top-style: solid;
+}
 
-.bd-b { border-bottom-style: solid; }
+.bd-b {
+  border-bottom-style: solid;
+}
 
 /* border radius */
-.br-1 { border-radius: 1px; }
+.br-1 {
+  border-radius: 1px;
+}
 
-.br-2 { border-radius: 2px; }
+.br-2 {
+  border-radius: 2px;
+}
 
-.br-3 { border-radius: 3px; }
+.br-3 {
+  border-radius: 3px;
+}
 
-.br-4 { border-radius: 4px; }
+.br-4 {
+  border-radius: 4px;
+}
 
-.br-5 { border-radius: 5px; }
+.br-5 {
+  border-radius: 5px;
+}
 
 /* flex-gap */
-.gap-1 { gap: 1px; }
+.gap-1 {
+  gap: 1px;
+}
 
-.gap-2 { gap: 2px; }
+.gap-2 {
+  gap: 2px;
+}
 
-.gap-3 { gap: 3px; }
+.gap-3 {
+  gap: 3px;
+}
 
-.gap-4 { gap: 4px; }
+.gap-4 {
+  gap: 4px;
+}
 
-.gap-5 { gap: 5px; }
+.gap-5 {
+  gap: 5px;
+}
 
-.gap-6 { gap: 6px; }
+.gap-6 {
+  gap: 6px;
+}
 
-.gap-7 { gap: 7px; }
+.gap-7 {
+  gap: 7px;
+}
 
-.gap-8 { gap: 8px; }
+.gap-8 {
+  gap: 8px;
+}
 
 /* vertical-align */
-.va-t { vertical-align: top; }
+.va-t {
+  vertical-align: top;
+}
 
-.va-m { vertical-align: middle; }
+.va-m {
+  vertical-align: middle;
+}
 
-.va-b { vertical-align: bottom; }
+.va-b {
+  vertical-align: bottom;
+}
 
-.bg-orange { background-color: #ffa100; }
+.bg-orange {
+  background-color: #ffa100;
+}
 
 /* text color */
-.t-main-purple { color: #623c80 !important; }
+.t-main-purple {
+  color: #623c80 !important;
+}
 
-.t-black { color: #000 !important; }
+.t-black {
+  color: #000 !important;
+}
 
-.t-white { color: #fff !important; }
+.t-white {
+  color: #fff !important;
+}
 
-.t-fb-blue { color: #466ac2 !important; }
+.t-fb-blue {
+  color: #466ac2 !important;
+}
 
-.t-line-green { color: #54C814 !important; }
+.t-line-green {
+  color: #54C814 !important;
+}
 
-.t-red { color: #db0000 !important; }
+.t-red {
+  color: #db0000 !important;
+}
 
-.t-red-2 { color: var(--yt-red-2) !important; }
+.t-red-2 {
+  color: var(--yt-red-2) !important;
+}
 
-.t-gray { color: var(--yt-gray); }
+.t-gray {
+  color: var(--yt-gray);
+}
 
-.t-main-gray { color: var(--yt-main-gray); }
+.t-main-gray {
+  color: var(--yt-main-gray);
+}
 
-.t-gray-2 { color: var(--yt-gray-2) !important; }
+.t-gray-2 {
+  color: var(--yt-gray-2) !important;
+}
 
-.t-gray-3 { color: var(--yt-gray-3); }
+.t-gray-3 {
+  color: var(--yt-gray-3);
+}
 
-.t-yellow { color: var(--yt-yellow-1); }
+.t-yellow {
+  color: var(--yt-yellow-1);
+}

Frontend/img/forge/sensor_circle.svg

@@ -1,7 +1,17 @@
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
+<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
-
+	<g filter="url(#filter0_d)">
- <g>
+		<circle cx="81.7363" cy="81.8212" r="70.3389" fill="white"/>
-  <title>Layer 1</title>
+		<!-- <circle cx="81.7363" cy="81.8212" r="62.3112" stroke="white" stroke-width="16.0554"/> -->
-  <circle fill="none" id="svg_1" r="8" cy="8" cx="8"/>
 	</g>
+	<defs>
+		<filter id="filter0_d" x="0.174763" y="0.259602" width="163.123" height="163.123" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset/>
+			<feGaussianBlur stdDeviation="5.61135"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+		</filter>
+	</defs>
 </svg>

Frontend/index.html

@@ -41,12 +41,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
   <link href="lib/jstree-master/themes/default-dark/style.min.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <!--<link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css">-->
-    <link rel="stylesheet" media="screen, print" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
+  <link rel="stylesheet" media="screen, print"
+        href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
   <link rel="stylesheet" href="css/site.css" />
   <link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
   <link rel="stylesheet" href="css/yourteam/plugins/yt-notice/yt-notice.css" />
   <link rel="stylesheet" href="css/yourteam/plugins/yt-alert/ytpop-alert.css" />
-    <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
+  <link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css"
+        type="text/css">
 
 
 </head>
@@ -144,7 +146,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
         <header class="page-header" role="banner">
           <!--we need this logo when user switches to nav-function-top-->
           <div class="page-logo">
-                        <a href="javascript:;" name="topFunBtn" data-page="dashboard" class="page-logo-link press-scale-down d-flex align-items-center position-relative">
+            <a href="javascript:;" name="topFunBtn" data-page="dashboard"
+               class="page-logo-link press-scale-down d-flex align-items-center position-relative">
               <img src="img/logo.png" alt="SmartAdmin WebApp" aria-roledescription="logo">
 
               <!--<span class="page-logo-text mr-1">SmartAdmin WebApp</span>-->
@@ -198,13 +201,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
           <div class="ml-auto d-flex mr-3">
 
             <div class="dropdown">
-                            <a href="javascript:;" id="toggleNoticeBtn" class="d-flex align-items-center justify-content-center ml-2">
+              <a href="javascript:;" id="toggleNoticeBtn"
+                 class="d-flex align-items-center justify-content-center ml-2">
                 <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
                 alt="Dr. Codex Lantern">-->
                 <!--you can also add username next to the avatar with the codes below:-->
                 <div class="row m-0 justify-content-center userblock">
                   <i id="noticeConIcon" class=" fs-1-5 w-100 text-center"></i>
-                                    <span id="noticeConText" class="text-truncate text-truncate-header hidden-xs-down" data-hide="隱藏警告" data-show="顯示警告"></span>
+                  <span id="noticeConText" class="text-truncate text-truncate-header hidden-xs-down"
+                        data-hide="隱藏警告" data-show="顯示警告"></span>
                 </div>
 
               </a>
@@ -212,7 +217,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             </div>
             <!--app user menu-->
             <div class="dropdown">
-                            <a href="#" data-toggle="dropdown" data-target="logoutList" class="d-flex align-items-center justify-content-center ml-2">
+              <a href="#" data-toggle="dropdown" data-target="logoutList"
+                 class="d-flex align-items-center justify-content-center ml-2">
                 <!--<img src="img/demo/avatars/avatar-admin.png" class="profile-image rounded-circle"
                 alt="Dr. Codex Lantern">-->
                 <!--you can also add username next to the avatar with the codes below:-->
@@ -232,7 +238,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
 
           </div>
           <div class="ml-2 text-center">
-                        <label class="mb-0 fs-1-2">Diamond Controls<span class="fs-09 position-absolute">®</span></label><br>
+            <label class="mb-0 fs-1-2">
+              Diamond Controls<span class="fs-09 position-absolute">®</span>
+            </label><br>
             <label class="mb-0 fs-1-1">智慧大樓管理平台</label>
           </div>
         </header>
@@ -685,7 +693,8 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
     </div>
   </div>
 
-    <div id="noticeBlock" style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
+  <div id="noticeBlock"
+       style="position: fixed; top: 70px; right: 0px; padding: 20px; transition: 0.2s; z-index: 50000; height:100%; ">
 
   </div>
 
@@ -803,8 +812,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             /*"lib/jquery-validation/dist/additional-methods.min",*/  /* 會影響 messages_zh_TW 文字呈現 */
             "lib/jquery-validation/dist/localization/messages_zh_TW",
             "lib/jquery-ui/jquery-ui.min",
-                        //"lib/chart.js_4.1.2/chart.umd", // B4
+            "lib/chart.js_4.1.2/chart.umd",
-                        "lib/chart.js/chart.min", // 本機
             "lib/dropzone/dropzone-min",
             "lib/jstree-master/jstree.min",
             "lib/notifications/sweetalert2/sweetalert2.bundle",
@@ -1216,8 +1224,14 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
               // 讀取設備基本資料列表
               $(tooltipEle).find("#info").html(typeof drawInfoTabBlo != "undefined" ? drawInfoTabBlo(devGuid) : "");
               // 聚焦熱點
-                            if ($(oriEle).data("dbId")) {
+              const eleDbId = $(oriEle).data("dbId")
-                                controlFocusHotspot($(oriEle).data("dbId"));
+              if (eleDbId) {
+                if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+                  changeScaleForHotspot(eleDbId)
+                }
+                else {
+                  controlFocusHotspot(eleDbId);
+                }
               }
               // 3D 視角 ZOOM IN 聚焦
 
@@ -1255,8 +1269,16 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
               typeof subDeviceSetTable != "undefined" ? subDeviceSetTable($(oriEle).data("number")) : ""
             },
             onHide: function (tooltipEle, oriEle) {
+              const eleDbId = $(oriEle).data("dbId")
+              if (eleDbId) {
+                if (alarmDbIdList.some(dbId => dbId == eleDbId)) {
+                  changeScaleForHotspot(eleDbId, false)
+                }
+                else {
                   // 3D 熱點解除
-                            controlFocusHotspot($(oriEle).data("dbId"), false);
+                  controlFocusHotspot(eleDbId, false);
+                }
+              }
               // sysMonFloor Echart 解除 focus
               typeof chartUnFocus != "undefined" ? chartUnFocus(oriEle) : "";
             }
@@ -1380,6 +1402,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
       }
 
       function controlFocusHotspot(dbId, open = true) {
+        // console.log("dbId", alarmDbIdList,dbId)
         changeColorForHotspot(dbId, open ? "focus" : null);
         changeScaleForHotspot(dbId, open);
       }

Frontend/js/forge/forgemodel.js

@@ -798,7 +798,6 @@ async function addHotPoint(data) {
 
     const viewableData = new DataVizCore.ViewableData();
     viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
-    console.log()
     myDataList.forEach((myData, index) => {
         const dbId = 10 + index;
         const myPosition = myData.position;
@@ -820,7 +819,7 @@ async function addHotPoint(data) {
                 // console.log(`Sprite clicked: ${event.dbId}`);
 
                 for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
-                    changeColorForHotspot(i);
+                    !alarmDbIdList.some(dbId => dbId == i) && changeColorForHotspot(i);
                     changeScaleForHotspot(i, true);
                 }
                 let myData = myDataList.filter(x => x._dbId == event.dbId)[0];
@@ -831,7 +830,7 @@ async function addHotPoint(data) {
                 }
                 $(selector).trigger("autodesk:click:sprite", { event, myData });
             } else {
-                changeColorForHotspot(event.dbId, null);
+                !alarmDbIdList.some(dbId => dbId == i) && changeColorForHotspot(event.dbId, null);
                 changeScaleForHotspot(event.dbId, false);
                 $(selector).trigger("autodesk:clickOut:sprite", { event });
             }
@@ -881,7 +880,6 @@ async function addHotPoint(data) {
 // 熱點 更換顏色
 async function changeColorForHotspot(dbId, type = null) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-    // console.log(dbId, dataVizExtn.viewableData.getViewableColor(dbId, false))
     let spriteColorFocus = new THREE.Color(0xffffff);
     if (type == "focus" && pageAct.sysSubTag !== "M12") {
         spriteColorFocus = new THREE.Color(0x00ffe1);

Frontend/js/n4js/alarmbaja.js

@@ -422,11 +422,13 @@ function getSystemAlarmByBaja(callback) {
   var _index = 0;
 
   require(['baja!'], function (baja) {
+    // console.log("ip:202.39.218.221|foxs:4912|alarm:|bql:select alarmClass where isAlarm")
     //baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where isAlarm").get()
     baja.Ord.make("local:|foxs:|alarm:|bql:select alarmClass where isAlarm").get()
       .then(function (table) {
         return table.cursor({
           each: function (record) {
+            // console.log(record)
             let main = {};
             main.alarmClass = record.get('alarmClass');
 
@@ -532,7 +534,7 @@ function getOneDeviceAlarmByBaja(devicePath, callback) {
   var _index = 0;
 
   require(['baja!'], function (baja) {
-            console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc");
+    // console.log("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc");
     baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where alarmData.sourceName like '%" + devicePath + "%' order by timestamp desc").get()
       .then(function (table) {
         return table.cursor({
@@ -559,6 +561,70 @@ function getOneDeviceAlarmByBaja(devicePath, callback) {
   });
 }
 
+function getOtherAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, callback) {
+  var _result = { count: 0, data: [] };
+  var _index = 0;
+  var _recoverState = isRecover ? "!= null" : "= null";
+  var _ackState = isAck ? "= 'acked'" : "= 'unacked'";
+
+  let startUrl = "";
+  if (startDate_millisecond) {
+    startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
+  }
+  console.log("告警2", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
+  require(['baja!'], function (baja) {
+
+    baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
+      .then(function (table) {
+        return table.cursor({
+          each: function (record) {
+            // console.log(record)
+            let main = {};
+            //   const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
+            const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName')
+            _sourceTmp = alarmDisplayName.split('_');
+            let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
+            let _sourceName = _sourceTmp.slice(0, 8).join("_");
+            _sourceTmp = _sourceTmp[7] + "-" + _sourceTmp[8];
+            console.log(record.get('alarmData').get('sourceName'), _bfName, _sourceName)
+
+            main.buildingFloorName_zh = _bfName;
+            main.sourceName_zh = _sourceName;
+            main.uuid = record.get('uuid').$val;
+            main.timestamp = record.get('timestamp').$cEncStr;
+            main.alarmClass = record.get('alarmClass');
+            main.point = _sourceTmp;
+            main.sourceTmp = _sourceTmp;
+            main.devicePath = _sourceName;
+            main.msgText = record.get('alarmData').get('msgText');
+            main.normalTime = record.get('normalTime');
+            main.priority = record.get('priority');
+            main.ackedTime = record.get('ackTime').$cEncStr;
+            main.ackState = record.get('ackState').$ordinal
+            if (_sourceTmp.includes("undefined")) {
+              main.buildingFloorName_zh = "無";
+              main.alarmClass = "系統/設備異常";
+              main.sourceTmp = "無";
+              main.msgText = "";
+              _result.data.push(main);
+            }
+
+            _index++;
+          },
+          after: function () {
+            _result.count = _index;
+            if (typeof callback === 'function') {
+              //console.log(_result)
+              callback(_result);
+            }
+          },
+          limit: -1,
+          offset: 0
+        });
+      });
+  });
+}
+
 function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isRecover, isAck, callback) {
   var _result = { count: 0, data: [] };
   var _index = 0;
@@ -569,7 +635,7 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
   if (startDate_millisecond) {
     startUrl = "timestamp.millis >= " + startDate_millisecond + " and ";
   }
-    console.log("告警", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
+  //   console.log("告警", "local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc");
   require(['baja!'], function (baja) {
 
     baja.Ord.make("local:|foxs:|alarm:|bql:select timestamp, ackTime, priority ,ackState, alarmClass, alarmClassDisplayName, alarmValue, alarmData, alarmData.sourceName, uuid, alarmData.msgText, alarmData.numericValue, alarmData.presentValue, alarmData.status, alarmData.toState, normalTime where " + startUrl + "timestamp.millis <= " + endDate_millisecond + " and normalTime " + _recoverState + " and ackState " + _ackState + " order by timestamp desc").get()
@@ -578,9 +644,8 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
           each: function (record) {
             // console.log(record)
             let main = {};
-                        // console.log(record.get('alarmData').get('sourceName'),record.get('timestamp').$cEncStr)
+            //   const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
-                        const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName').split(":")[0]
+            const alarmDisplayName = record.get('alarmData').get('sourceName').split(":")[1] ?? record.get('alarmData').get('sourceName')
-                        //console.log(alarmDisplayName)
             _sourceTmp = alarmDisplayName.split('_');
             let _bfName = _sourceTmp[1] + "-" + _sourceTmp[4]
             let _sourceName = _sourceTmp.slice(0, 8).join("_");
@@ -599,10 +664,14 @@ function getAllDeviceAlarmByBaja(startDate_millisecond, endDate_millisecond, isR
             main.priority = record.get('priority');
             main.ackedTime = record.get('ackTime').$cEncStr;
             main.ackState = record.get('ackState').$ordinal
-                        if (!_sourceTmp.includes("undefined")) {
+            if (_sourceTmp.includes("undefined")) {
               // console.log(main.ackState)
-                            _result.data.push(main);
+              main.buildingFloorName_zh = "無";
+              main.alarmClass = "系統/設備異常";
+              main.sourceTmp = "無";
+              main.msgText = "";
             }
+            _result.data.push(main);
             _index++;
           },
           after: function () {
@@ -660,10 +729,10 @@ function getDeviceAlarmCardByBaja(startDate_millisecond, endDate_millisecond, is
             main.priority = record.get('priority');
             main.ackedTime = record.get('ackTime').$cEncStr;
             main.ackState = record.get('ackState').$ordinal
-                        if (!_sourceTmp.includes("undefined")) {
+            //   if (!_sourceTmp.includes("undefined")) {
-                            // console.log(main.ackState)
+            //       // console.log(main.ackState)
+            //     }
             _result.data.push(main);
-                        }
             _index++;
           },
           after: function () {

Frontend/js/n4js/bajatest.js

@@ -35,6 +35,7 @@ class subscriptionDevices {
     };
 
     setSubscribeDevicesCallBack = function (callBackFunc) {
+        // console.log(callBackFunc)
         if (callBackFunc != undefined && callBackFunc != null) {
             this.changeCallback = callBackFunc;
         }
@@ -55,6 +56,8 @@ class subscriptionDevices {
             var sub = new baja.Subscriber();
 
             sub.attach('changed', function (prop) {
+                // console.log(prop)
+                // console.log(prop.getName())
                 if (prop.getName() === 'out') {
                     var out_value = this.getOutDisplay();
                     var target_device_number = this.$parent.getDisplayName().split('_').slice(0, 5).join('_');
@@ -83,7 +86,6 @@ class subscriptionDevices {
                         "point_name": point_name ? point_name : null,
                         "value": key
                     }
-
                     if (_this.changeCallback != undefined && _this.changeCallback != null) {
                         _this.changeCallback(modify_target_device, true); //第2參數用在平面圖，刷新畫面
                     }
@@ -161,13 +163,12 @@ class subscriptionDevices {
                                 if (_this.changeCallback != undefined && _this.changeCallback != null) {
                                     _this.changeCallback(modify_target_device);
                                 }
-
-
                                 baja.Ord.make("local:|foxs:|station:|" + this.getDisplay("slotPath"))
                                     .get()
                                     .then(function (component) {
                                         component_index++;
                                         var target_device_number = component.$parent.getDisplayName().split('_').slice(0, 5).join('_');
+                                        // console.log(component, component.getDisplayName())
                                         var point_name = component.getDisplayName();
 
                                         // //依據Facets判斷回傳的內容值為何
@@ -517,7 +518,7 @@ function BajaSubscribeAlarmsByBql(ordPathForAlarm) {
         });
 
         //使用bql語法
-        console.log(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
+        // console.log(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`);
         baja.Ord.make(`local:|foxs:|alarm:|bql:select top 1 timestamp, sourceState, alarmData, alarmData.sourceName, normalTime where alarmData.sourceName like '%${ordPathForAlarm.area_tag}_${ordPathForAlarm.building_tag}_${ordPathForAlarm.system_tag}_${ordPathForAlarm.name_tag}_%' order by timestamp desc`)
             .get(
                 function (table) {
@@ -636,7 +637,7 @@ function BajaSubscribeElectricmeterByBql(ordPathForElectricmeter) {
         });
 
         //使用bql語法
-        console.log(`local:|foxs:|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`);
+        // console.log(`local:|foxs:|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`);
         baja.Ord.make(`local:|foxs:|station:|slot:/${ordPathForElectricmeter.devicePath}|bql:select name, out, out.value, slotPath, facets from control:ControlPoint`)
             .get(
                 function (table) {

Frontend/js/n4js/historybaja.js

@@ -52,8 +52,7 @@ function getHistoryDataByBaja(devicePath, startDate_millisecond, endDate_millise
                         // else
                         //     _ss += ',{"deviceName":"' + deviceName + '", "value":' + record.get('value') + ', "timestamp":"' + record.get('timestamp').$cEncStr
                         //     + '"}';
-            _ss.push({
+                        _ss.push({deviceName:deviceName, value:record.get('value'), timestamp:record.get('timestamp').$cEncStr
-              deviceName: deviceName, value: record.get('value'), timestamp: record.get('timestamp').$cEncStr
                     });
                         _index++;
                     },

Frontend/js/site.js

@@ -596,11 +596,11 @@ class Forge3DElevFull {
                         frags.forEach((fragProxy) => {
                             fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
                             let start = 0;
-                            if (node === 13777 && start == 0) {
                             // 改變感測器熱點位置
                             this.sensorObjs && this.sensorObjs[0]?.changePos(node+2, fragProxy.frag.position.z);
-                                start = 1;
+                            // if (node === 15200 && start == 0) {
-                            }
+                            //     start = 1;
+                            // }
                             fragProxy.frag.updateAnimTransform();
                         })
                         elevObj.obj.viewer.impl.sceneUpdated(true);
@@ -649,11 +649,11 @@ class Forge3DElevFull {
                     frags.forEach((fragProxy) => {
                         fragProxy.frag.position.z = this.elev3DOption.floorHeight.filter(x => x.floor == subData["CP"])[0]?.height ?? 0;
                         let start = 0;
-                        if (node === 13777 && start == 0) {
-                            // 改變感測器熱點位置
                         this.sensorObjs && this.sensorObjs[0]?.changePos(node+2, fragProxy.frag.position.z);
-                            start = 1;
+                        // if (node === 15200 && start == 0) {
-                        }
+                        //     // 改變感測器熱點位置
+                        //     start = 1;
+                        // }
                         fragProxy.frag.updateAnimTransform()
                     })
                     elevObj.obj.viewer.impl.sceneUpdated(true);
@@ -725,7 +725,7 @@ class Forge3DSensor {
         this.ordPath.name_tag = this.sysSubTag;
         this.dataVizExtn = await this.viewer.loadExtension("Autodesk.DataVisualization");
         this.DataVizCore = Autodesk.DataVisualization.Core;
-        await this.addHotPoint();
+        await this.registerHotPoint()
         this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35)
         this.subSensorDevice();
         this.elevCb()
@@ -733,14 +733,14 @@ class Forge3DSensor {
 
     }
 
-    // 建立熱點
+    // // 建立熱點
-    async addHotPoint() {
+    // async addHotPoint() {
 
-        // this.dataVizExtn.removeAllViewables()
+    //     // this.dataVizExtn.removeAllViewables()
-        await this.registerHotPoint()
+    //     await this.registerHotPoint()
-        this.subSensorDevice();
+    //     this.subSensorDevice();
-        // console.log("2",this.dataVizExtn)
+    //     // console.log("2",this.dataVizExtn)
-    }
+    // }
 
     async registerHotPoint(color = "") {
         var viewer = this.viewer;

Frontend/js/yourteam/yourteam.jquery.datatables.js

@@ -143,7 +143,7 @@ function fnInitJqDataTablesAjax(apiUrl, tag, sendData = null, columns, columns_d
     //let sData = data ? (data.Data ? JSON.stringify(data.Data) : null) : null;  
     if (sendData == null) { 
         sendData = function (json) {
-            console.log("讀取列表", json)
+            // console.log("讀取列表", json)
             if (json.code && json.code == "0000") {
                 return json.data;
             }