[前台] forge 突擊平面圖原點配合點位顏色

Frontend/_sysMonAll.html

@@ -114,15 +114,16 @@
         let lightOnHotColorArr = [];
         let lightOffHotColorArr = [];
         // 燈光圈用
-    let lightOnGuidArr = [];
+        let deviceNormalArr = [];
-    let lightOffGuidArr = [];
+        let deviceCloseArr = [];
 
         myBaja.setSubscribeDevicesCallBack(function (data) {
-      // console.log(data)
+            console.log("subDevice 開始");
             let matchDevice = allDevList.filter(
                 (x) => x.device_number == data.device_number_full
             )[0];
             if (!matchDevice) {
+                $(loadEle).Loading("close");
                 return false;
             }
 
@@ -146,43 +147,39 @@
                 subData[data.point_name] = data.value;
             }
 
+            // setForgeHotSpotColor(matchDevice);
+
             let norDevPoiName = matchDevice.device_normal_point_name;
             let cloDevPoiName = matchDevice.device_close_point_name;
             let errDevPoiName = matchDevice.device_error_point_name;
 
             if (data.point_name == "SSC" && pageAct.sysSubTag === "L1") {
                 const lightOn = data.value.includes("true");
-
+                setLightOpenOrClose(lightOn, matchDevice);
-        setLightOpenOrClose(lightOn, matchDevice.device_guid);
+                if (lightOn && matchDevice.spriteDbid) {
-        if (lightOn) {
-          setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
-          // changeColorForHotspot(matchDevice.spriteDbid, null, true)
                     if (
                         !lightOnHotColorArr.some(
                             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
                         )
                     ) {
+                        setLightValues(matchDevice.device_node_guid, 200, 0xe1cf18);
                         lightOnHotColorArr.push(matchDevice);
                     }
                     lightOffHotColorArr = lightOffHotColorArr.filter(
                         (light) => light.spriteDbid !== matchDevice.spriteDbid
                     );
-          heatMap?.changeTemp(matchDevice.device_number, 40);
+                } else if (matchDevice.spriteDbid) {
-        } else {
-          setLightValues(matchDevice.device_guid, 0, 0xffffff);
-          // changeColorForHotspot(matchDevice.spriteDbid)
                     if (
                         !lightOffHotColorArr.some(
                             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
                         )
                     ) {
+                        setLightValues(matchDevice.device_node_guid, 0, 0xffffff);
                         lightOffHotColorArr.push(matchDevice);
                     }
                     lightOnHotColorArr = lightOnHotColorArr.filter(
                         (light) => light.spriteDbid !== matchDevice.spriteDbid
                     );
-
-          heatMap?.changeTemp(matchDevice.device_number, 0);
                 }
             }
 
@@ -198,49 +195,100 @@
                     ? parseInt(data.value)
                     : 0;
             }
+
             if (
                 data.point_name == norDevPoiName &&
-        data.value == matchDevice.device_normal_point_value
+                data.value == matchDevice.device_normal_point_value &&
+                !deviceNormalArr.some(
+                    ({ device_number }) => device_number === matchDevice.device_number
+                )
             ) {
                 //顯示正常燈號
                 $(`#${matchDevice.device_number}_status`)
                     .attr("data-light-type", "normal")
                     .data("light-type", "normal");
+
+                deviceNormalArr.push(matchDevice);
+                deviceCloseArr = deviceCloseArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
             } else if (
                 data.point_name == cloDevPoiName &&
-        data.value == matchDevice.device_close_point_value
+                data.value == matchDevice.device_close_point_value &&
+                !deviceCloseArr.some(
+                    ({ device_number }) => device_number === matchDevice.device_number
+                )
             ) {
                 $(`#${matchDevice.device_number}_status`)
                     .attr("data-light-type", "close")
                     .data("light-type", "close");
+
+                deviceCloseArr.push(matchDevice);
+                deviceNormalArr = deviceNormalArr.filter(
+                    (device) => device.spriteDbid !== matchDevice.spriteDbid
+                );
+            }
+
+            if (
+                data.point_name == errDevPoiName &&
+                data.value == matchDevice.device_error_point_value &&
+                !alarmDbIdList.some(
+                    (device) => device.device_number === matchDevice.device_number
+                )
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-error-type", "error")
+                    .data("light-error-type", "error");
+
+                alarmDbIdList.push(matchDevice);
             } else if (
                 data.point_name == errDevPoiName &&
-        data.value == matchDevice.device_error_point_value
+                data.value !== matchDevice.device_error_point_value
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-error-type", "")
+                    .data("light-error-type", "");
+                alarmDbIdList = alarmDbIdList.filter(
+                    (device) => device.device_number !== matchDevice.device_number
+                );
+            }
+
+            if (
+                deviceCloseArr.length === 0 &&
+                alarmDbIdList.some(
+                    (device) => device.device_number === matchDevice.device_number
+                )
             ) {
                 $(`#${matchDevice.device_number}_status`)
                     .attr("data-light-type", "error")
                     .data("light-type", "error");
             }
+
             if (
+                (!pageAct.floTag &&
                     allDevList.length ===
-        lightOnHotColorArr.length + lightOffHotColorArr.length
+                    deviceNormalArr.length + deviceCloseArr.length) ||
+                allDevList.length === deviceNormalArr.length + alarmDbIdList.length
             ) {
                 changeColorForHotspot(
-          lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
+                    deviceNormalArr.map(({ spriteDbid }) => spriteDbid),
                     null,
                     true
                 );
                 changeColorForHotspot(
-          lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
+                    deviceCloseArr.map(({ spriteDbid }) => spriteDbid),
                     null,
                     false
                 );
-
             }
+            changeColorForHotspot(
+                alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
+                "error",
+                false
+            );
             $(loadEle).Loading("close");
 
             setLightColor();
-      setForgeHotSpotColor(matchDevice);
             lightDevForgeSpotLig(matchDevice);
             // 從設備訂閱更新每個設備卡片即時點位
             setDevItemPoiValBySub(data);
@@ -248,166 +296,15 @@
 
         myBaja.setSubscribeDeviceEndCallBack(function (data) {
             endPageLoading();
-      if (data.findIndex((x) => x.point_name == "Temp") != -1) {
+            if (data.findIndex((x) => x.point_name == "CO2") != -1) {
+                // 顯示溫度條
+                showHeatCO2("[name=forgeHeatBar]");
+            } else if (data.findIndex((x) => x.point_name == "Temp" || x.point_name == "TEMP") != -1) {
                 // 顯示溫度條
                 showHeat("[name=forgeHeatBar]");
             }
         });
     }
-  // function subDevice() {
-  //   let myBaja = new subscriptionDevices();
-  //   var ordPath = {
-  //     area_tag: pageAct.AreaTag,
-  //     building_tag: pageAct.buiTag,
-  //     system_tag: pageAct.sysMainTag,
-  //     name_tag: pageAct.sysSubTag,
-  //   };
-  //   myBaja.setSubscribeDevicesByBql(ordPath);
-
-  //   // 燈熱點用
-  //   let lightOnHotColorArr = [];
-  //   let lightOffHotColorArr = [];
-  //   // 燈光圈用
-  //   let lightOnGuidArr = [];
-  //   let lightOffGuidArr = [];
-
-  //   myBaja.setSubscribeDevicesCallBack(function (data) {
-  //     // console.log(data)
-  //     let matchDevice = allDevList.filter(
-  //       (x) => x.device_number == data.device_number_full
-  //     )[0];
-  //     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 subData = subDeviceData.filter(
-  //       (x) => x.device_number == matchDevice.device_number
-  //     )[0];
-
-  //     if (subData) {
-  //       subData[data.point_name] = data.value;
-  //     }
-
-  //     let norDevPoiName = matchDevice.device_normal_point_name;
-  //     let cloDevPoiName = matchDevice.device_close_point_name;
-  //     let errDevPoiName = matchDevice.device_error_point_name;
-
-  //     if (data.point_name == "ONOFF" && pageAct.sysSubTag === "L1") {
-  //       const lightOn = data.value.includes("true");
-
-  //       setLightOpenOrClose(lightOn, matchDevice.device_guid);
-  //       if (lightOn) {
-  //         setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
-  //         // changeColorForHotspot(matchDevice.spriteDbid, null, true)
-  //         if (
-  //           !lightOnHotColorArr.some(
-  //             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-  //           )
-  //         ) {
-  //           lightOnHotColorArr.push(matchDevice);
-  //         }
-  //         lightOffHotColorArr = lightOffHotColorArr.filter(
-  //           (light) => light.spriteDbid !== matchDevice.spriteDbid
-  //         );
-  //         heatMap?.changeTemp(matchDevice.device_number, 40);
-  //       } else {
-  //         setLightValues(matchDevice.device_guid, 0, 0xffffff);
-  //         // changeColorForHotspot(matchDevice.spriteDbid)
-  //         if (
-  //           !lightOffHotColorArr.some(
-  //             ({ spriteDbid }) => spriteDbid === matchDevice.spriteDbid
-  //           )
-  //         ) {
-  //           lightOffHotColorArr.push(matchDevice);
-  //         }
-  //         lightOnHotColorArr = lightOnHotColorArr.filter(
-  //           (light) => light.spriteDbid !== matchDevice.spriteDbid
-  //         );
-
-  //         heatMap?.changeTemp(matchDevice.device_number, 0);
-  //       }
-  //     }
-
-  //     if (data.point_name == "Temp") {
-  //       heatMap?.changeTemp(
-  //         data.device_number_full,
-  //         !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0
-  //       );
-  //       let devIdx = allDevList.findIndex(
-  //         (x) => x.device_number == data.device_number_full
-  //       );
-  //       allDevList[devIdx]._temp = !isNaN(parseInt(data.value))
-  //         ? parseInt(data.value)
-  //         : 0;
-  //     }
-  //     if (
-  //       data.point_name == norDevPoiName &&
-  //       data.value == matchDevice.device_normal_point_value
-  //     ) {
-  //       //顯示正常燈號
-  //       $(`#${matchDevice.device_number}_status`)
-  //         .attr("data-light-type", "normal")
-  //         .data("light-type", "normal");
-  //     } else if (
-  //       data.point_name == cloDevPoiName &&
-  //       data.value == matchDevice.device_close_point_value
-  //     ) {
-  //       $(`#${matchDevice.device_number}_status`)
-  //         .attr("data-light-type", "close")
-  //         .data("light-type", "close");
-  //     } 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");
-  //     }
-  //     if (
-  //       allDevList.length ===
-  //       lightOnHotColorArr.length + lightOffHotColorArr.length
-  //     ) {
-  //       changeColorForHotspot(
-  //         lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
-  //         null,
-  //         true
-  //       );
-  //       changeColorForHotspot(
-  //         lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
-  //         null,
-  //         false
-  //       );
-
-  //     }
-  //     $(loadEle).Loading("close");
-
-  //     setLightColor();
-  //     setForgeHotSpotColor(matchDevice);
-  //     lightDevForgeSpotLig(matchDevice);
-  //     // 從設備訂閱更新每個設備卡片即時點位
-  //     setDevItemPoiValBySub(data);
-  //   });
-
-  //   myBaja.setSubscribeDeviceEndCallBack(function (data) {
-  //     endPageLoading();
-  //     if (data.findIndex((x) => x.point_name == "Temp") != -1) {
-  //       // 顯示溫度條
-  //       showHeat("[name=forgeHeatBar]");
-  //     }
-  //   });
-  // }
 
     function lightDevForgeSpotLig(devObj) { }
 
@@ -561,9 +458,9 @@
                         endPageLoading();
                     } else {
                         // 訂閱 baja 設備
-            if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
+                        // if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
-              subDevice();
+                        //   subDevice();
-            }
+                        // }
                     }
 
                     // 繪製 html
