Merge remote-tracking branch 'origin/app' into app

h5/src/views/areaHeat/index.vue

 <template>
-  <div>
+  <div class="heat-map-container">
     <div class="heat-map" style="background-color: #fff">
       <div class="canvas">
         <img
@@ -7,6 +7,7 @@
           class="editFloorimg"
           id="editFloorimg"
           style="width: 100%"
+          @load="handleLoad"
         />
         <canvas class="canvas-position" id="canvas-position"></canvas>
       </div>
@@ -58,6 +59,22 @@ const getFloorImage = async () => {
     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([]); // 渠道列表
@@ -78,6 +95,7 @@ const getChannelList = async (mallId) => {
 };
 // 获取区域数据
 const gateData = ref([]);
+const gateDataMap = ref({}); // 用于存储区域数据的映射
 const getGateStatistics = async () => {
   try {
     const params = {
@@ -88,10 +106,16 @@ const getGateStatistics = async () => {
     const { data } = await heatmap.getAreaGateStatisticsApi(params);
     if (data.code === 200) {
       gateData.value = data.data || [];
+      gateDataMap.value = {};
+      gateData.value.forEach((item) => {
+        gateDataMap.value[item.gateId] = item;
+      });
       processGateLegend();
       if (gateData.value.length > 0) {
         drawAreaCanvas();
       }
+      const domHeight = document.documentElement.clientHeight;
+      console.log(domHeight);
     }
   } catch (error) {
     console.error("获取区域数据失败:", error);
@@ -185,14 +209,43 @@ function drawAreaCanvas() {
     let selectedArea = areas.value.find((area) => {
       return ctx.isPointInPath(area.path, x, y);
     });
+    const item = gateDataMap.value[selectedArea?.gateId];
+    if (item) {
+      const params = {
+        gateId: selectedArea?.gateId,
+        gateName: item.gateName || "",
+        indicatorKey: indicatorKey.value,
+        val: item[indicatorKey.value] || 0,
+      };
+      if (
+        [
+          "totalResidenceTime",
+          "avgResidenceTime",
+          "validDwellTime",
+          "avgValidDwellTime",
+        ].includes(indicatorKey.value)
+      ) {
+        params.val = getTimeMin(params.val);
+      }
+      window.postMessage(
+        JSON.parse(
+          JSON.stringify({
+            type: "areaClick",
+            data: params,
+          })
+        )
+      );
+      console.log(params);
+
       uni.postMessage(
         JSON.parse(
           JSON.stringify({
             type: "areaClick",
-          data: selectedArea ? selectedArea : null,
+            data: params,
           })
         )
       );
+    }
   };
 }
 
@@ -314,6 +367,19 @@ watch(
   },
   { immediate: true }
 );
+
+function getTimeMin(seconds) {
+  if (isNaN(seconds)) return seconds;
+  return (
+    numFormat(parseInt(seconds / 3600)) +
+    ":" +
+    numFormat(parseInt((seconds % 3600) / 60)) +
+    ":00"
+  );
+}
+function numFormat(val) {
+  return val > 9 ? val : "0" + val;
+}
 </script>
 <style>
 .canvas {
@@ -329,9 +395,8 @@ watch(
   z-index: 1;
 }
 .color-legend {
-  width: auto;
-  height: auto;
-  margin-top: 20px;
+  height: 70px;
+  margin-top: 30px;
 }
 .color-box {
   float: left;

h5/src/views/heatMap/index.vue

@@ -6,6 +6,7 @@
         class="editFloorimg"
         id="editFloorimg"
         style="width: 100%"
+        @load="handleLoad"
       />
       <div class="canvas-position" id="canvas-position"></div>
     </div>
@@ -93,6 +94,7 @@ const getHeatMapData = async (params) => {
         dealHeatData();
       });
     } else {
+      Toast.fail("获取热力图数据失败");
     }
   } catch (error) {
     console.error("Error fetching heat map data:", error);
@@ -114,6 +116,21 @@ const getFloorImage = async () => {
     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);