feat: 小程序平台适配

h5/src/router/index.js

@@ -18,12 +18,17 @@ const routes = [
     name: "AreaHeatMap",
     name: "AreaHeatMap",
     component: () => import("@/views/areaHeat/index.vue"),
     component: () => import("@/views/areaHeat/index.vue"),
   },
   },
+  {
+    path: "/demo",
+    name: "Demo",
+    component: () => import("@/views/demo/index.vue"),
+  },
 ];
 ];
 
 
 // const isDev = process.env.NODE_ENV === "development";
 // const isDev = process.env.NODE_ENV === "development";
 const router = createRouter({
 const router = createRouter({
   // history: createWebHistory(!isDev ? "/apph5/" : ""),
   // history: createWebHistory(!isDev ? "/apph5/" : ""),
-  history: createWebHistory('/apph5/'),
+  history: createWebHistory("/apph5/"),
   routes,
   routes,
 });
 });
 
 

h5/src/static/css/index.css

@@ -214,6 +214,7 @@ body.succ {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   background-color: #fff;
   background-color: #fff;
+  overflow-y: auto;
 }
 }
 .touchmove {
 .touchmove {
   overflow: auto;
   overflow: auto;

h5/src/views/areaHeat/index.vue

+<!-- <template>
+  <div class="heat-map-container">
+    <div class="heat-map" style="background-color: #f00">
+      <div class="canvas">
+        <img
+          :src="floorImage"
+          class="editFloorimg"
+          id="editFloorimg"
+          style="width: 100%"
+        />
+        <canvas class="canvas-position" id="canvas-position"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, ref, onMounted } from "vue";
+import { Toast } from "vant";
+import { useRoute } from "vue-router";
+import heatmap from "@/api/heatMap";
+/************** 图片相关 **************/
+const $route = useRoute();
+const floorImage = ref(""); // 楼层图片
+const startDate = ref(""); // 开始日期
+const endDate = ref(""); // 结束日期
+const getFloorImage = async () => {
+  try {
+    const { data } = await heatmap.getStoreDataApi(storeId.value);
+    if (data.code === 200) {
+      return data.data?.mallPlan || "";
+    }
+    return "";
+  } catch (error) {
+    return "";
+  }
+};
+
+watch(
+  () => $route.query,
+  async (newVal) => {
+    const { token, mallId, startDate: sDate, endDate: eDate, key } = newVal;
+
+    if (token) {
+      window.localStorage.setItem("atoken", token);
+    }
+
+    startDate.value = sDate;
+    endDate.value = eDate;
+    Toast(startDate.value, endDate.value);
+
+    if (mallId) {
+      indicatorKey.value = key;
+
+      storeId.value = mallId;
+      const url = await getFloorImage();
+      if (!url) {
+        Toast.fail("未找到门店平面图");
+        return false;
+      }
+      floorImage.value = `https://store.keliuyun.com/images/${url}`;
+      // getFloorImage();
+
+      // if (floorImage.value) {
+      //   getChannelList(mallId);
+      // }
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style>
+.canvas {
+  position: relative;
+  width: 100%;
+}
+.canvas .canvas-position {
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.color-legend {
+  height: 70px;
+  margin-top: 30px;
+}
+.color-box {
+  float: left;
+  position: relative;
+}
+.color-block {
+  float: left;
+  width: 60px;
+  height: 40px;
+}
+
+.color-text {
+  width: 100%;
+  text-align: center;
+  font-size: 1em;
+  left: -15px;
+  position: absolute;
+}
+</style> -->
+
 <template>
 <template>
   <div class="heat-map-container">
   <div class="heat-map-container">
     <div class="heat-map" style="background-color: #fff">
     <div class="heat-map" style="background-color: #fff">

h5/src/views/video/controller.vue

@@ -3,14 +3,8 @@
     <van-action-bar>
     <van-action-bar>
       <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
       <van-action-bar-icon icon="video-o" text="场景" @click="onClickIcon('scene')" />
       <van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" />
       <van-action-bar-icon v-if="props.ptzEnable" icon="aim" text="云台" @click="onClickIcon('ptz')" />
-      <van-action-bar-button
-          type="danger"
-          color="#387CF5"
-          style="height: 44px"
-          text="截图巡检"
-          :disabled="!screenshotEnable"
-          @click="onClickButton"
-      />
+      <van-action-bar-button type="danger" color="#387CF5" style="height: 44px" text="截图巡检"
+        :disabled="!screenshotEnable" @click="onClickButton" />
     </van-action-bar>
     </van-action-bar>
   </div>
   </div>
 </template>
 </template>
@@ -28,7 +22,6 @@ function onClickIcon(type) {
   }
   }
 }
 }
 function onClickButton() {
 function onClickButton() {
-  console.log('onClickButton')
   emit('screenshot')
   emit('screenshot')
 }
 }
 </script>
 </script>
@@ -37,10 +30,12 @@ function onClickButton() {
 .controller-container {
 .controller-container {
   .van-action-bar-icon {
   .van-action-bar-icon {
     width: 60px;
     width: 60px;
+
     .van-icon {
     .van-icon {
       font-size: 32px;
       font-size: 32px;
     }
     }
   }
   }
+
   .van-button {
   .van-button {
     border-radius: 16px;
     border-radius: 16px;
   }
   }