@@ -821,14 +718,14 @@
                             .map((y) => x)
                     );
 
-          for (let sub of stSubArr) {
+                    // for (let sub of stSubArr) {
-            let matchDevice = allDevList.filter(
+                    //   let matchDevice = allDevList.filter(
-              (x) => x.device_number == sub[0]?.device_number
+                    //     (x) => x.device_number == sub[0]?.device_number
-            )[0];
+                    //   )[0];
-            if (matchDevice) {
+                    //   if (matchDevice) {
-              setForgeHotSpotColor(matchDevice);
+                    //     setForgeHotSpotColor(matchDevice);
-            }
+                    //   }
-          }
+                    // }
                 }
                 if (pageAct.sysSubTag == "W2") {
                     // console.log("@@",pageAct, pageAct.sub_system_tag)
@@ -992,11 +889,14 @@
             allDevList.forEach((dev, idx) => {
                 if (dev.device_number == devNum) {
                     dev.spriteDbid = dbid;
-          setForgeHotSpotColor(dev);
+                    // setForgeHotSpotColor(dev);
                 }
             });
             $(ele).data("dbId", dbid);
         });
+        if (pageAct.sysSubTag !== "L1" && pageAct.sysSubTag !== "M12") {
+            subDevice();
+        }
     });
 
     onEvent("yt:tooltip:show", "[name=devItem]", function (e, obj) {

Frontend/_sysMonFloor.html

@@ -16,10 +16,8 @@
 </div> -->
 <div class="d-flex">
     <div class="col-6 my-3">
-    <div
+        <div id="floChart"
-      id="floChart"
+             style="height: 100%; width: 100%; background-color: #fff"></div>
-      style="height: 100%; width: 100%; background-color: #fff"
-    ></div>
     </div>
     <div class="col-6 my-3">
         <!-- <div id="forgeViewer" class="position-relative" style="height:100%">
@@ -27,11 +25,9 @@
               </div>
             </div> -->
         <div id="forgeViewer" class="position-relative" style="height: 80vh">
-      <div
+            <div id="forgeHeatBarDiv"
-        id="forgeHeatBarDiv"
                  class="d-flex mb-4 position-absolute"
-        style="gap: 15px"
+                 style="gap: 15px"></div>
-      ></div>
         </div>
     </div>
 </div>
@@ -47,6 +43,7 @@
     var zoomToggle = 1.3;
     $(function () {
         $(loadEle).Loading("start");
+        alarmDbIdList = [];
         $("#topLight").html(setTopLight());
         setLightColor();
         initChart();
@@ -446,7 +443,7 @@
                         });
                         cData._dbId = dbid;
                         cData.spriteDbid = dbid;
-            setForgeHotSpotColor(cData);
+                        // setForgeHotSpotColor(cData);
                     });
                 });
                 floChart.setOption(option);
