fix: 修复门店热力,区域热力loading bug

h5/src/views/areaHeat/index.vue

 <template>
 <template>
-  <div>
+  <div class="heat-map-container">
     <div class="heat-map" style="background-color: #fff">
     <div class="heat-map" style="background-color: #fff">
       <div class="canvas">
       <div class="canvas">
         <img
         <img
@@ -7,6 +7,7 @@
           class="editFloorimg"
           class="editFloorimg"
           id="editFloorimg"
           id="editFloorimg"
           style="width: 100%"
           style="width: 100%"
+          @load="handleLoad"
         />
         />
         <canvas class="canvas-position" id="canvas-position"></canvas>
         <canvas class="canvas-position" id="canvas-position"></canvas>
       </div>
       </div>
@@ -58,6 +59,22 @@ const getFloorImage = async () => {
     return "";
     return "";
   }
   }
 };
 };
+const handleLoad = () => {
+  const domHeight =
+    document.querySelector(".heat-map-container")?.clientHeight || 0;
+  uni.postMessage({
+    data: {
+      height: domHeight,
+      type: "setHeight",
+    },
+  });
+  window.postMessage({
+    data: {
+      height: domHeight,
+      type: "setHeight",
+    },
+  });
+};
 
 
 /************** 通道数据相关 **************/
 /************** 通道数据相关 **************/
 const channelList = ref([]); // 渠道列表
 const channelList = ref([]); // 渠道列表
@@ -92,6 +109,8 @@ const getGateStatistics = async () => {
       if (gateData.value.length > 0) {
       if (gateData.value.length > 0) {
         drawAreaCanvas();
         drawAreaCanvas();
       }
       }
+      const domHeight = document.documentElement.clientHeight;
+      console.log(domHeight);
     }
     }
   } catch (error) {
   } catch (error) {
     console.error("获取区域数据失败:", error);
     console.error("获取区域数据失败:", error);
@@ -329,9 +348,8 @@ watch(
   z-index: 1;
   z-index: 1;
 }
 }
 .color-legend {
 .color-legend {
-  width: auto;
-  height: auto;
-  margin-top: 20px;
+  height: 70px;
+  margin-top: 30px;
 }
 }
 .color-box {
 .color-box {
   float: left;
   float: left;

h5/src/views/heatMap/index.vue

@@ -6,6 +6,7 @@
         class="editFloorimg"
         class="editFloorimg"
         id="editFloorimg"
         id="editFloorimg"
         style="width: 100%"
         style="width: 100%"
+        @load="handleLoad"
       />
       />
       <div class="canvas-position" id="canvas-position"></div>
       <div class="canvas-position" id="canvas-position"></div>
     </div>
     </div>
@@ -93,6 +94,7 @@ const getHeatMapData = async (params) => {
         dealHeatData();
         dealHeatData();
       });
       });
     } else {
     } else {
+      Toast.fail("获取热力图数据失败");
     }
     }
   } catch (error) {
   } catch (error) {
     console.error("Error fetching heat map data:", error);
     console.error("Error fetching heat map data:", error);
@@ -114,6 +116,21 @@ const getFloorImage = async () => {
     return "";
     return "";
   }
   }
 };
 };
+const handleLoad = () => {
+  const domHeight = document.querySelector(".heat-map")?.clientHeight || 0;
+  uni.postMessage({
+    data: {
+      height: domHeight + 60,
+      type: "setHeight",
+    },
+  });
+  window.postMessage({
+    data: {
+      height: domHeight + 60,
+      type: "setHeight",
+    },
+  });
+};
 
 
 /************** 热力图相关 **************/
 /************** 热力图相关 **************/
 const heatInstance = ref(null);
 const heatInstance = ref(null);