平面圖原點訂閱及顏色變化

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>
@@ -44,8 +40,9 @@
   var allDeviceRowData = []; //所有設備原始資料
   var global_emergency_alarm_device_number = [];
   var lightControl = "device"; // device 群控 node 燈控
-  var zoomToggle = 3;
+  var zoomToggle = 1.3;
   $(function () {
+    $(loadEle).Loading("start");
     initChart();
     getFloData();
     drawHeatBar();
@@ -196,7 +193,6 @@
     //} else {
     //    $("#datatablediv").hide();
     //}
-    resetData();
   }
 
   function initChart() {
@@ -242,12 +238,12 @@
           roam: true,
           scaleLimit: {
             //限制放大縮小倍數
-            max: 16,
+            max: 2,
             min: 1,
           },
           layoutSize: "100%",
           layoutCenter: [],
-          zoom: 1.2,
+          zoom: 1.1,
           silent: true,
         },
         series: [
@@ -362,6 +358,7 @@
         currentData.length > 0
       ) {
         resetData();
+        subDevice();
       }
 
       var ordPath = {
@@ -372,7 +369,6 @@
       //myBaja.setSubscribeDevicesCallBack(subscribeCallBack);
       let parentEle = null;
       floChart.on("click", function (params) {
-        console.log("Click1", params);
         forgeUnFocusAll();
         chartUnFocusAll();
         if (params.componentType == "series") {
@@ -418,7 +414,6 @@
       });
 
       onEvent("autodesk:complete:sprite", "#forgeViewer", function (e, obj) {
-        console.log(obj.myDataList);
         let option = floChart.getOption();
 
         option.series.forEach(function (series) {
@@ -476,8 +471,10 @@
       // })
       floChart.on("georoam", function (params) {
         var zoom = floChart.getOption().geo[0].zoom;
+        const option = floChart.getOption();
+        console.log("georoam", zoom);
 
-        if (zoom <= 2.5) {
+        if (zoom <= 1.5) {
           /*ResetFloorMap();*/
           floChart.setOption({
             geo: {
@@ -491,8 +488,20 @@
             },
           });
         }
-
+        if (zoom > zoomToggle) {
-        resetData();
+          const currentImage = currentData.find(
+            ({ device_image }) => device_image
+          ).device_image;
+          option.series[1].data = option.series[0].data.map((d) => ({
+            ...d,
+            symbol:
+              "image://" + baseImgUrl + "/upload/device_icon/" + currentImage,
+          }));
+        } else {
+          option.series[1].data = [];
+        }
+        floChart.setOption(option);
+        // resetData();
       });
     }).fail(function () {
       toast_warning("查無該樓層地圖");
@@ -503,6 +512,8 @@
   //baja 訂閱設備
   function subDevice() {
     console.log("subDevice 開始");
+
+    let option = floChart.getOption();
     let floMyBaja = new subscriptionDevices();
     var ordPath = {
       area_tag: pageAct.AreaTag,
@@ -517,8 +528,9 @@
     let lightOnHotColorArr = [];
     let lightOffHotColorArr = [];
     // 燈光圈用
-    let lightOnGuidArr = [];
+    let deviceScatterNormalArr = [];
-    let lightOffGuidArr = [];
+    let deviceScatterCloseArr = [];
+    let deviceScatterErrorArr = [];
     floMyBaja.setSubscribeDevicesCallBack(function (data) {
       let matchDevice = currentData.filter(
         (x) => x.device_number == data.device_number_full
@@ -559,12 +571,11 @@
         setLightOpenOrClose(lightOn, matchDevice.device_guid);
         // console.log("Forge 渲染",data.point_name,lightOn)
         if (lightOn && matchDevice.spriteDbid) {
-          console.log(lightOn, matchDevice, matchDevice.spriteDbid);
           // setLightValues(matchDevice.device_guid, 200, 0xe1cf18);
           // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
-          lightOnHotColorArr.push(matchDevice.spriteDbid);
+          lightOnHotColorArr.push(matchDevice);
           lightOffHotColorArr = lightOffHotColorArr.filter(
-            (light) => light !== matchDevice.spriteDbid
+            (light) => light.spriteDbid !== matchDevice.spriteDbid
           );
           heatMap?.changeTemp(matchDevice.device_number, 40);
         } else if (matchDevice.spriteDbid) {
@@ -572,9 +583,9 @@
           // setLightValues(matchDevice.device_guid, 0, 0xffffff);
           // changeColorForHotspot(matchDevice.spriteDbid, null, lightOn);
           lightOnHotColorArr = lightOnHotColorArr.filter(
-            (light) => light !== matchDevice.spriteDbid
+            (light) => light.spriteDbid !== matchDevice.spriteDbid
           );
-          lightOffHotColorArr.push(matchDevice.spriteDbid);
+          lightOffHotColorArr.push(matchDevice);
           heatMap?.changeTemp(matchDevice.device_number, 0);
         }
       }
@@ -587,6 +598,13 @@
         $(`#${matchDevice.device_number}_status`)
           .attr("data-light-type", "normal")
           .data("light-type", "normal");
+        deviceScatterNormalArr.push(matchDevice);
+        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
@@ -594,6 +612,14 @@
         $(`#${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
@@ -601,12 +627,97 @@
         $(`#${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
+        );
       }
       setForgeHotSpotColor(matchDevice);
+      if (
+        option.series[0].data.length ===
+        lightOnHotColorArr.length + lightOffHotColorArr.length
+      ) {
+        lightOnHotColorArr.forEach((light) => {
+          const cur = option.series[0].data.find(
+            ({ device_number }) => device_number === light.device_number
+          );
 
-      console.log(lightOnHotColorArr, lightOffHotColorArr);
+          const onColor = currentData.find(
-      changeColorForHotspot(lightOnHotColorArr, null, true);
+            ({ device_number }) => device_number === light.device_number
-      changeColorForHotspot(lightOffHotColorArr, null, false);
+          ).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 ===
+        option.series[0].data.length
+      ) {
+        console.log("deviceScatterNormalArr", deviceScatterNormalArr)
+        deviceScatterNormalArr.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;
+          cur.itemStyle = { color: normalColor };
+        });
+
+
+        deviceScatterCloseArr.forEach((device) => {
+          const cur = option.series[0].data.find(
+            ({ device_number }) => device_number === device.device_number
+          );
+          const closeColor = currentData.find(
+            ({ device_number }) => device_number === device.device_number
+          ).device_close_color;
+          cur.itemStyle = { color: closeColor };
+        });
+
+        deviceScatterErrorArr.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;
+          cur.itemStyle = { color: errColor };
+        });
+
+        floChart.setOption(option);
+        $(loadEle).Loading("close");
+      }
     });
 
     floMyBaja.setSubscribeDeviceEndCallBack(function (data) {
@@ -902,7 +1013,7 @@
                     }
                   }
                 }
-                temp.push(item_node);
+                // temp.push(item_node);
               });
             } else {
               var device_index = allDeviceRowData.findIndex(
@@ -1038,7 +1149,9 @@
           _dbId: item._dbId ?? null,
         };
 
-        obj.itemStyle = { color: item.device_color };
+        obj.itemStyle = {
+          color: item.device_color || item.device_normal_color,
+        };
 
         res.push(obj);
       });
@@ -1127,7 +1240,9 @@
         if (item.selected) {
           obj.symbolSize = 50;
         }
-
+        obj.itemStyle = {
+          color: item.device_colse_color,
+        };
         res.push(obj);
       });
 
@@ -1196,7 +1311,7 @@
           deviceItems: item.deviceItems,
           deviceURL: item.deviceURL,
         };
-
+        console.log("異常", item.device_color);
         obj.itemStyle = { color: item.device_error_color };
 
         res.push(obj);
@@ -1325,7 +1440,6 @@
     if (floChart.getOption().geo && floChart.getOption().geo.length > 0) {
       zoom = floChart.getOption().geo[0].zoom;
     }
-
     if (zoom <= zoomToggle) {
       floChart.setOption({
         series: [
@@ -1396,7 +1510,6 @@
 
   // show 3D 模型
   function show3DModel(urn) {
-    $(loadEle).Loading("start");
     launchViewerForHotspot(urn, (viewer, nodeIds) => {
       // 隱藏 toolbar
       document.querySelector("#guiviewer3d-toolbar").style.display = "none";
@@ -1426,7 +1539,6 @@
             console.log(e);
           }
         );
-        $(loadEle).Loading("close");
       });
 
       setHeatMap();
@@ -1450,8 +1562,6 @@
         forge3DElev.init();
       }
     });
-
-    subDevice();
   }
 
   function setHeatMap() {