@@ -540,6 +537,7 @@
                 (x) => x.device_number == data.device_number_full
             )[0];
             if (!matchDevice) {
+                $(loadEle).Loading("close");
                 return false;
             }
             //將訂閱值塞入 subDeviceData
@@ -600,9 +598,36 @@
                     heatMap?.changeTemp(matchDevice.device_number, 0);
                 }
             }
+
+            if (
+                data.point_name == errDevPoiName &&
+                data.value !== matchDevice.device_error_point_value &&
+                alarmDbIdList.some(
+                    ({ device_number }) => matchDevice.device_number === device_number
+                )
+            ) {
+                alarmDbIdList = alarmDbIdList.filter(
+                    ({ device_number }) => matchDevice.device_number === device_number
+                );
+            } else if (
+                data.point_name == errDevPoiName &&
+                data.value == matchDevice.device_error_point_value &&
+                !alarmDbIdList.some(
+                    ({ device_number }) => matchDevice.device_number === device_number
+                )
+            ) {
+                $(`#${matchDevice.device_number}_status`)
+                    .attr("data-light-type", "error")
+                    .data("light-type", "error");
+                alarmDbIdList.push(matchDevice);
+            }
+
             if (
                 data.point_name == norDevPoiName &&
-        data.value == matchDevice.device_normal_point_value
+                data.value == matchDevice.device_normal_point_value &&
+                !deviceScatterNormalArr.some(
+                    ({ device_number }) => data.device_number_full === device_number
+                )
             ) {
                 //顯示正常燈號
                 $(`#${matchDevice.device_number}_status`)
@@ -612,83 +637,56 @@
                 deviceScatterCloseArr = deviceScatterCloseArr.filter(
                     (device) => device.spriteDbid !== matchDevice.spriteDbid
                 );
-        deviceScatterErrorArr = deviceScatterErrorArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
             } else if (
                 data.point_name == cloDevPoiName &&
-        data.value == matchDevice.device_close_point_value
+                data.value == matchDevice.device_close_point_value &&
+                !deviceScatterCloseArr.some(
+                    ({ device_number }) => data.device_number_full === device_number
+                )
             ) {
                 $(`#${matchDevice.device_number}_status`)
                     .attr("data-light-type", "close")
                     .data("light-type", "close");
                 deviceScatterCloseArr.push(matchDevice);
-
                 deviceScatterNormalArr = deviceScatterNormalArr.filter(
                     (device) => device.spriteDbid !== matchDevice.spriteDbid
                 );
-        deviceScatterErrorArr = deviceScatterErrorArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-      } 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");
-        deviceScatterErrorArr.push(matchDevice);
-        deviceScatterNormalArr = deviceScatterNormalArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
-        deviceScatterCloseArr = deviceScatterCloseArr.filter(
-          (device) => device.spriteDbid !== matchDevice.spriteDbid
-        );
             }
