feat:增加ws连接状态

chenyao

2025-12-01 08fcc710d0a2acb185b3477d72fe32aff6f2e29a

 src/pages/map/index.vue

@@ -1,81 +1,69 @@
<!-- 地图 -->
<template>
  <!-- 地图容器 -->
  <view id="map" class="map" style="width: 100%; height: 80vh"></view>
   <view class="page-wrap">
      <WebViewPlus :src="`${viewUrl}`" @webMessage="onPostMessage" />
   </view>
</template>

<script setup>
onShow(() => {
  // #ifdef APP-PLUS
   import {
      getWebViewUrl
   } from "@/utils/index.js";
   import WebViewPlus from "@/components/WebViewPlus.vue";
   // const viewUrl = getWebViewUrl("/defaultMap");
   const baseUrl = getWebViewUrl("/defaultMap");

  // plus.screen.lockOrientation("landscape-primary");
  // #endif
});
   let envParam = "";
   // #ifdef WEB
   envParam = "isWeb=true";
   // #endif
   // #ifdef APP-PLUS
   envParam = "isWeb=false";
   // #endif
   const viewUrl = ref("");
   onMounted(() => {
      if (typeof baseUrl === "string") {
         viewUrl.value = baseUrl.includes("?") ?
            `${baseUrl}&${envParam}` :
            `${baseUrl}?${envParam}`;
      }
   });
   const onPostMessage = (data) => {
      if (data.type === "scanCode") {
         uni.navigateTo({
            url: "/subPackages/qrCode/index",
         });
      } else if (data.type === "jumpAddWork") { //新建任务
         const encodedData = encodeURIComponent(JSON.stringify(data.rowItem))
         uni.setStorageSync('webview_params', encodedData)
         uni.switchTab({
            url: `/subPackages/taskDetail/addTask/index`,
         });
      } else if (data.type === 'jumpMapNav') { //事件导航
         uni.navigateTo({
            url: `/subPackages/workDetail/mapWork/index?currentItem=${data.eventNum}`
         });
      } else if (data.type === 'workid') { //事件详情
         uni.navigateTo({
            url: `/subPackages/workDetail/index?eventNum=${data.eventNum}`
         });
      }
   };

onHide(() => {
  // #ifdef APP-PLUS
  // plus.screen.lockOrientation("portrait-primary");
  // #endif
});
   onShow(() => {
      uni.setTabBarItem({
         index: 2, // Tab 的索引（从0开始）
         visible: false,
      pagePath: "subPackages/taskDetail/addTask/index"
      })
      uni.setTabBarItem({
         index: 3, // Tab
         visible: true,
      });
   })
</script>

<script module="leaflet" lang="renderjs">
import L from 'leaflet'
import {
  onBeforeUnmount,
  onMounted
} from 'vue';

export default {
  mounted() {
    var basemapLayer0 = L.tileLayer(
      'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer1 = L.tileLayer(
      'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer2 = L.tileLayer(
      'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemapLayer3 = L.tileLayer(
      'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', {
        maxZoom: 18,
        minZoom: 1,
        tileSize: 256,
        zoomOffset: 1
      });
    var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]);
    var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]);

    let map = L.map('map', {
      preferCanvas: true,
      crs: L.CRS.EPSG4326,
      layers: [basemap1],
      zoomControl: false,
      attributionControl: false,
      doubleClickZoom: false,
      editable: true //绘制控件
    }).setView([25.992338, 114.823254], 13);
  }
}
</script>

<style scoped>
/* Leaflet 默认容器要有高度 */
.map {
  width: 100%;
  height: 100%;
}
<style scoped lang="scss">
   .page-wrap {
      font-size: 20px;
   }
</style>