feat: 增加区域热力postMessage

h5/src/views/areaHeat/index.vue

@@ -95,6 +95,7 @@ const getChannelList = async (mallId) => {
 };
 };
 // 获取区域数据
 // 获取区域数据
 const gateData = ref([]);
 const gateData = ref([]);
+const gateDataMap = ref({}); // 用于存储区域数据的映射
 const getGateStatistics = async () => {
 const getGateStatistics = async () => {
   try {
   try {
     const params = {
     const params = {
@@ -105,6 +106,10 @@ const getGateStatistics = async () => {
     const { data } = await heatmap.getAreaGateStatisticsApi(params);
     const { data } = await heatmap.getAreaGateStatisticsApi(params);
     if (data.code === 200) {
     if (data.code === 200) {
       gateData.value = data.data || [];
       gateData.value = data.data || [];
+      gateDataMap.value = {};
+      gateData.value.forEach((item) => {
+        gateDataMap.value[item.gateId] = item;
+      });
       processGateLegend();
       processGateLegend();
       if (gateData.value.length > 0) {
       if (gateData.value.length > 0) {
         drawAreaCanvas();
         drawAreaCanvas();
@@ -204,14 +209,43 @@ function drawAreaCanvas() {
     let selectedArea = areas.value.find((area) => {
     let selectedArea = areas.value.find((area) => {
       return ctx.isPointInPath(area.path, x, y);
       return ctx.isPointInPath(area.path, x, y);
     });
     });
-    uni.postMessage(
-      JSON.parse(
-        JSON.stringify({
-          type: "areaClick",
-          data: selectedArea ? selectedArea : null,
-        })
-      )
-    );
+    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: params,
+          })
+        )
+      );
+    }
   };
   };
 }
 }
 
 
@@ -333,6 +367,19 @@ watch(
   },
   },
   { immediate: true }
   { 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>
 </script>
 <style>
 <style>
 .canvas {
 .canvas {