+
+            if (pageAct.sysSubTag === "L1" && lightControl === "node") {
+                alarmDbIdList = alarmDbIdList.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+
+                deviceScatterNormalArr = deviceScatterNormalArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+                deviceScatterCloseArr = deviceScatterCloseArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+
+                lightOnHotColorArr = lightOnHotColorArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+                lightOffHotColorArr = lightOffHotColorArr.filter(
+                    ({ device_node_guid }) =>
+                        device_node_guid !== undefined && device_node_guid !== null
+                );
+            }
+
             if (
-        option.series[0].data.length ===
+                deviceScatterCloseArr.length + deviceScatterNormalArr.length ===
-        lightOnHotColorArr.length + lightOffHotColorArr.length
+                option.series[0].data.length ||
-      ) {
-        lightOnHotColorArr.forEach((light) => {
-          const cur = option.series[0].data.find(
-            ({ device_number }) => device_number === light.device_number
-          );
-
-          const onColor = currentData.find(
-            ({ device_number }) => device_number === light.device_number
-          ).device_normal_color;
-          cur.itemStyle = { color: onColor };
-        });
-
-        lightOffHotColorArr.forEach((light) => {
-          const cur = option.series[0].data.find(
-            ({ device_number }) => device_number === light.device_number
-          );
-          const offColor = currentData.find(
-            ({ device_number }) => device_number === light.device_number
-          ).device_close_color;
-          cur.itemStyle = { color: offColor };
-        });
-
-        floChart.setOption(option);
-
-        changeColorForHotspot(
-          lightOnHotColorArr.map(({ spriteDbid }) => spriteDbid),
-          null,
-          true
-        );
-        changeColorForHotspot(
-          lightOffHotColorArr.map(({ spriteDbid }) => spriteDbid),
-          null,
-          false
-        );
-        $(loadEle).Loading("close");
-      } else if (
                 deviceScatterCloseArr.length +
                 deviceScatterNormalArr.length +
-          deviceScatterErrorArr.length ===
+                alarmDbIdList.length ===
                 option.series[0].data.length
             ) {
+                deviceScatterNormalArr.length &&
                     deviceScatterNormalArr.forEach((device) => {
                         const cur = option.series[0].data.find(
                             ({ device_number }) => device_number === device.device_number
@@ -697,9 +695,18 @@
                         const normalColor = currentData.find(
                             ({ device_number }) => device_number === device.device_number
                         ).device_normal_color;
+                        if (cur) {
                             cur.itemStyle = { color: normalColor };
+                        }
                     });
 
+                changeColorForHotspot(
+                    deviceScatterNormalArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    true
+                );
+
+                deviceScatterCloseArr.length &&
                     deviceScatterCloseArr.forEach((device) => {
                         const cur = option.series[0].data.find(
                             ({ device_number }) => device_number === device.device_number
@@ -707,22 +714,37 @@
                         const closeColor = currentData.find(
                             ({ device_number }) => device_number === device.device_number
                         ).device_close_color;
+                        if (cur) {
                             cur.itemStyle = { color: closeColor };
+                        }
                     });
 
-        deviceScatterErrorArr.forEach((device) => {
+                changeColorForHotspot(
+                    deviceScatterCloseArr.map(({ spriteDbid }) => spriteDbid),
+                    null,
+                    false
+                );
+
+                alarmDbIdList.length &&
+                    alarmDbIdList.forEach((device) => {
                         const cur = option.series[0].data.find(
                             ({ device_number }) => device_number === device.device_number
                         );
-
                         const errColor = currentData.find(
                             ({ device_number }) => device_number === device.device_number
-          ).device_error_color;
+                        )?.device_error_color;
+
+                        if (cur) {
                             cur.itemStyle = { color: errColor };
+                        }
                     });
+                changeColorForHotspot(
+                    alarmDbIdList.map(({ spriteDbid }) => spriteDbid),
+                    "error",
+                    false
+                );
 
                 floChart.setOption(option);
-        setForgeHotSpotColor(matchDevice);
                 $(loadEle).Loading("close");
             }
         });
@@ -1595,7 +1617,6 @@
                 });
             };
         }
-
         if (pageAct.sysSubTag === "M12" && !elevatorShow) {
             let sensorObjs = [];
             addHotPoint(viewer);

Frontend/index.html

@@ -1559,12 +1559,6 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             }
 
             function controlFocusHotspot(dbId, open = true) {
-        pageAct.sysSubTag !== "L1" &&
-          pageAct.sysSubTag !== "M12" &&
-          console.log("dbId", dbId);
-        pageAct.sysSubTag !== "L1" &&
-          pageAct.sysSubTag !== "M12" &&
-          changeColorForHotspot(dbId, open ? "focus" : null);
                 changeScaleForHotspot(dbId, open);
             }
 
@@ -1630,11 +1624,11 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                     "<'scrolledTable'tpi>"
                 );
             }
-
             //根據 data-type 設置顏色 (判斷後台是否有設定，若無則帶預設)
             function setLightColor() {
                 $("[data-light-type]").each((index, ele) => {
                     let type = $(ele).data("light-type");
+                    let errType = $(ele).data("light-error-type");
                     let isFlashing = false;
                     let color = "#000";
                     switch (type) {
@@ -1651,11 +1645,19 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                             isFlashing = pageAct.sysSubObj.device_close_flashing == "1";
                             break;
                         case "error":
+
+                            color =
+                                pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
+                            // isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
+                            break;
+                    }
+
+                    if (errType === "error") {
                         color =
                             pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
                         isFlashing = pageAct.sysSubObj.device_error_flashing == "1";
-              break;
                     }
+
                     $(ele).css("background-color", color);
                     //是否閃爍
                     if (isFlashing) {
@@ -1738,6 +1740,7 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
             pageAct.sysSubTag = $(obj).data("subSysObj").sub_system_tag;
             pageAct.sysSubName = $(obj).data("subSysObj").full_name;
             pageAct.sysSubObj = $(obj).data("subSysObj");
+            console.log(" pageAct.sysSubObj", pageAct.sysSubObj)
             getDevItem();
         }
 

Frontend/js/forge/forgemodel.js

@@ -922,9 +922,9 @@ async function addHotPoint(data) {
         return;
     } else {
         spriteColor = new THREE.Color(0xffffff);
-        spriteIcon = "/file/img/forge/hotspot.svg";
+        spriteIcon = "/file/img/forge/sensor_circle.svg";
         if (location.href.indexOf("localhost:5966") != -1) {
-            spriteIcon = "/img/forge/hotspot.svg";
+            spriteIcon = "/img/forge/sensor_circle.svg";
         }
     }
 
@@ -973,7 +973,7 @@ async function addHotPoint(data) {
                 // console.log(`Sprite clicked: ${event.dbId}`);
 
                 for (let i = dbIdStart; i <= myDataList.length + 10; i++) {
-                    !alarmDbIdList.some((dbId) => dbId == i) &&
+                    !alarmDbIdList.some(({ spriteDbid }) => spriteDbid == i) &&
                         pageAct.sysSubTag !== "L1" &&
                         changeColorForHotspot(i);
                     changeScaleForHotspot(i, true);
@@ -990,7 +990,7 @@ async function addHotPoint(data) {
                 }
                 $(selector).trigger("autodesk:click:sprite", { event, myData });
             } else {
-                !alarmDbIdList.some((dbId) => dbId == i) &&
+                !alarmDbIdList.some(({ spriteDbid }) => spriteDbid == event.dbId) &&
                     pageAct.sysSubTag !== "L1" &&
                     changeColorForHotspot(event.dbId, null);
                 changeScaleForHotspot(event.dbId, false);
@@ -1038,25 +1038,47 @@ async function addHotPoint(data) {
     //}
 }
 
+//hex -> rgbsensor_circle
+function hexToRgb(hex) {
+    return (
+        "rgb(" +
+        parseInt("0x" + hex.slice(1, 3)) +
+        "," +
+        parseInt("0x" + hex.slice(3, 5)) +
+        "," +
+        parseInt("0x" + hex.slice(5, 7)) +
+        ")"
+    );
+}
+
 // 熱點 更換顏色
-async function changeColorForHotspot(dbId, type = null, lightOn = false) {
+async function changeColorForHotspot(dbId, type = null, OnOff = false) {
     const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
     let spriteColorFocus = new THREE.Color(0xffffff);
-    if (pageAct.sysSubTag == "L1") {
+
-        spriteColorFocus = lightOn
+    spriteColorFocus = OnOff
-            ? new THREE.Color(0xffd524)
+        ? pageAct.sysSubObj.device_normal_color
-            : new THREE.Color(0x40525e);
+            ? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_normal_color))
-        if (lightOn) {
+            : new THREE.Color(0xffffff)
-            console.log(dbId);
+        : pageAct.sysSubObj.device_close_color
-        }
+            ? new THREE.Color(hexToRgb(pageAct.sysSubObj.device_close_color))
-    } else if (type == "focus" && pageAct.sysSubTag !== "M12") {
+            : new THREE.Color(0xffffff);
+
+    if (type == "focus") {
         spriteColorFocus = new THREE.Color(0x00ffe1);
     } else if (type == "error") {
-        spriteColorFocus = new THREE.Color(0xff0000);
+        spriteColorFocus = new THREE.Color(
+            hexToRgb(pageAct.sysSubObj.device_error_color)
+        );
+        spriteErrIcon = baseForgeApiUrl + "/file/img/forge/sensor_circle.svg";
+        if (location.href.indexOf("localhost:5966") != -1) {
+            spriteErrIcon = baseForgeApiUrl + "/img/forge/sensor_circle.svg";
+        }
     }
     const viewablesToUpdate = dbId;
     dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
         return {
+            url: "/file/img/forge/sensor_circle.svg",
             color: spriteColorFocus,
         };
     });

Frontend/js/site.js

@@ -954,26 +954,24 @@ class Forge3DSensor {
         this.DataVizCore = null;
         this.tempVal = 20;
         this.curDevice = option.curDevice ?? null;
-    this.deviceList = option.deviceList ?? null;
         this.selector = option.selector ?? "#forgeViewer";
         this.elevCb = option.elevCb ?? null;
+        this.deviceList = option.deviceList ?? null;
         this.#init();
     }
 
-  static sensorTimes = 0;
-
     #init = async function () {
         // 系統大類、小類固定
         this.ordPath.system_tag = this.sysMainTag;
         this.ordPath.name_tag = this.sysSubTag;
-    // this.dataVizExtn = await this.viewer.loadExtension(
+        this.dataVizExtn = await this.viewer.loadExtension(
-    //   "Autodesk.DataVisualization"
+            "Autodesk.DataVisualization"
-    // );
+        );
-    // this.DataVizCore = Autodesk.DataVisualization.Core;
+        this.DataVizCore = Autodesk.DataVisualization.Core;
         await this.registerHotPoint();
-    this.addSensorHotspotList(this.curDevice.forge_dbid, 35);
+        this.changeColorForSensorHotspot(this.curDevice.forge_dbid, 35);
-    this.subSensorDevice();
         this.elevCb && this.elevCb();
+        this.subSensorDevice();
     };
 
     // // 建立熱點
@@ -986,30 +984,29 @@ class Forge3DSensor {
     // }
 
     async registerHotPoint(color = "") {
-    if (Forge3DSensor.sensorTimes === 1) {
         var viewer = this.viewer;
-      const dataVizExtn = await viewer.loadExtension(
+        const viewableType = this.DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
-        "Autodesk.DataVisualization"
-      );
-      const DataVizCore = Autodesk.DataVisualization.Core;
-      const viewableType = DataVizCore.ViewableType.SPRITE; //DataVizCore.ViewableType.SPRITE;
         const spriteColor = new THREE.Color(0xff8c00);
         // const highlightedColor = new THREE.Color(0xe0e0ff);
         let spriteIcon = "/file/img/forge/sensor_circle.svg";
         if (location.href.indexOf("localhost:5966") != -1) {
             spriteIcon = "/img/forge/sensor_circle.svg";
         }
-      const style = new DataVizCore.ViewableStyle(
+        const style = new this.DataVizCore.ViewableStyle(
             viewableType,
             spriteColor,
             spriteIcon
         );
-      const viewableData = new DataVizCore.ViewableData();
+
+        const viewableData = new this.DataVizCore.ViewableData();
         viewableData.spriteSize = 30; // Sprites as points of size 24 x 24 pixels
-      this.deviceList.forEach((myData, index) => {
+        // console.log(this.curDevice, [this.curDevice])
+
+        [this.curDevice].forEach((myData, index) => {
+            // console.log(myData)
             const dbId = myData.forge_dbid;
             const myPosition = myData.position;
-        const viewable = new DataVizCore.SpriteViewable(
+            const viewable = new this.DataVizCore.SpriteViewable(
                 myPosition,
                 style,
                 dbId
@@ -1017,26 +1014,28 @@ class Forge3DSensor {
             myData._dbId = dbId;
             viewableData.addViewable(viewable);
         });
+        // console.log(viewableData)
         await viewableData.finish();
-      dataVizExtn.addViewables(viewableData);
+        this.dataVizExtn.addViewables(viewableData);
+        // console.log("1",this.dataVizExtn)
         viewer.addEventListener(
-        DataVizCore.MOUSE_CLICK,
+            this.DataVizCore.MOUSE_CLICK,
             this.onSpriteClicked.bind(this)
         ); // SPRITE_SELECTED
         // viewer.addEventListener(this.DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut.bind(this));
     }
-  }
     // ---------------- 熱點點擊事件 --------------------
     onSpriteClicked(event) {
+        console.log(event);
         event.hasStopped = true;
         const dbIdStart = 10;
         if (event != undefined && event != null) {
             if (event.dbId >= dbIdStart) {
-        let myData = this.deviceList.find((x) => x.forge_dbid == event.dbId);
+                let myData = [this.curDevice].filter(
-        console.log("site", myData);
+                    (x) => x.forge_dbid == event.dbId
-        // this.changeColorForSensorHotspot(event.dbId, this.tempVal);
+                )[0];
-        myData && moveViewToDevice(myData.forge_dbid); //移動視角至該設備
+                this.changeColorForSensorHotspot(event.dbId, this.tempVal);
-        myData &&
+                moveViewToDevice(myData.forge_dbid); //移動視角至該設備
                 $(this.selector).trigger("autodesk:click:sprite", { event, myData });
             } else {
                 $(this.selector).trigger("autodesk:clickOut:sprite", { event });
@@ -1046,10 +1045,8 @@ class Forge3DSensor {
 
     // 改變熱點位置
     async changePos(dbId, positionZ) {
-    const dataVizExtn = await viewer.loadExtension(
+        // const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization") || this.dataVizExtn;
-      "Autodesk.DataVisualization"
+        this.dataVizExtn?.invalidateViewables(dbId, (viewable) => {
-    );
-    dataVizExtn?.invalidateViewables(dbId, (viewable) => {
             // console.log(viewable._position)
             const z = viewable._position.z + positionZ;
             const newPos = { ...viewable._position, z };
@@ -1060,99 +1057,68 @@ class Forge3DSensor {
         });
     }
 
-  // 溫度感測器 sprite 隨溫度變化
+    // 熱點 更換顏色---環境感知器
-  static lowerTempForSensor = [];
+    async changeColorForSensorHotspot(dbId, temp, type = "") {
-  static normalTempForSensor = [];
+        // const dataVizExtn = await viewer.loadExtension("Autodesk.DataVisualization");
-  static highTempForSensor = [];
-  static highestTempForSensor = [];
-
-  async addSensorHotspotList(dbid, temp) {
-    let index = Math.floor(temp / 10) - 1 || 0;
-
-    // 清空資料
-    Forge3DSensor.lowerTempForSensor = Forge3DSensor.lowerTempForSensor.filter(
-      (point) => point !== dbid
-    );
-    Forge3DSensor.normalTempForSensor =
-      Forge3DSensor.normalTempForSensor.filter((point) => point !== dbid);
-    Forge3DSensor.highTempForSensor = Forge3DSensor.highTempForSensor.filter(
-      (point) => point !== dbid
-    );
-    Forge3DSensor.highestTempForSensor =
-      Forge3DSensor.highestTempForSensor.filter((point) => point !== dbid);
-
         const temps = [
             new THREE.Color(0x00009c),
             new THREE.Color(0xffff31),
             new THREE.Color(0xff8c00),
             new THREE.Color(0xff0000),
         ];
-
+        let index = Math.floor(temp / 10) - 1 || 0;
-    switch (index) {
+        if (index > 3) {
-      case -1:
+            index = 3;
-        Forge3DSensor.lowerTempForSensor.push(dbid);
-        break;
-      case 0:
-        Forge3DSensor.lowerTempForSensor.push(dbid);
-        break;
-      case 1:
-        Forge3DSensor.normalTempForSensor.push(dbid);
-        break;
-      case 2:
-        Forge3DSensor.highTempForSensor.push(dbid);
-        break;
-      case 3:
-        Forge3DSensor.highestTempForSensor.push(dbid);
-        break;
-      default:
-        Forge3DSensor.highTempForSensor.push(dbid);
-        break;
         }
-    if (
+        const viewablesToUpdate = dbId;
-      (Forge3DSensor.lowerTempForSensor.length,
+        let color = temps[index];
-        Forge3DSensor.normalTempForSensor.length,
+        // debugger
-        Forge3DSensor.highTempForSensor.length,
+        // this.registerHotPoint(color)
-        Forge3DSensor.highestTempForSensor.length,
+        //   const _this=this
-        allDevList.length)
+        //   setInterval(() => {
-    ) {
+        //     _this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
-      await this.changeColorForSensorHotspot(
+        //         return { color: color };
-        Forge3DSensor.lowerTempForSensor,
+        //     });
-        temps[0]
+        //     // sceneUpdated(true)
-      );
+        // }, 1000);
-      await this.changeColorForSensorHotspot(
+        if (type == "error") {
-        Forge3DSensor.normalTempForSensor,
+            color = new THREE.Color(0xff0000);
-        temps[1]
-      );
-      await this.changeColorForSensorHotspot(
-        Forge3DSensor.highTempForSensor,
-        temps[2]
-      );
-      await this.changeColorForSensorHotspot(
-        Forge3DSensor.highestTempForSensor,
-        temps[3]
-      );
         }
-  }
+        this.dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
-
-  async changeColorForSensorHotspot(viewablesToUpdate, color) {
-    const dataVizExtn = await viewer.loadExtension(
-      "Autodesk.DataVisualization"
-    );
-    dataVizExtn.invalidateViewables(viewablesToUpdate, (viewable) => {
             return {
                 color: color,
             };
         });
+        // debugger
+        // console.log("3", this.dataVizExtn)
     }
 
+    static deviceScatterNormalArr = [];
+    static deviceScatterCloseArr = [];
+    static deviceScatterErrorArr = [];
+
+    static deviceNormalArr = [];
+    static deviceCloseArr = [];
+
     // 訂閱sensor設備
     subSensorDevice() {
+        // console.log("sensor 訂閱")
+        // require(["baja!"], (baja)=>{
+        //   const sub = new baja.subscriber();
+        //   sub.attach("changed",function(){
+        //     console.log(this)
+        //   })
+        //   baja.Ord.make("local:|foxs:|station:|slot:/TPE/B1/ME/M12/U1F/NA/TH/N1/TEMP").get({subscribe: sub})
+        // })
+
         let myBaja = new subscriptionDevices();
         myBaja.setSubscribeDevicesByBql(this.ordPath);
 
         myBaja.setSubscribeDevicesCallBack((data) => {
+            // console.log(data)
             this.bajaChaCallback ? this.bajaChaCallback(data) : "";
             if (this.curDevice == null) {
+                $(loadEle).Loading("close");
                 return false;
             }
 
@@ -1170,64 +1136,147 @@ class Forge3DSensor {
                 this.subDeviceData.push(obj);
             }
             let subData = this.subDeviceData.find(
-        (x) => x.device_number == this.curDevice.id
+                (x) =>
+                    x.device_number == this.curDevice.id ||
+                    x.device_number == "TPE_B1_ME_M12_R2F_NA_TH_N1"
             );
 
             if (subData) {
-        subData = { ...subData, [data.point_name]: data.value };
+                subData[data.point_name] = data.value;
             }
+            let norDevPoiName = this.curDevice.device_normal_point_name;
+            let cloDevPoiName = this.curDevice.device_close_point_name || "";
+            let errDevPoiName = this.curDevice.device_error_point_name;
 
             if (data.point_name == "Temp" || data.point_name == "TEMP") {
                 this.tempVal = !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0;
-        this.curDevice = {
+                // this.heatMap?.changeTemp(
-          ...this.curDevice,
+                //   this.curDevice.id,
-          temp: !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
+                //   !isNaN(parseInt(data.value)) ? parseInt(data.value) : 0,
-        };
+                // );
-
+                this.curDevice.temp = this.tempVal;
-        if (data.device_number_full === this.curDevice.id) {
+                if (
-          this.addSensorHotspotList(
+                    subData &&
+                    subData[this.curDevice.device_error_point_name] ==
+                    this.curDevice.device_error_point_value
+                ) {
+                    this.changeColorForSensorHotspot(
                         this.curDevice.forge_dbid,
-            this.curDevice.temp
+                        this.curDevice.temp,
+                        "error"
+                    );
+                } else {
+                    this.changeColorForSensorHotspot(
+                        this.curDevice.forge_dbid,
+                        parseInt(data.value)
                     );
                 }
+                // changeColorForSensorHotspot(this.curDevice.forge_dbid, parseInt(data.value))
             }
 
-      let matchDevice = allDevList.find(
-        (x) => x.device_number == data.device_number_full
-      );
-
-      let norDevPoiName = matchDevice.device_normal_point_name;
-      let cloDevPoiName = matchDevice.device_close_point_name;
-      let errDevPoiName = matchDevice.device_error_point_name;
             if (
                 data.point_name == norDevPoiName &&
-        data.value == matchDevice.device_normal_point_value
+                data.value == this.curDevice.device_normal_point_value &&
+                !Forge3DSensor.deviceNormalArr.some(
+                    ({ device_number }) => device_number === this.curDevice.device_number
+                )
             ) {
-
                 //顯示正常燈號
-        $(`#${matchDevice.device_number}_status`)
+                $(`#${this.curDevice.device_number}_status`)
                     .attr("data-light-type", "normal")
                     .data("light-type", "normal");
+
+                Forge3DSensor.deviceNormalArr.push(this.curDevice);
+                Forge3DSensor.deviceCloseArr = Forge3DSensor.deviceCloseArr.filter(
+                    (device) => device.spriteDbid !== this.curDevice.spriteDbid
+                );
             } else if (
                 data.point_name == cloDevPoiName &&
-        data.value == matchDevice.device_close_point_value
+                data.value == this.curDevice.device_close_point_value &&
+                !Forge3DSensor.deviceCloseArr.some(
+                    ({ device_number }) => device_number === this.curDevice.device_number
+                )
             ) {
-
+                $(`#${this.curDevice.device_number}_status`)
-        $(`#${matchDevice.device_number}_status`)
                     .attr("data-light-type", "close")
                     .data("light-type", "close");
+
+                Forge3DSensor.deviceCloseArr.push(this.curDevice);
+                Forge3DSensor.deviceNormalArr = Forge3DSensor.deviceNormalArr.filter(
+                    (device) => device.spriteDbid !== this.curDevice.spriteDbid
+                );
+            }
+
+            if (
+                data.point_name == errDevPoiName &&
+                data.value == this.curDevice.device_error_point_value &&
+                !alarmDbIdList.some(
+                    (device) => device.device_number === this.curDevice.device_number
+                )
+            ) {
+                $(`#${this.curDevice.device_number}_status`)
+                    .attr("data-light-error-type", "error")
+                    .data("light-error-type", "error");
+
+                alarmDbIdList.push(this.curDevice);
             } else if (
                 data.point_name == errDevPoiName &&
-        data.value == matchDevice.device_error_point_value
+                data.value !== this.curDevice.device_error_point_value
             ) {
-        $(`#${matchDevice.device_number}_status`)
+                $(`#${this.curDevice.device_number}_status`)
+                    .attr("data-light-error-type", "")
+                    .data("light-error-type", "");
+                alarmDbIdList = alarmDbIdList.filter(
+                    (device) => device.device_number !== this.curDevice.device_number
+                );
+            }
+
+            if (
+                Forge3DSensor.deviceCloseArr.length === 0 &&
+                alarmDbIdList.some(
+                    (device) => device.device_number === this.curDevice.device_number
+                )
+            ) {
+                $(`#${this.curDevice.device_number}_status`)
                     .attr("data-light-type", "error")
                     .data("light-type", "error");
             }
-
             setLightColor();
-      setDevItemPoiValBySub(data);
+
+            if (pageAct.floTag) {
+                const option = floChart.getOption();
+
+                if (!alarmDbIdList.some(a => a.device_number === this.curDevice.device_number)) {
+                    this.deviceList.forEach((device) => {
+                        const cur = option.series[0].data.find(
+                            ({ device_number }) => device_number === device.device_number
+                        );
+
+                        const normalColor = currentData.find(
+                            ({ device_number }) => device_number === device.device_number
+                        ).device_normal_color;
+                        if (cur) {
+                            cur.itemStyle = { color: normalColor };
+                        }
+                    });
+                } else {
+                    alarmDbIdList.forEach((device) => {
+                        const cur = option.series[0].data.find(
+                            ({ device_number }) => device_number === device.device_number
+                        );
+                        const errColor = currentData.find(
+                            ({ device_number }) => device_number === device.device_number
+                        )?.device_error_color;
+
+                        if (cur) {
+                            cur.itemStyle = { color: errColor };
+                        }
+                    });
+                }
+                floChart.setOption(option);
+            }
             $(loadEle).Loading("close");
+            setDevItemPoiValBySub(data);
         });
 
         myBaja.setSubscribeDeviceEndCallBack((data) => {